macro help and question about tracking from a beginner *(for TheMadExile)

Comments

• greyelf

  February 2015

  I have corrected your two examples:

  
Respond by clicking the appropriate answer

1. These lines run from north to south and converge at the poles

a)[Latitude]<c1| (click: ?c1)[(colour: "#D00000")[''Not quite...''] (link-goto: "review section 1", "review section")]
b)[Longitude]<c2| (click: ?c2)[(colour: "#00FF00")[//Correct!//]]
c)[Prime meridian]<c3| (click: ?c3)[(colour: "red")[''//Are you sure about that...//''] (link-goto: "review section 3", "review section")]


OR



Respond by clicking the appropriate box

(set: $answery to (colour:"#00FF00"))
(set: $answern to (colour:"#D00000"))

2. The the unit of measure for latitude and longitude is...

a) Miles (link: "`[]`")[$answern[//incorrect//] (link-goto: "review section 1", "review section")]
b) Chains (link: "`[]`")[$answern[//incorrect//] (link-goto: "review section 2", "review section")]
c) Degrees (link: "`[]`")[$answery[//correct!//]]


  Basically when you use the (colour:) macro on some text you need to wrap the text in square brackets:

  (colour: "red")[The text you want to appear red]

  The same goes when you use a variable that contains styling to style some text:

  
(set: $var to (colour: "red"))
$var[The text you want to style.]

• aeghmn

  February 2015

  That's what I was missing! Thanks.
  Another question
  
  I just realized I was testing with Harlowe, but my project is in Sugarcube because that is what we were using before the switch to Twine2 and we want to keep our content looking the same.
  Is there a way to link from one story (in Sugarcube (the main module)) to another story (in Harlowe (the quizzes)) and have references back from the quiz answers to that initial Sugarcube module?
• TheMadExile

  February 2015

  aeghmn wrote:

  
  I just realized I was testing with Harlowe, but this doesn't carry over to Sugarcube. Does it?
  

  
  
  No, it doesn't.
  
  In SugarCube, it could look something like this:

  
Respond by clicking the appropriate answer

1. These lines run from north to south and converge at the poles

a) <span id="q1-1"><<click "Latitude">> <<replace "#q1-1">>Latitude @@.answer-no;''Not quite...''@@ [[review section 1|review section]]<</replace>> <</click>></span>
b) <span id="q1-2"><<click "Longitude">> <<replace "#q1-2">>Longitude @@.answer-yes;//Correct!//@@<</replace>> <</click>></span>
c) <span id="q1-3"><<click "Prime meridian">> <<replace "#q1-3">>Prime meridian @@.answer-no;''//Are you sure about that...//''@@ [[review section 3|review section]]<</replace>> <</click>></span>


OR


Respond by clicking the appropriate box

2. The the unit of measure for latitude and longitude is...

a) Miles <span id="q2-1"><<click "[]">> <<replace "#q2-1">>@@.answer-no;//incorrect//@@ [[review section 1|review section]]<</replace>> <</click>></span>
b) Chains <span id="q2-2"><<click "[]">> <<replace "#q2-2">>@@.answer-no;//incorrect//@@ [[review section 2|review section]]<</replace>> <</click>></span>
c) Degrees <span id="q2-3"><<click "[]">> <<replace "#q2-3">>@@.answer-yes;//correct!//@@<</replace>> <</click>></span>


  You'd also want to setup the following in the Story Stylesheet:

  
.answer-yes {
color: #0F0;
}
.answer-no {
color: #D00;
}

• aeghmn

  February 2015

  So then if I wanted the passages that were being referred to to review to open in a new tab/window so the user wouldn't lose their place in the main module is there a way to insert that into the CSS for answer-no instances? Or do you have to put that in the actual passage using html?
  
  [quote]Something like:
  
  @ ; <a href="[[review section 2|review section]]" target="_blank"><</replace>> <</click>></span></a>
  
  **my attempt doesn't actually work, I don't know how to combine the a href syntax with that of Twine.
