Color-coding text based on inputs

[lbrehm]

I’m running an experiment where we want people to judge whether other people’s labels for things are sensible. Trials have two parts: in part 1, the participant types a name for a picture. In part 2, a word cloud is generated from the top 5 responses previously given (saved in a data table), and the participant uses a slider scale to judge whether they agree with other people. I’d like to color the word cloud line that matches the participant’s response in red, if there is a matching response– I can’t get this working.

—-
Template(“diadia_items_2.csv”, row=>
newTrial(“experiment”,
newImage( row.picture).size(“auto”, “50vh”).center().print(),
newTextInput(“yours”, “”).log().size(300,30)
.settings.before(newText(“What do YOU usually call this?”)).center().print(),
newButton(“Next”)
.print(“50vw”,”90vh”)
.wait(
getTextInput(“yours”).test.text(/[^\s]+/)
.failure(
newText(“boxfill”,”Please enter a label or write ‘don’t know’ in the ‘what do YOU call this’ box”).cssContainer(
{“border”:”1px solid red”, “padding”:”1px”, “margin”:”0px 0px 0px 0px”}).print() )),
clear(),

newText(“choice”,”Here’s what other people said”).center().print(),
newText(” “).center().print(),

// color code a previous response if it matches yours. this part doesn’t work.
newText(“n1”,row.name_1),
getTextInput(“yours”).test.text(“n1”)
.success(getText(“n1”).css(“font-size”, row.font_1).color(“red”).print().center())
.failure(getText(“n1”).css(“font-size”, row.font_1).print().center()),
newText(“n2”,row.name_2),
getTextInput(“yours”).test.text(“n2”)
.success(getText(“n2”).css(“font-size”, row.font_2).color(“red”).print().center())
.failure(getText(“n2”).css(“font-size”, row.font_2).print().center()),
newText(“n3”,row.name_3),
getTextInput(“yours”).test.text(“n3”)
.success(getText(“n3”).css(“font-size”, row.font_3).color(“red”).print().center())
.failure(getText(“n3”).css(“font-size”, row.font_3).print().center()),
newText(“n4”,row.name_4),
getTextInput(“yours”).test.text(“n4”)
.success(getText(“n4”).css(“font-size”, row.font_4).color(“red”).print().center())
.failure(getText(“n4”).css(“font-size”, row.font_4).print().center()),
newText(“n5”,row.name_5),
getTextInput(“yours”).test.text(“n5”)
.success(getText(“n5”).css(“font-size”, row.font_5).color(“red”).print().center())
.failure(getText(“n5”).css(“font-size”, row.font_5).print().center()),

// the simple presentation code is here–I know it works if uncommented
// newText(“n1”,row.name_1).css(“font-size”, row.font_1).center().print(),
// newText(“n2”,row.name_2).css(“font-size”, row.font_2).center().print(),
// newText(“n3”,row.name_3).css(“font-size”, row.font_3).center().print(),
// newText(“n4”,row.name_4).css(“font-size”, row.font_4).center().print(),
// newText(“n5”,row.name_5).css(“font-size”, row.font_5).center().print(),

//this shuffles the five responses from above and presents them to make a quasi-word cloud
newSelector(“texts”)
.add(getText(“n1”),getText(“n2”),getText(“n3”),getText(“n4”),getText(“n5”))
.shuffle().disableClicks().center().print(),

newText(“Do you agree with what other people said?”).settings.css(“font-size”, “24px”)
.print(“center at 50vw”,”70vh”).settings.css(“font-size”, “24px”),

newScale(“surprise”,100).slider().settings.css(“font-size”, “24px”).size(“40vw”).css(“max-width”, “unset”).log(),
newCanvas(“container”, “40vw”, “2em”) // Container for layout
.add( “left at 0%” , 0, newText(“Not at all”).settings.css(“font-size”, “24px”))
.add( “right at 100%”, 0, newText(“Completely”).settings.css(“font-size”, “24px”))
.add( “center at 50%”, 0, newText(“Mostly”).settings.css(“font-size”, “24px”))
.add( “center at 50%”, 30, getScale(“surprise”)) // Add slider to canvas
.print(“30vw”,”75vh”),

newButton(“Next”)
.print(“50vw”,”90vh”)
.wait()
));

And here’s the demonstration link: https://farm.pcibex.net/r/DlPbkn/

[Author]

Posts