tasks/screen-check/experiment.html

<!DOCTYPE html>
<html>
<head>
  <title>Screen Check</title>

  <!-- Load libraries -->
  <script src="https://unpkg.com/jspsych@7.3.3"></script>

  <!-- Load jsPsych plug-ins -->
  <script src="./plugin-screen-check.js"></script>

  <!-- Load CSS styles -->
  <link href="https://unpkg.com/jspsych@7.3.3/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
<script>

  // Query URL
  const urlParams = new URLSearchParams(window.location.search);
  const min_width = urlParams.get('min_width') || 12000;
  const min_height = urlParams.get('min_height') || 8000;

  // Define screen check
  var screen_check = {
    type: jsPsychScreenCheck,
    min_width: min_width,
    min_height: min_height
  }

  // Initialize timeline.
  var timeline = [screen_check];

  // Initialize jsPsych.
  var jsPsych = initJsPsych({
    on_finish: function() {

      // Add interactions to the data variable
      var interaction_data = jsPsych.data.getInteractionData();
      jsPsych.data.get().addToLast({interactions: interaction_data.json()});

      // Display jsPsych data in viewport.
      jsPsych.data.displayData();

    }
  });

  // Execute timeline.
  jsPsych.run(timeline);

</script>
</html>