Hello, I’m currently working on an n-back task (both 2 and 3 back). For practice trials, I want there to be feedback, that displays when the participant correctly/incorrectly identifies a match.
When clicking preview question/block, everything works as intended. However, when I preview the entire survey (multiple trials are shown after each other), only the first practice trial shows the right feedback. The other blocks are able to identify correct matches and responds to input, but it will only briefly flash “Correct” before switching to “Incorrect”. It does not matter if there are other, not practice trials in-between, the issue always occurs. I assume something is carrying over to the next question, but I’m not sure how to fix that, since I don’t have much experience coding (this is also why my code is pretty messy and probably not correctly implemented...):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>N-Back Task</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#stimulusDisplay {
font-size: 12em; /* Adjust the font size as needed */
text-align: center; /* Center the text horizontally */
margin-top: 30vh; /* Move the text vertically to the center */
padding-bottom: 20px; /* Add padding to the bottom to prevent cutting off */
}.feedback {
position: absolute;
top: calc(30vh + 20px); /* 30vh + 20px margin-top */
left: 20px;
font-size: 1.5em;
}.correct {
color: green;
}.incorrect {
color: red;
}#endScreen {
text-align: left;
display: none;
margin-top: 30vh;
}#finishPracticeButton {
padding: 10px 20px;
text-align: left;
font-size: 1em;
margin-top: 50px; /* Increased margin-top */
}
</style>
</head>
<body>
<div id="instructions">
<h2>N-Back Task</h2>
<p><b> Please read the instructions carefully! </b> <br> In the following task, you will be presented with a sequence of letters. You will only see one letter at a time, so try to remember the previous ones as best as possible. Press 'm' on your keyboard if the current letter is the same as the letter presented <b>2 steps before</b>. <br><br> Here is an example: <br> <b>A B X C X </b><br> <br>In this case, you would have to press 'm' on the second appearance of the letter 'X'. You can now practice this task once. If a letter flashes, it means it is shown for a second time. These letters still count towards the sequence. It is also possible, that there is no match in a trial. Do not be alarmed by this. <br> Please note that in the real experiment, you will not be able to see if your answer was correct. </p>
<button id="startButton">Start Practice</button>
</div>
<div id="task" style="display: none;">
<div id="stimulusDisplay"></div>
<div id="feedback" class="feedback"></div>
</div>
<div id="endScreen">
<p>This was the practice trial. From now on, there will be no more feedback.<p>
<button id="finishPracticeButton">Finish Practice</button>
</div><script>
$(document).ready(function() {
var sequence = "ABCBDEDABCBDEDABACDC"; // Predetermined sequence
var currentIndex = 0;
var n = 2; // N-back level
var totalMatches = 0;
var correctHits = 0;
var incorrectHits = 0;
var startTime;
var timer;
$('#startButton').click(function() {
$('#instructions').hide();
$('#task').show();
startTask();
});
function startTask() {
displayStimulus();
timer = setInterval(checkMatch, 1500); // Check for matches every 1.5 seconds
}
function displayStimulus() {
$('#stimulusDisplay').text(sequence[currentIndex]);
animateStimulus();
}
function animateStimulus() {
startTime = performance.now();
var element = document.getElementById("stimulusDisplay");
element.animate([
{ opacity: 0.7 }, // Fade out
{ opacity: 1 } // Fade in
], {
duration: 1500, // stimulus duration
fill: 'forwards' // Keeps the element in its final state
}).onfinish = function() {
nextTrial();
};
}
function isMatch() {
var correctIndex = currentIndex - n;
var correctLetter = sequence[correctIndex];
var currentLetter = sequence[currentIndex];
if (currentLetter === correctLetter) {
return true;
}
return false;
}function checkMatch() {
if (isMatch()) {
totalMatches++;
}
}
function checkResponse() {
var currentLetter = sequence[currentIndex];
if (isMatch()) {
correctHits++;
showFeedback("Correct", true);
} else {
setTimeout(function() {
if (sequence[currentIndex] === currentLetter) {
incorrectHits++;
showFeedback("Incorrect", false);
}
}, 100); // Grace period of 100 ms before counting as an incorrect hit
}
}
function showFeedback(message, isCorrect) {
var feedbackElement = $('#feedback');
feedbackElement.text(message);
if (isCorrect) {
feedbackElement.addClass('correct');
} else {
feedbackElement.addClass('incorrect');
}
setTimeout(function() {
feedbackElement.text('');
feedbackElement.removeClass('correct incorrect');
}, 750); // Feedback disappears after 750 ms
}
function nextTrial() {
currentIndex++;
if (currentIndex < sequence.length) {
displayStimulus();
} else {
// End of practice trial
clearInterval(timer); // Stop the timer
$('#task').hide();
$('#endScreen').show();
}
}
$(document).keydown(function(event) {
if ($('#task').is(':visible')) {
if (event.key === "m") {
checkResponse();
}
}
});
$('#finishPracticeButton').click(function() {
// Trigger next question block
Qualtrics.SurveyEngine.navClick(event, 'NextButton');
});
});
</script>
</body>
</html>
