HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added checking for blank fields in cloze

Browse Source
This commit is contained in:
jadeddelta 2022-09-22 13:01:48 -04:00
parent 7914502eaf
commit c17572b5ff
2 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
examples/jspsych-cloze.html
View File

@ -3,7 +3,7 @@
<head> <head>
<script src="../packages/jspsych/dist/index.browser.js"></script> <script src="../packages/jspsych/dist/index.browser.js"></script>
<script src="../packages/plugin-cloze/dist/index.browser.js"></script> <script src="../packages/plugin-cloze/dist/index.browser.js"></script>
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css"> <link rel="stylesheet" href="../packages/jspsych/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>
@ -22,6 +22,14 @@
text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.' text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.'
}); });
// another example with checking if all the blanks are filled in
timeline.push({
type: jsPsychCloze,
text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.',
check_blanks: true,
mistake_fn: function () { alert("You have not filled in all the blanks!"); }
});
// more elaborate example (with check against correct solution, custom error handling and modified button text) // more elaborate example (with check against correct solution, custom error handling and modified button text)
timeline.push({ timeline.push({
type: jsPsychCloze, type: jsPsychCloze,
@ -32,6 +40,5 @@
}); });
jsPsych.run(timeline); jsPsych.run(timeline);
</script> </script>
</html> </html>

34
packages/plugin-cloze/src/index.ts
View File

@ -21,7 +21,13 @@ const info = <const>{
pretty_name: "Check answers", pretty_name: "Check answers",
default: false, default: false,
}, },
/** Function called if check_answers is set to TRUE and there is a difference between the participants answers and the correct solution provided in the text. */ /** Boolean value indicating if the answers given by participants should be checked for completeness after the button is clicked in order to move on. */
check_blanks: {
type: ParameterType.BOOL,
pretty_name: "Check blanks",
default: false,
},
/** Function called if either the check_answers or check_blanks is set to TRUE and there is a discrepancy between the set answers and the answers provide or if all blanks aren't filled out, respectively. */
mistake_fn: { mistake_fn: {
type: ParameterType.FUNCTION, type: ParameterType.FUNCTION,
pretty_name: "Mistake function", pretty_name: "Mistake function",
@ -47,6 +53,7 @@ class ClozePlugin implements JsPsychPlugin<Info> {
trial(display_element: HTMLElement, trial: TrialType<Info>) { trial(display_element: HTMLElement, trial: TrialType<Info>) {
var html = '<div class="cloze">'; var html = '<div class="cloze">';
// odd elements are text, even elements are the blanks
var elements = trial.text.split("%"); var elements = trial.text.split("%");
const solutions = this.getSolutions(trial.text); const solutions = this.getSolutions(trial.text);
@ -59,13 +66,15 @@ class ClozePlugin implements JsPsychPlugin<Info> {
solution_counter++; solution_counter++;
} }
} }
html += "</div>"; html += "</div>";
display_element.innerHTML = html; display_element.innerHTML = html;
const check = () => { const check = () => {
var answers = []; var answers: String[] = [];
var answers_correct = true; var answers_correct = true;
var answers_filled = true;
for (var i = 0; i < solutions.length; i++) { for (var i = 0; i < solutions.length; i++) {
var field = document.getElementById("input" + i) as HTMLInputElement; var field = document.getElementById("input" + i) as HTMLInputElement;
@ -79,18 +88,33 @@ class ClozePlugin implements JsPsychPlugin<Info> {
field.style.color = "black"; field.style.color = "black";
} }
} }
if (trial.check_blanks) {
if (answers[i].trim() === "") {
answers_filled = false;
}
}
} }
if (!trial.check_answers || (trial.check_answers && answers_correct)) { if ((trial.check_answers && !answers_correct)||(trial.check_blanks && !answers_filled)) {
trial.mistake_fn();
} else {
var trial_data = { var trial_data = {
response: answers, response: answers,
}; };
display_element.innerHTML = ""; display_element.innerHTML = "";
this.jsPsych.finishTrial(trial_data); this.jsPsych.finishTrial(trial_data);
} else {
trial.mistake_fn();
} }
// if (!trial.check_answers || (trial.check_answers && answers_correct)) {
// var trial_data = {
// response: answers,
// };
// display_element.innerHTML = "";
// this.jsPsych.finishTrial(trial_data);
// } else {
// trial.mistake_fn();
// }
}; };
display_element.innerHTML += display_element.innerHTML +=