I have written a simple script in jsPsych that welcomes the user to the page, then thanks them for their participation after they press any key. However, it does not load the CSS styling associated with the page. The style sheet is at the appropriate location, and there are no errors or warnings generated.
The entirety of the code is below:
<!DOCTYPE html>
><html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jsPsych/jspsych.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-image-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-survey-text.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="jsPsych/css/jspsych.css" rel="stylesheet" type="text/css"/>
</head>
<body>
</body>
<script>
var timeline = []
var welcome = {type: "html-keyboard-response",
stimulus: "Welcome to the experiment, and thank you for your time! Press any key to continue."
};
timeline.push(welcome)
jsPsych.init({
timeline: timeline,
on_finish: function() {
$.ajax({
type: "POST",
url: "/experiment-data",
data: jsPsych.data.get().json(),
contentType: "application/json"
})
.done(function() {
alert("Thank you!")
window.location.href = "/";
})
.fail(function() {
alert("A problem occurred while writing to the database. Please contact the researcher for more information.")
window.location.href = "/";
})
}
})
</script>
</html>