• greyelf

  February 2015

  Your problem is made up of two parts:
  
  1. The format of a manually created passage link:
  
  If you look at the HTML code generated for a standard passage link while reading a SugarCube based story you will see something like the following:

  
<a class="link-internal" data-passage="The Title of the next Passage">The text to show in the link</a>


  So the <a> tag part of your code would look like:

  <a class="link-internal" data-passage="review section">review section 2</a>

  
  2. Making a new instance (in a second tab) of your story start on a passage indicated by a parameter:
  
  I don't know if this is possible, the TheMadExile would be able to answer this better than me.
• TheMadExile

  February 2015

  aeghmn wrote:

  
  So then if I wanted the passages that were being referred to to review to open in a new tab/window so the user wouldn't lose their place in the main module is there a way to insert that into the CSS for answer-no instances? Or do you have to put that in the actual passage using html?
  

  
  
  Do you need the review material opened side-by-side with the quiz or is your concern chiefly about returning the user to the same spot within the quiz?
• aeghmn

  February 2015

  Side by side would be ideal, so they can reference the wording of the question with that of the section they are reviewing.
  In the perfect world only the passage part that I have highlighted in yellow would come up, but if it had to be the whole thing that works as well.
  
  The process would be:
  1) Open quiz
  2) Attempt question 1
  3) If they get the answer wrong click the review link that will open the passage where the answer was covered in a new window
  4) They read the newly opened window and see where they went wrong
  5) Close the review window and proceed to the next question in the quiz
  
  *repeat steps 3-5 as necessary.
  
  
  Thanks a tonne for your help.
  
  
  
