I'm very new to using JsPsych and I'm trying to create a very simple math quiz task as practice. I intend to have random math questions as the prompt, and then after 10 correct answers, the task should end. I have made code that successfully selects random math problems from a list and successfully loops. I am unsure exactly where the error is, but it could be
- where I define correct answers
- where I count correct answers
- where I loop the questions
My code is below, please let me know if I can clarify anything. Thank you in advance! Edit: I'm adding another attempt with different code but same issue
<!DOCTYPE html>
<html>
<head> <!-- all preloads go into head -->
<title>Math Quiz</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-->
<script>
var jsPsych = initJsPsych();
var timeline = [];
// create a randomly selected math problem prompt and define correct answer
var test = {
type: jsPsychSurveyText,
questions: [
{
prompt: function() {
var MathQuest = [
'2+2', '3+7', 'How many weeks in a year?'
];
var mathProblems = jsPsych.randomization.sampleWithReplacement(MathQuest, 1)[0];
return mathProblems;
},
name: 'resp',
}
],
post_trial_gap: 500,
on_finish: function(data) {
var correctResponses = {
'2+2' : '4',
'3+7' : '10',
'How many weeks in a year?' : '52'
};
var response = data.response;
if (correctResponses[data.prompt] === response) {
data.correct = true;
} else {
data.correct = false;
}
}
}; // end test trial
// Create a loop node for the test with accuracy criteria:
var correctCount = 0; // Counter for correct responses
var loopNode = {
timeline: [test],
loop_function: function(data) {
// Check if the loop should continue based on the number of correct responses
if (correctCount < 10) {
if (data.values()[0].correct) {
correctCount++;
}
return true; // Continue the loop
} else {
return false; // End the loop
}
console.log("Correct Count: " + correctCount);
},
};
jsPsych.run([loopNode]);
</script>
</body>
</html>
2nd attempt:
<!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-->
<script>
var jsPsych = initJsPsych();
var timeline = [];
var mathQuestions = [
{math: '2+2 = ?', correct: '4'},
{math: '2x3 = ?', correct: '6'},
{math: '5x7 = ?', correct: '35'}
];
var test = {
type: jsPsychSurveyText,
questions: [
{
prompt: jsPsych.timelineVariable('math'),
name: 'resp'
}
],
on_finish: function(data) {
data.correct=jsPsych.timelineVariable('correct');
var acc = 0;
var response = data.response.resp;
if (response == data.correct){
acc++;
}
}
};
var mathQuestionProcedure = {
timeline: [test],
timeline_variables: mathQuestions,
loop_function: function(data) {
if (acc < 2) {
return true; //go to criteria
} else {
return false; //end loop
}
}
}
timeline.push(mathQuestionProcedure);
jsPsych.run([mathQuestionProcedure])
</script>
</body>
</html>
The second attempt looks closer to me. I think the problem is that you initialized
var acc = 0inside theon_finishfunction, so it is scoped to that function. If you addvar acc = 0before you create thetestobject and remove it from the function, that will make it a global variable and might fix the problem.