Upgrade jsPsych to v6.3.0

README.md

@@ -1,6 +1,6 @@
 This repository is intended to be cloned/forked in order to set up a working jsPsych experiment via GitHub pages. This makes it simple to start exploring jsPsych.
 
-**This project currently uses jsPsych v3.1**
+**This project currently uses jsPsych v6.3.0**
 
 Instructions
 ------------

css/jspsych.css

@@ -1,122 +1,206 @@
-/* 
+/*
  * CSS for jsPsych experiments.
  *
- * This stylesheet provides minimal styling to make jsPsych 
+ * This stylesheet provides minimal styling to make jsPsych
  * experiments look polished without any additional styles.
- *
  */
 
-/*
- *
- * fonts and type
- *
- */
-
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
+ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
 
-html {
- font-family: 'Open Sans', 'Arial', sans-serif;
- font-size: 18px;
- line-height: 1.6em;
-}
+/* Container holding jsPsych content */
 
-p {
-    clear:both;
-}
+ .jspsych-display-element {
+   display: flex;
+   flex-direction: column;
+   overflow-y: auto;
+ }
 
-.very-small {
-    font-size: 50%;
-}
+ .jspsych-display-element:focus {
+   outline: none;
+ }
 
-.small {
-    font-size: 75%;
-}
+ .jspsych-content-wrapper {
+   display: flex;
+   margin: auto;
+   flex: 1 1 100%;
+   width: 100%;
+ }
 
-.large {
-    font-size: 125%;
-}
+ .jspsych-content {
+   max-width: 95%; /* this is mainly an IE 10-11 fix */
+   text-align: center;
+   margin: auto; /* this is for overflowing content */
+ }
 
-.very-large {
-    font-size: 150%;
-}
+ .jspsych-top {
+   align-items: flex-start;
+ }
 
-/*
- *
- * Classes for changing location of things
- *
- */
-
-.left {
-    float: left;
-}
+ .jspsych-middle {
+   align-items: center;
+ }
 
-.right {
-    float: right;
-}
+/* fonts and type */
 
-.center-content {
-    text-align: center;
+.jspsych-display-element {
+  font-family: 'Open Sans', 'Arial', sans-serif;
+  font-size: 18px;
+  line-height: 1.6em;
 }
 
-/*
- *
- * Form elements like input fields and buttons
- *
- */
+/* Form elements like input fields and buttons */
 
-input[type="text"] {
-    font-family: 'Open Sans', 'Arial', sans-sefif;
-    font-size: 14px;
+.jspsych-display-element input[type="text"] {
+  font-family: 'Open Sans', 'Arial', sans-serif;
+  font-size: 14px;
 }
 
-button {
-    padding: 0.5em;
-    background-color: #eaeaea;
-    border: 1px solid #eaeaea;
-    color: #333;
-    font-family: 'Open Sans', 'Arial', sans-serif;
-    font-size: 14px;
-    cursor: pointer;
+/* borrowing Bootstrap style for btn elements, but combining styles a bit */
+.jspsych-btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin: 0px;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: 'Open Sans', 'Arial', sans-serif;
+  cursor: pointer;
+  line-height: 1.4;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
 }
 
-button:hover {
-    border:1px solid #ccc;
+/* only apply the hover style on devices with a mouse/pointer that can hover - issue #977 */
+@media (hover: hover) {
+  .jspsych-btn:hover {
+    background-color: #ddd;
+    border-color: #aaa;
+  }
 }
 
-/*
- *
- * Container holding jsPsych content
- *
- */
+.jspsych-btn:active {
+  background-color: #ddd;
+  border-color:#000000;
+}
 
+.jspsych-btn:disabled {
+  background-color: #eee;
+  color: #aaa;
+  border-color: #ccc;
+  cursor: not-allowed;
+}
 
-.jspsych-display-element {
-    width: 800px;
-    margin: 50px auto 50px auto;
+/* custom style for input[type="range] (slider) to improve alignment between positions and labels */
+
+.jspsych-slider {
+  appearance: none;
+  -webkit-appearance: none; 
+  -moz-appearance: none;
+  width: 100%; 
+  background: transparent; 
+}
+.jspsych-slider:focus {
+  outline: none;
+}
+/* track */
+.jspsych-slider::-webkit-slider-runnable-track {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #eee;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 2px;
+  border: 1px solid #aaa;
+}
+.jspsych-slider::-moz-range-track {
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #eee;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 2px;
+  border: 1px solid #aaa;
+}
+.jspsych-slider::-ms-track {
+  appearance: none;
+  width: 99%;
+  height: 14px;
+  cursor: pointer;
+  background: #eee;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 2px;
+  border: 1px solid #aaa;
+}
+/* thumb */
+.jspsych-slider::-webkit-slider-thumb {
+  border: 1px solid #666;
+  height: 24px;
+  width: 15px;
+  border-radius: 5px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -9px;
+}
+.jspsych-slider::-moz-range-thumb {
+  border: 1px solid #666;
+  height: 24px;
+  width: 15px;
+  border-radius: 5px;
+  background: #ffffff;
+  cursor: pointer;
+}
+.jspsych-slider::-ms-thumb {
+  border: 1px solid #666;
+  height: 20px;
+  width: 15px;
+  border-radius: 5px;
+  background: #ffffff;
+  cursor: pointer;
+  margin-top: -2px;
 }
 
-/*
- *
- * PLUGIN: jspsych-single-stim
- *
- */
-
-#jspsych-single-stim-stimulus {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+/* jsPsych progress bar */
+
+#jspsych-progressbar-container {
+  color: #555;
+  border-bottom: 1px solid #dedede;
+  background-color: #f9f9f9;
+  margin-bottom: 1em;
+  text-align: center;
+  padding: 8px 0px;
+  width: 100%;
+  line-height: 1em;
+}
+#jspsych-progressbar-container span {
+  font-size: 14px;
+  padding-right: 14px;
+}
+#jspsych-progressbar-outer {
+  background-color: #eee;
+  width: 50%;
+  margin: auto;
+  height: 14px;
+  display: inline-block;
+  vertical-align: middle;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+}
+#jspsych-progressbar-inner {
+  background-color: #aaa;
+  width: 0%;
+  height: 100%;
 }
 
-/*
- *
- * PLUGIN: jspsych-survey-text
- *
- */
-
- .jspsych-survey-text {
-     margin: 0.25em 0em;
- }
-
- .jspsych-survey-text-question {
-     margin: 2em 0em;
- }
+/* Control appearance of jsPsych.data.displayData() */
+#jspsych-data-display {
+  text-align: left;
+}