Update index.html

ucsd-psych201a · Nov 8, 2024 · 3c88cec · 3c88cec
1 parent 7f4064d
commit 3c88cec
Showing 1 changed file with 41 additions and 13 deletions.
diff --git a/website/index.html b/website/index.html
@@ -9,6 +9,16 @@
    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
    <script src="https://unpkg.com/@jspsych-contrib/plugin-pipe"></script>
+   <style>
+       /* Global style for text wrapping */
+       .wrap-text {
+           max-width: 600px; /* Adjust width as needed */
+           margin: 0 auto;
+           line-height: 1.5;
+           white-space: normal;
+           text-align: left;
+       }
+   </style>
  </head>
  <body> </body>
  <script>
@@ -141,35 +151,50 @@
   // Prize explanation and charity details
 var prizeExplanation = {
    type: jsPsychHtmlKeyboardResponse,
-   stimulus: "<p>Thank you for completing the survey on your lifestyle.</p><p>Please note 20% of participants will be randomly selected to receive an additional 8 USD as a bonus prize. If you are selected, you will have the option to donate some or all of this bonus to a charitable cause, or to keep the full amount. This selection is completely random, and everyone has an equal chance of winning the bonus prize.</p><p>Press any key to continue.</p>"
+   stimulus: "
+    <p>Thank you for completing the survey on your lifestyle.</p>
+    <p>Please note 20% of participants will be randomly selected to receive an additional 8 USD as a bonus prize. If you are selected, you will have the option to donate some or all of this bonus to a charitable cause, or to keep the full amount. This selection is completely random, and everyone has an equal chance of winning the bonus prize.</p>
+ "
 };
 
-var overheadInformation = {
-   type: jsPsychHtmlKeyboardResponse,
-   stimulus: "<p>Charitable organizations use donated money in two ways: (1) helping the cause and (2) covering the organization’s operations (i.e., overhead costs). Some charities separate donations for the cause and for overhead expenses.</p><p>Press any key to continue.</p>"
+   // Comprehension check 1
+var comprehensionCheck1 = {
+   type: jsPsychSurveyMultiChoice,
+   questions: [
+      {prompt: "What is the chance you will receive an additional 8 USD with the option to donate?", options: ["50%", "20%", "10%"], required: true},
+   ]
 };
 
-var charityDescription = {
+var overheadInformation = {
    type: jsPsychHtmlKeyboardResponse,
-   stimulus: "<p>Today, you’ll have the opportunity to support a campaign aiding children born with disabilities in Asia, run by a trustworthy charity.</p><p>Press any key to continue.</p>"
+   stimulus: "
+    <p>Charitable organizations use donated money in two ways: (1) helping the cause and (2) covering the organization’s operations (i.e., overhead costs). Some charities separate donations for the cause and for overhead expenses.</p>
+ "
 };
 
- // Comprehension checks
-var comprehensionCheck = {
+ // Comprehension check 2
+var comprehensionCheck2 = {
    type: jsPsychSurveyMultiChoice,
    questions: [
-      {prompt: "What is the chance you will receive an additional 8 USD with the option to donate?", options: ["50%", "20%", "10%"], required: true},
-      {prompt: "How do charities use their donations?", options: ["To support an advertised cause", "To maintain their necessary expenses", "All of the above", "None of the above"], required: true}
+       {prompt: "How do charities use their donations?", options: ["To support an advertised cause", "To maintain their necessary expenses", "All of the above", "None of the above"], required: true}
    ]
 };
+
+var charityDescription = {
+   type: jsPsychHtmlKeyboardResponse,
+   stimulus: "
+    <p>Today, you’ll have the opportunity to support a campaign aiding children born with disabilities in Asia, run by a trustworthy charity.</p>
+    <p>Press any key to continue.</p>
+ "
+};
 
  // Instructions
  var instructions = {
    type:  jsPsychHtmlKeyboardResponse,
    stimulus: `
       <p>Please indicate how much money you would donate to the charity, and for what specific purpose.</p>
       <p>You can only donate a total that is equal to or less than 8 USD.</p>
-      <p>Press any key to begin.</p>
+      <p>Press any key to continue.</p>
    `
  };
 
@@ -301,7 +326,10 @@
   // End of survey
 var endSurvey = {
    type: jsPsychHtmlKeyboardResponse,
-   stimulus: "<p>Thank you for your participation in this study. If you are selected to receive a prize, we will contact you by the end of December.</p>"
+   stimulus: "
+    <p>Thank you for your participation in this study. If you are selected to receive a prize, we will contact you by the end of December.</p>
+    <p>Press any key to continue.</p>
+  "
 };
 
  const save_data = {
@@ -314,7 +342,7 @@
 
  // Add trials to the timeline
  timeline.push(welcome);
- timeline.push(prizeExplanation, charityDescription, comprehensionCheck);
+ timeline.push(prizeExplanation, comprehensionCheck1, charityDescription, comprehensionCheck2);
  timeline.push(instructions);
  timeline.push(donationTrial); // Using custom donation trial
  timeline.push(satisfaction);