Forum Replies Created
-
Posts
-
Basically, what I mean is: I cannot use the logic from the previous code on this one. In this code, I have a list of words separated by _ in a single row in a column called ‘Words’. The words are slipt into 10 chunks each. I’d like to highlight the single words by the keypress on the spacebar, but I cannot do it. I’d like to make the highlighted word appear and when the word in the tenth in the column, move on to the next one.
Hi, @Jeremy ,
I’m trying to adapt this code following the same rationale, but I’m struggling with that, I cannot display 10 words and make the highlight isolate single words.newText("words", row.Words.split('_').slice(0,10).join("<br>")) // use slice to get the 10 first words .cssContainer({ 'line-height': '1.5', padding: '0.5em', // 0.5 'text-align': 'center', "justify-content": 'center', "align-items": 'center' , 'font-size': '50px', 'font-family': 'Arial' }) .print() , newVar("listOfWords", ""), // we'll set this Var element to the next list of words newVar("nextWordStartsAt").set(10) // this is the index where the next 10 words start , newKey("NEXT", " ") .callback( // first make sure that the index is within bounds getVar("nextWordStartsAt").test.is(v=>v<row.Words.split('_').length).success( // set listOfWords to the next words getVar("listOfWords") .set(getVar("nextWordStartsAt")) // first look up the index .set(v=>row.Words.split('_').slice(v,v+10).join("<br>")) // then use the index+slice to get the next 10 words , getText("words").text( getVar("listOfWords") ) // update the content of the Text element , getVar("nextWordStartsAt").set(v=>v+10) // the next list of 10 words starts 10 words further ) )UPDATE:
It worked like this:
, newVar("hi--text").set(getVar("fantasy--name")).set(v=>`Olá, ${v} !😄`) // create new var to show text. , newText("welcome--fantasy--name--msg").text( getVar("hi--text") ) // show text. .cssContainer({ "font-size": "60px", 'color':'white', "background-image": "linear-gradient(to top left, #0099CC, #66CCFF)", "border-radius": "25px"})Is this the best way to do it, tho?
getAudio('keyPressAudio').play().wait('first')<- this seems to work, but I don’t think that’s the best way to do it, right?Hi, @Jeremy ! What is the best way to get the same effect (play the click sound when a button is clicked) using a selector? Like this:
I tried to use a .callback as well, but it didn’t work…With the code below, sometimes it works, sometimes it doesn’t (the audio is just an effect of a click)
newImage("mainImage", row.image) .css({ "display": "block", "position": "fixed", "top": "35vh", // 50% of the viewport height "left": '50%', // Use 50% for horizontal centering and 15% and 85% left/right "transform": "translate(-50%, -50%)", // "width": "25em", // Replace with the desired width of the image in em units // "height": "25em", // Replace with the desired height of the image in em units "z-index": "9999", // To make sure the image is on top of other elements }) .print() , newAudio('keyPressAudio', "keyPress1.mp3") , newSelector("position") , newCanvas("buttons",1180,100) .add("center at 10%", "bottom at 100%", newButton("btn--1", "1").selector("position")) .add("center at 30%", "bottom at 100%", newButton("btn--2", "2").selector("position")) .add("center at 50%", "bottom at 100%", newButton("btn--3", "3").selector("position")) .add("center at 70%", "bottom at 100%", newButton("btn--4", "4").selector("position")) .add("center at 90%", "bottom at 100%", newButton("btn--5", "5").selector("position")) .css({ "top": "40vh" }) .center() .print() , getSelector("position") .once() .wait() .log() , getAudio('keyPressAudio').play() ) // .log("item", row.imageAudio) .log('image', row.image) .log("correctKey", row.correctKey) );@Jeremy, If I include an audio effect, will I bias the reaction time and the time out ? Like this:
does it influence the rt and the timeout?
... newAudio('keyPressAudio', "keyPress1.mp3") , newKey("answerKey","SK") .log("all") .callback( getTimer("timeout").stop(), // the key stops the time getAudio('keyPressAudio').play()) ////////////////// <--------------------- HERE , getTimer("timeout").wait() // wait for the timeout to finish (no keypress, the time isn't stoped) ??? , getImage('stimuli').remove() , // Check for the correct key press or timeout getKey("answerKey") .test.pressed(row.correctKey) // check keys .success( // Display "Correct" message and wait for positive feedback timer newText("Correct ✅").center().print(), newTimer('wait-positive-feedback', 500).start().wait() ) .failure( // Check for timeout before displaying "Incorrect" message getKey("answerKey").disable().test.pressed() .failure( // Display "Timeout" message and wait for feedback timer getVar('errorCount').set(v=> v+1), newText("Timeout ⏰").center().print(), newTimer('wait-feedback', 500).start().wait() ) .success( // Display "Incorrect" message and wait for negative feedback timer getVar('errorCount').set(v=> v+1), newText("Incorrect ❌").center().print(), newTimer('wait-neg-feedback', 500).start().wait() ) )Thanks for the quick response!! So, the logic is:
.success: ✅ : if the eow.correctKey was pressed
timeout ⏰: if NO KEY was pressed
error message ❌: if a key != from row.correctKey (already evaluated before) was pressed. Right?getKey("answerKey") // Check for the correct key press or timeout .test.pressed(row.correctKey) // check keys (options are K and S) .success( newText("Correct ✅").center().print(), // Display "Correct" message newTimer('wait-positive-feedback', 500).start().wait() // Wait for positive feedback timer ) .failure( getKey("answerKey").disable().test.pressed() // => IF ANY KEY WAS PRESSED Was pressed, then display the timeout .failure( // Display "Timeout" message and wait for feedback timer newText("Timeout ⏰").center().print(), newTimer('wait-feedback', 500).start().wait() ) .success( // IF A KEY != FROM row.correctKey was pressed, then display the INCORRECT newText("Incorrect ❌").center().print(), // display negative feedback newTimer('wait-neg-feedback', 500).start().wait() // Wait for negative feedback timer ) ) )Hi,Jeremy! Thank you for this detailed answer, I REALLY appreciate it! Now I got it! So, I can say that the
.stop()command makes the.wait()understand that the time has finished without waiting for the whol 5s, right? Now I got it! What about the feedback in the previous trial:It should be: “If user presses the correctKey, show the ✅; if he/she presses the wrong key, ❌; in case of a timwout (5 seconds), show the timeout message ⏰
Is this the correct syntax? It seems to be working just fine, but I’m not 100% sure
getKey("answerKey") // Check for the correct key press or timeout .test.pressed(row.correctKey) // check keys (options are K and S) .success( newText("Correct ✅").center().print(), // Display "Correct" message newTimer('wait-positive-feedback', 500).start().wait() // Wait for positive feedback timer ) .failure( getKey("answerKey").disable().test.pressed("K", "S") // IF NEITHER K OR S was pressed, then display the timeout .failure( // Display "Timeout" message and wait for feedback timer newText("Timeout ⏰").center().print(), newTimer('wait-feedback', 500).start().wait() ) .success( // IF EITHER K OR S was pressed, then display the INCORRECT ANSWER IF IT DOENSN'T MATCH THE row.correctKey key newText("Incorrect ❌").center().print(), // display negative feedback newTimer('wait-neg-feedback', 500).start().wait() // Wait for negative feedback timer ) ) )update: @Jeremy, I saw your answer here: https://www.pcibex.net/forums/topic/translation-for-the-explanatory-messages-of-eye-tracking-module/#post-7272 And I guess I was able to update the message in the PennController.js in the Modules folder! I changed the message there, is that a problem?
Hi, @Jeremy! It’s not working, I can only change the text above the message, but not the message itself. How do I do that?
Hi, @Jeremy ! I could fiz the previous issue, I wasn’t adding a .wait(). However, the
getTEXT()bellow do not show to be working: https://farm.pcibex.net/r/QIOhcO/Note: they are working in another experiment just fine, I don’t know why they aren’t here:
// 👉 Instructions trial newTrial("instructions", defaultText .center() .print() , newCanvas("my-canvas", 950,625) //950, 625 .add(180,160, getText("welcome-researcher-msg")) .add(150,210, getText("type-ID-msg")) .add(225,240, getTextInput("inputID")) .add(320,320, getButton("wait")) .add(270,350, getText("failure")) .cssContainer({ "padding": "1,5em", "background-color": '#FFFCF1', "border-radius": '25px', "border": '2px solid #73AD21' }) .center() .print() , newText("welcome-researcher-msg", "Welcome, researcher!") .cssContainer({ // "border": "5px solid black", // "background-color": "yellow", // "color": "black", "font-size":"50px", "white-space":"nowrap" }) , newText("type-ID-msg", "<br>Please, type <b style=color:red;>your participant's ID</b> below and click on 'START EXPERIMENT'.</br>") , newTextInput("inputID", "") .center() .cssContainer({ "margin":"2em", // Add a em margin around this element "height":"35px", "border":"#FFFCF1", "border-radius": "4px", }) .print() , newButton("wait","START EXPERIMENT 👉") .cssContainer({ "border": "none", "font-size": "40px", "padding": "0.5rem 1rem", "border-radius": "0.7rem", // "color": "white", "background-color": "green", "cursor": "pointer", }) .center() .print() // Only validate a click on Start when inputID has been filled .wait( getTextInput("inputID").testNot.text("") .failure(newText("failure", "Please, type your participant's ID above 👆") .cssContainer({ "margin-top": "1em", "color": "red"}) .center() .print() )) , // Store the text from inputID into the Var element getVar("ID").set( getTextInput("inputID") ) ); the texts are appearing below the canvas, I don't know why..Why is that?Hi, @Jeremy! It’s working properly, thank you VERY much, as always!
See, why can I set any trial before the logic? For example, I’m trying to add a button to make it fo fullscreen, but nothing happens before the logic ?
Sequence( "fullscreen", // Lengths go from 1 through 6 \\ 1 to 9 -> zero based = 0-8 (?) ...[...Array(9)].map((v,i)=>randomize("sequence-"+parseInt(i+1))) , "end" ); newTrial('fullscreen', newButton("wait","openFull") .center() .print() , fullscreen() );