Finished implementation of Framed Line study (#2)

* Removingnot necessary study cats code

* Implemented IRB, demographics, instructions, and practice elements of Frame Line study

* fixed issue with carousel indicators not being active

* Halfway done with practice content

* finished box outlines for practice

* fixed line drawing bug

* fixed line erasure issue

* added boundaries for lines drawn within boxes

* added missing text for practice content

* debugging results calculation percentage off by

* fixed percentage results bugs, fixed drawing line exceeding square bug, fixed edge case with buttons

* finished trial boxes for absolute trials + bug fixes

* finished main trial content + infinite loop with line drawing fixed

* fixed arrow not displaying bug, added time delay for absolute trials, finished larger boxed trials

* fixed logic error related to box sizing

* added average calculation

* added relative task instructions

* added all relative trials

* finished the entire framed-line project (minus minor styllistic changes)

* fixed bar graph display error

* Finished all results page related fixes

* fixed result bar errors and  redid code to fit old box sizes

* changed arrows to only show up when practice is finished.

* all code refactoring done, moved some global vars to study manager

* added all touch screen arrow buttons

* fixed some responsiveness issues

src/css/litw-styles.css

@@ -1,8 +1,8 @@
 /*************************************************************
  * Base stylesheet for LabintheWild.
- * 
+ *
  * Author: LITW team
- * 
+ *
  * © Copyright 2023 LabintheWild
  * For questions about this file and permission to use
  * the code, contact us at [email protected]
@@ -59,18 +59,18 @@ body {
 	line-height: 22px;
 	color: #222;
 }
-#wrapper, #content { 
+#wrapper, #content {
 	margin: 0 auto;
 	padding-bottom: 5rem;
 }
-#header { 
+#header {
 	margin-top: 0px;
 }
-#share-text { 
-	float:right; 
-	margin-top:15px; 
-	font-size: 13px; 
-	color:#888; 
+#share-text {
+	float:right;
+	margin-top:15px;
+	font-size: 13px;
+	color:#888;
 }
 
 .slide {
@@ -101,9 +101,9 @@ body {
 	width: 710px;
 	border: 0px;
 }
-#likert-scale input { 
-	margin-left: 15px; 
-	margin-right: 15px; 
+#likert-scale input {
+	margin-left: 15px;
+	margin-right: 15px;
 }
 
 .scale-legend {
@@ -192,8 +192,8 @@ body {
 	margin-bottom: 30px;
 }
 
-#comments { 
-	text-align: center; 
+#comments {
+	text-align: center;
 }
 textarea.comments-box, textarea.comments_box {
 	padding: 15px;
@@ -339,7 +339,7 @@ textarea.comments-box, textarea.comments_box {
 	user-select: none;
 	cursor: pointer;
 }
-.btn-next-page:active, #btn-next-page:active { 
+.btn-next-page:active, #btn-next-page:active {
 	background: url("../img/btn-next-active.png");
 }
 
@@ -348,9 +348,9 @@ textarea.comments-box, textarea.comments_box {
  * IMAGES
  *******************************************/
 
-#logo { 
-	float: left; 
-	margin-top: 30px; 
+#logo {
+	float: left;
+	margin-top: 30px;
 	margin-bottom: 15px;
 	width: 300px;
 }
@@ -403,7 +403,7 @@ select {
 	margin-bottom: 15px;
 	border: 1pt solid transparent;
 	border-radius: 7px;
-	padding: 3px;	
+	padding: 3px;
 }
 .expansion-element {
 	margin-left: 20px;
@@ -588,12 +588,12 @@ select {
  * LINKS
  *******************************************/
 
-a:link, a:visited, a:hover { 
-	text-decoration: none; 
-	color: #0099cc; 
+a:link, a:visited, a:hover {
+	text-decoration: none;
+	color: #0099cc;
 }
-a:active { 
-	color: #003b4e; 
+a:active {
+	color: #003b4e;
 }
 
 
@@ -625,13 +625,13 @@ a:active {
 	margin-top: -50px;
   margin-left: -50px;
 }
-.warn { 
-	color: #f00; 
-	font-weight: bold; 
+.warn {
+	color: #f00;
+	font-weight: bold;
 }
-.bolded-blue { 
-	font-weight: bold; 
-	color: #3f6379; 
+.bolded-blue {
+	font-weight: bold;
+	color: #3f6379;
 }
 .bolded-italic {
 	font-weight: bold;
@@ -689,3 +689,7 @@ a:active {
 	max-width: 99%;
 	height: 98%
 }
+
+ol .active {
+	background-color: #003b4e;
+}

src/js/litw/jspsych-display-info.js

@@ -1,26 +1,26 @@
 /*************************************************************
  * jspsych-display-info.js
- * 
+ *
  * A jsPsych plugin that displays information, such as
  * instructions or break pages.
- * 
+ *
  * Last modified: January 28, 2017
  *
  * © Copyright 2017 LabintheWild
  * For questions about this file and permission to use
  * the code, contact us at [email protected]
  *************************************************************/
 
-var instructionsTemplate = require("../../templates/instructions.html");
-var preTrialBreakTemplate = require("../../templates/preTrialBreak.html");
-var midTrialBreakTemplate = require("../../templates/midTrialBreak.html");
+var instructionsTemplate = require("../../study-frame-and-line/templates/instructions.html");
+var preTrialBreakTemplate = require("../../study-frame-and-line/templates/preTrialBreak.html");
+var midTrialBreakTemplate = require("../../study-frame-and-line/templates/midTrialBreak.html");
 
 module.exports = jsPsych.plugins["display-info"] = (function() {
 
   var plugin = {};
 
   plugin.trial = function(display_element, trial) {
-    
+
     if (trial.name === "instructions") {
       $("#instructions").html(instructionsTemplate({
         content: trial.content,
@@ -31,7 +31,7 @@ module.exports = jsPsych.plugins["display-info"] = (function() {
         display_element.empty();
         jsPsych.finishTrial();
       });
-      
+
       LITW.utils.showSlide("instructions");
     } else if (trial.name === "preTrialBreak") {
       $("#break").html(preTrialBreakTemplate({