Adding dynamic text to entirety of experiment #3135

mbeasle2 · 2023-09-26T20:55:01Z

mbeasle2
Sep 26, 2023

I want to add a score to my experiment that should be present throughout the entire experiment. I originally tried adding <div id="acc-display">Correct Responses: 0</div> to the body above the script section just to see if I could get my text to display. It displays the text really fast before the first trial starts, but then it disappears. Eventually I would like it to be dynamic so that the '0' updates to the person's score, which I have as a variable, acc. I have a chunk of code commented out for this purpose. My code is below for reference. Thank you!

<!DOCTYPE html>
<html>
  <head> <!-- all preloads go into head -->
    <title>Math Quiz Take 2</title>
    <!-- any plugins go here-->
    <script src="jspsych/dist/jspsych.js"></script>
    <script src = "jspsych/dist/plugin-survey-text.js"></script>
    <link href="jspsych/dist/jspsych.css" rel="stylesheet" type="text/css" />
  </head>
  <body> <!-- all script for tasks go into body-->

    <div id="acc-display">Correct Responses: 0</div>

    <script> 

var jsPsych = initJsPsych({
  display_element: 'acc-display'
});

var timeline = [];

//create math problems with correct answers
var mathQuestions = [
  {math: '2+2 = ?', correct: '4'},
  {math: '2x3 = ?', correct: '6'},
  {math: '5x7 = ?', correct: '35'}
];

var acc = 0; // make accuracy counter

// 
function updateDynamicText() {
  document.getElementById('dynamic-text').textContent = acc;
} // a function that updates the score count
//

var test = {
  type: jsPsychSurveyText,
  questions: [
    {
      prompt: jsPsych.timelineVariable('math'), //use math problems
      name: 'resp' 
    }
  ],
        on_finish: function(data) {
			      data.correct=jsPsych.timelineVariable('correct', true); // assign correct answers 

                  var response = data.response.resp; // check participant response
            if (response == data.correct){ // if correct, add one to accuracy counter
                acc++;
            };
          }
};


var mathQuestionProcedure = {
  timeline: [test], // loop the trial
  timeline_variables: mathQuestions,
  sample: {
    type: 'with-replacement',
    size: 1
  },
  loop_function: function(data) {
    if (acc < 2) {
            return true; // keep going to accuracy criteria
        } else {
            return false; // end loop
        }
  }
}

timeline.push(mathQuestionProcedure);

jsPsych.run(timeline)

</script>
</body>
</html>

ChristopheBossens · 2023-10-02T09:33:37Z

ChristopheBossens
Oct 2, 2023

Hi,
You are setting the display element that you use for showing score as the display element that jsPsych uses as well, and they will therefore overwrite. The structure of your HTML should be as follows:

<body> 

    <div id="acc-display">Correct Responses: 0</div>
    <div id="jspsych-display"></div>
    
</body>

To set up jsPsych, use:

var jsPsych = initJsPsych({
  display_element: "jspsych-display"
});

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Adding dynamic text to entirety of experiment #3135

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Adding dynamic text to entirety of experiment #3135

Uh oh!

Uh oh!

mbeasle2 Sep 26, 2023

Replies: 1 comment

Uh oh!

ChristopheBossens Oct 2, 2023

mbeasle2
Sep 26, 2023

ChristopheBossens
Oct 2, 2023