PennController for IBEX › Forums › Support › Placing elements of unknown width in sequence in a canvas
- This topic has 2 replies, 2 voices, and was last updated 2 years, 1 month ago by
mawilson.
-
AuthorPosts
-
July 20, 2022 at 12:31 pm #8284
mawilson
ParticipantI’m trying to set up an experiment where a sentence with 2 blanks in it is presented, and participants can drag and drop a word to fill in one of the blanks.
To do this, I think I need to split the sentence up into 3 chunks, and add the chunks + drop regions (which are just nbsps in a div with a border—if there’s a better way to do this, I’m open to suggestions!) to a canvas. Otherwise, if I print the chunks one-by-one, I end up with everything stacked on top of each other instead of side-by-side.
However, I’m not sure how to get the sentence to show up formatted correctly left-to-right with the drag and drop regions in the middle of the sentence, as I can’t seem to figure out how to position one element to the right of the previous element in a canvas. Manually calculating the correct distance isn’t really an option, sentence the length of the sentences vary across items. It would be overly time-consuming to manually calculate the pixel offsets for each of the five elements in the canvas for each sentence.
I’ve tried using nested
.after
s inside the canvas, but this doesn’t seem to work (everything ends up squished).Here’s the demo link: https://farm.pcibex.net/r/PtpjPM/
And the code I’m using:
Template("practice.csv", variable => newTrial("trial_prac", newText("firstbox", '<div style="border:1px solid #000;"> </div>') , newText("secondbox", '<div style="border:1px solid #000;"> </div>') , newText("sentence1", "Should the word go here ") , newText("sentence2", " or here ") , newText("sentence3", "?") , newCanvas("boxes") .add(0, 0, getText("sentence1") .after( getText("firstbox") .after( getText("sentence2") .after( getText("secondbox") .after( getText("sentence3") ) ) ) ) ) .center() .print() , newText("word", "word") .print() , newDragDrop("dd", "bungee") .log() .addDrop( getText("firstbox"), getText("secondbox"), ) .addDrag(getText("word")) .offset('0.5em', '0.1em', getText("firstbox"), getText("secondbox")) .wait() , newText("p", "<p /><p />") .center() .print() , newButton("ready", "Ready") .center() .print() .wait() .remove() ) )
July 20, 2022 at 1:06 pm #8286Jeremy
KeymasterHi,
Create a container element (eg. a Text element) and set its
display
style attribute toflex
. Then print your elements inside that container element. Also make sure to set theposition
style attribute of your boxes torelative
in order for “word” to be positioned relative to the boxes themselves and not their container (the container Text element):Template("practice.csv", variable => newTrial("trial_prac", newText("container", "").css('display', 'flex').print() , newText("Should the word go here ").print(getText("container")) , newText("firstbox", " ") .css({border:'1px solid #000', width: '4em', position: 'relative'}) .print(getText("container")) , newText(" or here ").print(getText("container")) , newText("secondbox", " ") .css({border:'1px solid #000', width: '4em', position: 'relative'}) .print(getText("container")) , newText("?").print(getText("container")) , newText("word", "word").center().print() , newDragDrop("dd", "bungee") .log() .addDrop( getText("firstbox"), getText("secondbox"), ) .addDrag(getText("word")) .offset('0.5em', '0em', getText("firstbox"), getText("secondbox")) .wait() , newButton("Ready") .css("margin-top", "2em") .center() .print() .wait() .remove() ) )
Jeremy
July 20, 2022 at 2:02 pm #8287mawilson
ParticipantThank you! It’s working great now!
-
AuthorPosts
- You must be logged in to reply to this topic.