Home Reference Source

scripts/experiments/estimation/estimation_timeline.js

  1. import Estimation from "/scripts/experiments/estimation/estimation.js";
  2. import {get_instructions} from "/scripts/experiment-properties/instructions/instructions_controller.js";
  3.  
  4. export var estimation_exp = new Estimation(params);
  5.  
  6. var timeline = [];
  7. var address = location.protocol + "//" + location.hostname + ":" + location.port;
  8.  
  9. // =========================================================
  10. // WELCOME TRIAL BLOCK
  11.  
  12. var welcome = {
  13. type: 'html-keyboard-response',
  14. stimulus: `<div align = "center">` + `<img src="${address}/img/VCL_lab_logo.png"></img><br><br>` +
  15. `<b>Base:</b> estimation` + '<br>' +
  16. `<b>Trial Type:</b> ${estimation_exp.trial_structure}` + '<br>' +
  17. `<b>Graph Type:</b> ${estimation_exp.graph_type}` + '<br>' +
  18. `<b>Condition:</b> ${estimation_exp.condition_name}` +
  19. '<br><br><br><p><font size = 15>Press any key to begin.<p></font>' +
  20. '</div>',
  21. data: {type: 'instruction'}
  22. };
  23. timeline.push(welcome);
  24.  
  25. // =========================================================
  26. // INSTRUCTION TRIAL BLOCKS
  27.  
  28. var ready = {
  29. type: 'html-keyboard-response',
  30. stimulus: "<div align = 'center'> <font size = 20><p>Ready? We will first do some practice trials. <p>" + "<br> <br> <p><b>Press any key to begin.</b></p></font></div>",
  31. data: {type: 'instruction'}
  32. };
  33.  
  34. var instructions = {
  35. type: "html-keyboard-response",
  36. stimulus: function(){
  37. return get_instructions(estimation_exp);
  38. }
  39. };
  40.  
  41. var instruction_trials = {
  42. timeline: [instructions, ready]
  43. };
  44.  
  45. timeline.push(instruction_trials);
  46.  
  47. // =========================================================
  48. // PRACTICE TRIAL BLOCKS
  49.  
  50. // ---------------------------------------------------------
  51. // PRACTICE TIMELINE
  52.  
  53. var practice_estimation = estimation_exp.generate_trial("practice");
  54. var trial_loop_function = function (data) {
  55. console.log("====================loop_function=======================");
  56. let last_trial = jsPsych.data.get().last(1).values()[0];
  57.  
  58. if (jsPsych.pluginAPI.convertKeyCharacterToKeyCode('q') === data.values()[0].key_press){
  59. estimation_exp.set_variables_to_experiment();
  60. console.log("Practice trials finished with key = q, set variables to experiment");
  61. return false;
  62. }
  63. else if (jsPsych.pluginAPI.convertKeyCharacterToKeyCode('space') === data.values()[0].key_press) {
  64. let num_adjustments = last_trial.adjustments.length;
  65. if (num_adjustments === 0) {
  66. window.alert("Please make adjustments before pressing space bar");
  67. // repeat previous round
  68. // if curr_round_num > 0, go back to previous round
  69. if (estimation_exp.curr_round_num !== 0) {
  70. estimation_exp.curr_round_num--;
  71. }
  72. // else go back to last round of previous condition
  73. else if (estimation_exp.curr_round_num) {
  74. estimation_exp.curr_condition_index--;
  75. estimation_exp.curr_round_num = estimation_exp.ROUNDS_PER_COND - 1;
  76. }
  77. return true;
  78. } else {
  79. if (estimation_exp.curr_condition_index === estimation_exp.curr_conditions_constants.length) {
  80. // all rounds of all sub_conditions has finished
  81. if (estimation_exp.is_practice === false) {
  82. console.log("Experiment finished");
  83. } else {
  84. console.log("Practice finished");
  85. }
  86. estimation_exp.set_variables_to_experiment();
  87. return false;
  88. } else {
  89. console.log("Continue Experiment");
  90. return true;
  91. }
  92. }
  93. } else {
  94. console.log("error estimation_timeline.js 105")
  95. }
  96. };
  97. var practice = {
  98. timeline: [practice_estimation],
  99. loop_function: trial_loop_function,
  100. on_finish: function (data) {
  101. }
  102. };
  103. timeline.push(practice);
  104.  
  105. // ---------------------------------------------------------
  106. // STOP BLOCK
  107.  
  108. var stop = {
  109. type: 'html-keyboard-response',
  110. stimulus: function() {
  111. return "<div align = 'center'> <font size = 6><p>This concludes the practice trials.<p>" +
  112. "<p><b>Any questions?</b></p></font></div>";
  113. },
  114. data: {type: 'instruction'},
  115. on_start: function(stop){
  116. // Reset background color to feedback
  117. document.body.style.backgroundColor = 'WHITE';
  118. }
  119. };
  120.  
  121. var ready_experiment = {
  122. type: 'html-keyboard-response',
  123. stimulus: "<div align = 'center'> <font size = 20><p>Ready?<p>" + "<br><br><p><b>Press any key to begin.</b></p></font></div>",
  124. data: {type: 'instruction'}
  125. };
  126.  
  127. var stop_trials = {
  128. timeline: [stop, ready_experiment]
  129. };
  130.  
  131. timeline.push(stop_trials);
  132.  
  133.  
  134. // =========================================================
  135. // EXPERIMENT TRIAL BLOCKS
  136.  
  137. var trial = estimation_exp.generate_trial("test");
  138. var experiment = {
  139. timeline: [trial],
  140. loop_function: trial_loop_function,
  141. on_start: function (data) {
  142. console.log("Should only be excuted before all experiments");
  143. }
  144. };
  145.  
  146. timeline.push(experiment);
  147.  
  148. console.log("======================");
  149.  
  150. // =========================================================
  151. // DATA DOWNLOADING
  152.  
  153. var experiment_end = {
  154. type: 'html-keyboard-response',
  155. stimulus: '<div align = "center">' +
  156. '<p><font size = 10>You have completed the experiment!<p></font>' +
  157. '<br>' +
  158. 'Trial and summary data files will now automatically download locally.' +
  159. '</div>' ,
  160. on_start: function(){
  161. estimation_exp.export_trial_data();
  162. // Reset background color to feedback
  163. document.body.style.backgroundColor = 'WHITE';
  164. }
  165. };
  166. timeline.push(experiment_end);
  167.  
  168. // =========================================================
  169. // START JSPSYCH
  170.  
  171. jsPsych.init({
  172. timeline: timeline,
  173. on_finish: function(){
  174. jsPsych.data.displayData();
  175. }
  176. });