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

11
examples/jspsych-cloze.html
View File

@ -3,7 +3,7 @@
<head>
<script src="../packages/jspsych/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>
<body></body>
<script>
@ -22,6 +22,14 @@
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)
timeline.push({
type: jsPsychCloze,
@ -32,6 +40,5 @@
});
jsPsych.run(timeline);
</script>
</html>

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

@ -21,7 +21,13 @@ const info = <const>{
pretty_name: "Check answers",
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: {
type: ParameterType.FUNCTION,
pretty_name: "Mistake function",
@ -47,6 +53,7 @@ class ClozePlugin implements JsPsychPlugin<Info> {
trial(display_element: HTMLElement, trial: TrialType<Info>) {
var html = '<div class="cloze">';
// odd elements are text, even elements are the blanks
var elements = trial.text.split("%");
const solutions = this.getSolutions(trial.text);
@ -59,13 +66,15 @@ class ClozePlugin implements JsPsychPlugin<Info> {
solution_counter++;
}
}
html += "</div>";
display_element.innerHTML = html;
const check = () => {
var answers = [];
var answers: String[] = [];
var answers_correct = true;
var answers_filled = true;
for (var i = 0; i < solutions.length; i++) {
var field = document.getElementById("input" + i) as HTMLInputElement;
@ -79,18 +88,33 @@ class ClozePlugin implements JsPsychPlugin<Info> {
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 = {
response: answers,
};
display_element.innerHTML = "";
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 +=