Placing elements of unknown width in sequence in a canvas

[mawilson]

I’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 .afters 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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>')
		,
		
		newText("secondbox",
				'<div style="border:1px solid #000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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()
	)
)

[Jeremy]

Hi,

Create a container element (eg. a Text element) and set its display style attribute to flex. Then print your elements inside that container element. Also make sure to set the position style attribute of your boxes to relative 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

[mawilson]

Thank you! It’s working great now!

[Author]

Posts