html layout/event times/selector vs. scale/ compatibility

[Jeremy]

Hi,

newVar("correct1").global().set(getVar("answer1")).set( v=>v==row.Correct1 )
Does this write in answer1 the answer only if it matches the one in the template?

As you can see in your results file, the value of the Var element will be true if what the user typed matches what you indicated in the CSV file, false otherwise

If you want to condition your code on whether the participant typed the correct answer, just use test.is(true) on the Var element and whatever you put in success will run when they type the correct answer, otherwise what you put in failure will run

Could you suggest how to improve the syntax?

You could simply do /^\S{1,6}$/ to accept any sequence of 1 to 6 non-space characters (which would then include diacritic characters, but also other non-space characters like _ or ? for example)

Jeremy

[HPI]

Hi,
I am running this experiment and some participants experience a problem with the blank function that I load at the beginning of the experiment

blank = sentence => Object({html: 
    sentence.replace(/_+/g, (t,i)=>`<textarea name='blank${i}' rows=1 cols=${t.length+1} style='max-height: 1.7em'></textarea>`)
});

Template("ansa_template.csv", row =>
newTrial("ansa", 

    newVar("ansa_1","").global(),newVar("ansa_2","").global(),newVar("ansa_3","").global(),newVar("ansa_4","").global(),newVar("ansa_5","").global(),
    newVar("ansa_6","").global(),newVar("ansa_7","").global(),newVar("ansa_8","").global(),newVar("ansa_9","").global(),newVar("ansa_10","").global(),
    newVar("ansa_11","").global(),newVar("ansa_12","").global(),newVar("ansa_13","").global(),newVar("ansa_14","").global(),newVar("ansa_15","").global(),
    newVar("ansa_16","").global(),newVar("ansa_17","").global(),newVar("ansa_18","").global(),newVar("ansa_19","").global(),newVar("ansa_20","").global()
    ,
    
    //.test.is('AB')
    
    newTimer("loop", 10).callback(
        getVar("ansa_1").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[0]||{value:v1}).value ),
        getVar("ansa_2").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[1]||{value:v1}).value ),
        getVar("ansa_3").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[2]||{value:v1}).value ),
        getVar("ansa_4").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[3]||{value:v1}).value ),
        getVar("ansa_5").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[4]||{value:v1}).value ),
        getVar("ansa_6").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[5]||{value:v1}).value ),
        getVar("ansa_7").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[6]||{value:v1}).value ),
        getVar("ansa_8").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[7]||{value:v1}).value ),
        getVar("ansa_9").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[8]||{value:v1}).value ),
        getVar("ansa_10").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[9]||{value:v1}).value ),
        getVar("ansa_11").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[10]||{value:v1}).value ),
        getVar("ansa_12").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[11]||{value:v1}).value ),
        getVar("ansa_13").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[12]||{value:v1}).value ),
        getVar("ansa_14").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[13]||{value:v1}).value ),
        getVar("ansa_15").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[14]||{value:v1}).value ),
        getVar("ansa_16").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[15]||{value:v1}).value ),
        getVar("ansa_17").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[16]||{value:v1}).value ),
        getVar("ansa_18").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[17]||{value:v1}).value ),
        getVar("ansa_19").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[18]||{value:v1}).value ),
        getVar("ansa_20").set(v1=>(document.querySelectorAll("textarea[name^='blank']")[19]||{value:v1}).value )
    ,    
        getTimer("loop").start()    
    ).start()

So there is a text, the correct answers are loaded in the template, the participants have to fill the blank in the text, and I match them with the solution in the template and count whether the answer is correct.

I have a doubt about the timer, I have set it at 10 thinking that every 10 ms seconds the script checks whether the blank is filled, but some participants get a message to fill the blank even when it is filled, meaning it is seeing the cell as empty and it is not. I thought there was some error in the code of the text, but in the end, there is not. I think this happens when they are particularly slow. So I wondered if the timer that I have set is not ok.

I am not understanding if I should lower it (lower than 10), and it refreshes more times, or place a higher number and it considers a longer window of time?

What strategy do you suggest?

Thank you

HPI

[Jeremy]

Hi,

The more often you update the values of the Var elements, the less likely it is that participants see a message due to an outdated, empty Var element, so that reasoning would suggest to lower the value of 10. However, it’s quite unlikely that a participant would type any text and validate their answer in less than 10ms

It could be that execution is slowed down and the Timer is not actually run every 10ms but much less frequently. You could try using the javascript function window.requestAnimationFrame instead, which is optimized to execute loops:

Template("ansa_template.csv", row =>
  newTrial("ansa", 
    ...[...new Array(20)].map( (v,i) => newVar("ansa_"+Number(i+1),"").global() )
    ,
    newFunction( ()=>{
      const currentPennController = document.querySelector(".PennController-PennController");
      const checkBlanks = () => {
        document.querySelectorAll("textarea[name^='blank']")
          .forEach( (v,i) => getVar("ansa_"+Number(i+1)).set(v.value)._runPromises() );
        if (currentPennController == document.querySelector(".PennController-PennController"))
          window.requestAnimationFrame( checkBlanks );
      };
      checkBlanks();
    }).call()

Did you also double-check your tests on the Var element, and whether what the participant typed in the boxes is indeed supposed to satisfy those tests when they see the messages?

Jeremy

[Author]

Posts