• TheMadExile

  February 2015

  I've attached two examples in a Twine 2 archive.  One is titled Review Material (Dialog), while the other is Review Material (New Tab).
  
  Review Material (Dialog):  This example opens the passage to review in one of SugarCube's dialogs.  Note: Because the current release version of Twine 2 (as I write this, v2.0.2) contains the tag import failure bug, you'll need to edit the story and add the tag widget to the Widgets passage to get this one to work.
  
  Review Material (New Tab):  This example opens the passage to review in a new tab/window.  Note: For the newly opened tabs/windows, the example is currently setup to remove the UI bar (I figured that it wasn't necessary for reviews).  If you don't like that, simply remove the line jQuery("#ui-bar").remove(); from the StoryInit special passage (it's near the bottom).
  
  Both include custom styles at the bottom of the Story Stylesheet (I also included the Bleached style, above the custom bits, since your screenshots seemed to show that you're using it).  Additionally, Review Material (New Tab) includes a little Story JavaScript.
  
  Personally, unless your heart is set on opening up a new tab/window, I'd suggest going with the Review Material (Dialog) version.
  
  Anyway, try them out and let me know if you have any questions.
• aeghmn

  February 2015

  The dialog option is awesome except for 2 things:
  1. The bullets from the initial passage that is being referenced disappear in the dialog box (doesn't matter what browser)
  2. The user sees the link text at the bottom of the review passage dialog box because it is in the passage being referenced. (see image)
        - While they should just click the 'x' to get out of the dialog box, there will be some who won't.
        - Clicking the 'assessment' link causes  nothing  to happen as the main module is already on this page
        - Clicking the 'next'  link causes the page beneath the dialogue box to change, not the one in the box
  
  Thoughts? Ideas?
  
  Thanks!
• TheMadExile

  February 2015

  aeghmn wrote:

  
  1. The bullets from the initial passage that is being referenced disappear in the dialog box (doesn't matter what browser)
  

  
  
  Ah.  A gaff on my part, one that is easily rectified.
  
  
  

  aeghmn wrote:

  
  2. The user sees the link text at the bottom of the review passage dialog box because it is in the passage being referenced. (see image)
        - While they should just click the 'x' to get out of the dialog box, there will be some who won't.
        - Clicking the 'assessment' link causes  nothing  to happen as the main module is already on this page
        - Clicking the 'next'  link causes the page beneath the dialogue box to change, not the one in the box
  

  
  
  I can't see it (you posed the same image as last time), however, I believe that I get the idea.  Assuming that I do have the idea, your two issues could be solved by separating the core study material from the passage it's normally displayed in (via the <<display>> macro).
  
  
  Attached is a new version of the example.  It contains the necessary modifications to fix the list problem and, hopefully, fully address the link issue.  You will, again, need to edit the story and add the tag widget to the Widgets passage.
  
  Let me know if you have any further issues or questions.
  
• aeghmn

  February 2015

  OK.
  I think I got it.
  I've attached an archive file that includes 2 paths, one that is labeled as _m which is the format my stuff in already in and then the other with the _TME label, which is what I interpreted your response to mean. What it comes down to is  I have to redo the structure of my module from it being a direct flow one element to another to being a bunch of separate passages being referenced?
  I've only attached a small section of the module, there will be 130 odd passages to change and I want to make sure this is what you meant before I start going down that road.
  Also, if that is the case, my story will have around 270 passages. Will that be a problem for loading speed?
  
  Thanks again!
  
• TheMadExile

  February 2015

  I looked at your work and it seems as though you have the right of it.  I also test played the _TME path and it seemed to be working as intended.
  
  And no, 270 odd passages shouldn't be an issue (I've seen projects with far, far more).
  
• aeghmn

  February 2015

  Perfect.
  You've been a huge help.
  I have a page of acknowledgements that are going in to this, if I stick you in there do you want to me under your Twine handle or do you have a human name you'd rather use?
• TheMadExile

  February 2015

  Oh!  I almost forgot.  I noticed that you're using a StoryTitle passage.  As noted in the Passage Names section of the Special Names docs, when using SugarCube in Twine 2, the StoryTitle passage is not special* (and thus is not used by SugarCube) since the title is part of the story itself in Twine 2.  So, you're going to want to rename your story to what you currently have in StoryTitle passage eventually.
  
  * StoryTitle actually does work in the current release (v1.0.16).  That is a bug, which has been fixed and will go live with the next release.
• TheMadExile

  February 2015

  aeghmn wrote:

  
  I have a page of acknowledgements that are going in to this, if I stick you in there do you want to me under your Twine handle or do you have a human name you'd rather use?
  

  
  
  I don't really have a preference, so if you do decide to toss me an acknowledgement, feel free to use whichever best fits into your project (TheMadExile or Thomas M. Edwards).
• aeghmn

  February 2015

  Another question:
  I tried to modify the dialogue box code you gave me  for text in the review sections to work for images. I highlighted the bits in yellow that i think are making it muck up.
  The process that I want to happen is:
  On click of a thumbnail image leading to another  larger image in it's own passage, display this large image in it's own dialog box with the option to print this larger image.
  This is how I am calling the widget called 'image_print': <<image_print[img[alttext|LatLongExample_thumb.png][LatLongExample]]>> 
  
  The image also has a link to the story
  
  
  
• TheMadExile

  February 2015

  aeghmn wrote:

  
  I tried to modify the dialogue box code you gave me  for text in the review sections to work for images. I highlighted the bits in yellow that i think are making it muck up.
  

  
  
  You're partially correct about the issue (the text property passed to <<click>> needs to go, however, the call to the processText() method is still correct).  The original <<review>> receives link objects (from the [[link]] markup), not image objects (from the [img[]] markup), so things need to be a bit different.  You want to pass the whole image object to <<click>>, however, you also do not want it receiving the link property, since it would also forward you to the associated passage on click.  So, we need to do a little surgery on the image object to cache and remove the passage link, which will later be used to populate the dialog, before calling <<click>>.
  
  Here are updated versions of both widgets.  (n.b. I've published an update to SugarCube (v1.0.17) addressing the issue which was forcing button bar styling on your unordered lists, so I was able to update both to remove the hackery needed to bypass the issue in the previous version.)

  
<<widget "review">>\
<<click $args[0].text>>
<<script>>
var passage = state.active.variables.args[0].link,
dialog = UISystem.setup("review");
new Wikifier(
dialog,
tale.get(passage).processText() + "<br>"
);
UISystem.open();
jQuery(dialog).scrollTop(0);
<</script>>
<</click>>\
<</widget>>

<<widget "image_print">>\
<<set $args.link to $args[0].link; delete $args[0].link>>
<<click $args[0]>>
<<script>>
var passage = state.active.variables.args.link,
dialog = UISystem.setup("review");
new Wikifier(
dialog,
tale.get(passage).processText() + "<br>"
);
UISystem.open({ resizeOnImagesLoaded : true });
jQuery(dialog).scrollTop(0);
<</script>>
<</click>>\
<</widget>>


  Usage:

  
<<image_print [img[title|LatLongExample_thumb.png][LatLongExample]]>>


  I'm assuming that you're doing something like the following in the image review passages:

  
[img[title|LatLongExample.png]]

• aeghmn

  April 2015

  Still going...
  I am having trouble getting a print method to to work on my larger images.
  If I try :

  [img[alttext|projrtool.png]]
<a href="javascript:window.print()">Click to Print This Page</a>

  It prints the entire page, not just the image in the dialog box.
  
  Then I tried:

  function printscreen() {
window.focus();
window.print();
}

  in the JavaScript window, in combination with 

  [img[alttext|projvtool.png]]
<button onclick="printscreen()">Print</button>

  in the image windows, but that didn't work either.
  
  What I want to happen: In the main document are smaller thumbnail images, and when you click them they bring up full sized (readable) images in a dialog box. I want the user to have the option to print these larger images.
  
  Link here: http://www.uoguelph.ca/~meghanm/twine2/module.html
• TheMadExile

  April 2015

  Add something like the following to your Story Stylesheet:

  
#ui-dialog-print {
display: none;
z-index: 2000;
position: absolute;
left: 0;
top: 0;
}
#ui-dialog-print .noprint {
display: none;
}
@media print {
html.ui-open body * {
visibility: hidden;
}
html.ui-open #ui-dialog-print, html.ui-open #ui-dialog-print * {
visibility: visible;
}
html.ui-open #ui-dialog-print {
display: block;
}
}


  Add something like the following to your Story JavaScript:

  
UISystem.openPrintableDialog = function () {
var dialogNodes = UISystem.body().childNodes;
if (dialogNodes.length !== 0) {
var dialogPrint = document.getElementById("ui-dialog-print");
if (dialogPrint === null) {
dialogPrint = document.createElement("div");
dialogPrint.id = "ui-dialog-print";
document.body.appendChild(dialogPrint);
} else {
removeChildren(dialogPrint);
}
for (var i = 0; i < dialogNodes.length; i++) {
dialogPrint.appendChild(dialogNodes<i>.cloneNode(true));
}
}
UISystem.open.apply(this, arguments);
};


  Then, in your widgets, change [i]all instances of calls to UISystem.open() to UISystem.openPrintableDialog().  For example:

  
// This
UISystem.open();
// Becomes
UISystem.openPrintableDialog();

// This
UISystem.open({ resizeOnImagesLoaded : true });
// Becomes
UISystem.openPrintableDialog({ resizeOnImagesLoaded : true });


  And you should be done.  You can add a separate print link within the dialog, but you do not have to as the standard printing mechanisms (menu item and shortcut) will work.
  
  
  If you did want to add separate print link within the dialog, then I'd suggest adding a widget something like the following (the noprint class, from the styles above, make the link itself not print):

  
<<widget "printlink">>\
<div class="noprint"><a onclick="window.printDialog()">Print</a></div>\
<</widget>>


  Which you would use something like the following in your dialog setups (be careful of extraneous whitespace):

  
<<printlink>>\
[img[A cat in a hat|cat_in_a_hat.jpg]]