Survey Site

https://github.com/Nathan127/surveysite

by nathan127

HTML

<script src="index.js" charset="utf-8" defer></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<table border="1" cellpadding="1" cellspacing="1" style="width:1490px;">
  <tbody>
    <tr>
      <!-- Create blank images. Give them set Names and IDs for javascript to use-->
      <td style="text-align: center;"><img onmouseup="this.src=''" onmousedown="this.src=''" src="" name="quadOne" style="width: 600px; height: 187px;" id="quad1ID" /><br />
        <b><h4 id="quad1desc"></h4></b></td>

      <td style="text-align: center;"><img onmouseup="this.src=''" onmousedown="this.src=''" src="" name="quadTwo" style="width: 600px; height: 187px;" id="quad2ID" /><br />
        <strong><h4 id="quad2desc"></h4></strong></td>
    </tr>

    <tr>
      <td style="text-align: center;"><img onmouseup="this.src=''" onmousedown="this.src=''" src="" name="quadThree" style="width: 600px; height: 187px;" id="quad3ID" /><br />
        <strong><h4 id="quad3desc"></h4></strong></td>

      <td style="text-align: center;"><img onmouseup="this.src=''" onmousedown="this.src=''" src="" name="quadFour" style="width: 600px; height: 187px;" id="quad4ID" /><br />
        <strong><h4 id="quad4desc"></h4></strong>
    </tr>
  </tbody>
</table>

<div>COUNT/TIME</div>
Chocolate:
<h4 id="chocolatePic_count"></h4>/
<h4 id="chocolatePic_time"></h4>
Honey Roasted:
<h4 id="honeyRoastedPic_count"></h4>/
<h4 id="honeyRoastedPic_time"></h4>
Almond:
<h4 id="almondPic_count"></h4>/
<h4 id="almondPic_time"></h4>
Blueberry:
<h4 id="blueberryPic_count"></h4>/
<h4 id="blueberryPic_time"></h4>

JavaScript

//Initialize Qualtrics counters
var chocolatePic_count = 0;
var honeyRoastedPic_count = 0;
var almondPic_count = 0;
var blueberryPic_count = 0;

//Initialize Qualtrics timers
var chocolatePic_time = 0;
var honeyRoastedPic_time = 0;
var almondPic_time = 0;
var blueberryPic_time = 0;

//Initialize quadrant counters
var quad1_count = 0;
var quad2_count = 0;
var quad3_count = 0;
var quad4_count = 0;

//Initialize quadrant timers
var quad1_time = 0;
var quad2_time = 0;
var quad3_time = 0;
var quad4_time = 0;

//Initialize quadrant bools for timers
var quad1Bool = 0
var quad2Bool = 0
var quad3Bool = 0
var quad4Bool = 0

var interval = 20; //# of milliseconds per interval

//Declare URL for letting go of click
//https://imgur.com/a/ztSBk
var chocolateURL_up = "https://imgur.com/f1I9hI3.png";
var honeyRoastedURL_up = "https://i.imgur.com/jFbQO0f.png";
var almondURL_up = "https://i.imgur.com/VwrZ3ey.png";
var blueberryURL_up = "https://imgur.com/DOVOJlH.png";

//Declare URLS for clicking
var chocolateURL_down = "https://imgur.com/0C49Ji0.png";
var honeyRoastedURL_down = "https://imgur.com/OYRU2u8.png";
var almondURL_down = "https://imgur.com/ZQn0GLw.png";
var blueberryURL_down = "https://i.imgur.com/8TJ7KQP.png";

//Declare URLS for img sources
var chocolateURL_src = chocolateURL_up;
var honeyRoastedURL_src = honeyRoastedURL_up;
var almondURL_src = almondURL_up;
var blueberryURL_src = blueberryURL_up;

//Declare IDs
var chocolateID = "chocolatePic";
var honeyRoastedID = "honeyRoastedPic";
var almondID = "almondPic";
var blueberryID = "blueberryPic";

//Declare Descriptions
var chocolateDesc = "Kind Chocolate Vanilla Almond";
var honeyRoastedDesc = "Kind Honey Roasted Nuts and Sea Salt";
var almondDesc = "Kind Almond Coconut";
var blueberryDesc = "Kind Blueberry Vanilla Cashew";

//Array Order: Chocolate, HoneyRosted, Almond, Blueberry
var mouseUpArray = [chocolateURL_up, honeyRoastedURL_up, almondURL_up, blueberryURL_up];
var mouseDownArray = [chocolateURL_down,...