Finished other changes to experiment.

src/App.svelte

@@ -33,6 +33,8 @@
     import Header from "./components/Header.svelte";
     import MTurkPreview from "./pages/MTurkPreview.svelte";
     import Debrief2 from "./pages/Debrief2.svelte";
+    import Debrief3 from "./pages/Debrief3.svelte";
+
 
     // path details
     const ratingsPath = `${experiment}/ratings`;
@@ -60,6 +62,20 @@
     // use to validate build type in JS console
     console.log(dev);
 
+    function shuffle(array) {
+            let currentIndex = array.length, randomIndex;
+            // While there remain elements to shuffle.
+            while (currentIndex != 0) {
+                // Pick a remaining element.
+                randomIndex = Math.floor(Math.random() * currentIndex);
+                currentIndex--;
+                // And swap it with the current element.
+                [array[currentIndex], array[randomIndex]] = [
+                    array[randomIndex], array[currentIndex]];
+            }
+            return array;
+        }
+
     const resetTestWorker = async () => {
         // Change to the new state within Svelte
         if (params.workerId === "test-worker") {
@@ -106,6 +122,8 @@
         }
         moviesRemaining.sort();
         movieLinks.sort();
+        shuffle(moviesRemaining);
+        shuffle(movieLinks);
 
         // check to see which movies subject has already viewed (if any)
         let currPath = `${ratingsPath}/${params.workerId}`;
@@ -310,7 +328,8 @@
         }
     };
     
-    let debriefIndex= 0;
+    let debriefIndex = 0;
+    let debriefIndex2 = 0;
     
     const increment = async () => {
         movieIndex++;
@@ -322,6 +341,10 @@
         debriefIndex++;
         console.log(debriefIndex);
     }
+    const increment3 = async () => {
+        debriefIndex2++;
+        console.log(debriefIndex2);
+    }
     // function used to remove previously watched videos from array
     function removeItemOnce(arr, value) {
         var index = arr.indexOf(value);
@@ -401,7 +424,23 @@
             on:finished={() => increment2()}
             on:botcheck={() => updateState("botcheck-task")}
             on:complete={() => updateState("debrief")}
+            on:finished={() => updateState("debrief3")}
+        />
+        {:else if currentState === "debrief3"}
+        <Debrief3
+            {email}
+            {labName}
+            {numOptions}
+            movies={moviesRemaining}
+            links={movieLinks}
+            index={debriefIndex2}
+            videoIndex = {movieIndex}
+            options={numOptions}
+            ratingType={currRating}
+            on:finished={() => increment3()}
+            on:botcheck={() => updateState("botcheck-task")}
             on:finished={() => updateState("task")}
+
         />
         {:else if currentState === "debrief"}
         <Debrief subPath={subjectPath} {email} {labName} {numOptions}

src/pages/Debrief2.svelte

@@ -10,6 +10,8 @@
         let value2 = [0];
         let value3 = [0];
         let value4 = [0];
+        let value5 = [0];
+        let value6 = [0];
 
         const ratingsPath = `${experiment}/ratings`;
 	    const ratingsDoc = db.doc(ratingsPath);
@@ -24,7 +26,6 @@
         
         export let email;
         export let labName;
-        export let numOptions;
         export let videoIndex;
         
         export let ratingType;
@@ -69,19 +70,26 @@
             return array;
         }
         // Used like so
-        var arr = ["happy", "sad", "fearful", "disgusted", "angry"];
+        
+       let numVideos = 11;
+       let botCheck = 2;
+        // Used like so
+        var arr = ["joyful", "warm and tender", "inspired or uplifted", "sad", "disgusted", "ashamed", "horrified"];
         shuffle(arr);
         let Q1 = "After watching the video, how " + arr[0] + " do you feel on a scale from 1-100?";
         let Q2 = "After watching the video, how " + arr[1] + " do you feel on a scale from 1-100?";
         let Q3 = "After watching the video, how " + arr[2] + " do you feel on a scale from 1-100?";
         let Q4 = "After watching the video, how " + arr[3] + " do you feel on a scale from 1-100?";
         let Q5 = "After watching the video, how " + arr[4] + " do you feel on a scale from 1-100?";
+        let Q6 = "After watching the video, how " + arr[5] + " do you feel on a scale from 1-100?";
+        let Q7 = "After watching the video, how " + arr[6] + " do you feel on a scale from 1-100?";
+
   
         const submitHIT = async () => {
             
             try {
-                let rating_info = [value, value1, value2, value3, value4];
-                let dimensions = [arr[0], arr[1], arr[2], arr[3], arr[4]];
+                let rating_info = [value, value1, value2, value3, value4, value5, value6];
+                let dimensions = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6]];
                 await db.doc(pathway).update({
                     Ratings: rating_info,
                     Dimensions: dimensions,
@@ -92,32 +100,24 @@
             }
             dispatch("finished"); 
         };
-       let numVideos = 11;
-       let botCheck = 3;
+     
         const newPage = async () =>{
-            if (videoIndex% botCheck == 0 && videoIndex != numVideos){
-                let rating_info = [value, value1, value2, value3, value4];
-                let dimensions = [arr[0], arr[1], arr[2], arr[3], arr[4]];
-                dispatch("botcheck");   
-                await db.doc(ratingDocPathway).update({
-                    Ratings: rating_info,
-                    Dimensions: dimensions,
-                });    
-            } 
-            else if (videoIndex != numVideos){
-                let rating_info = [value, value1, value2, value3, value4];
-                let dimensions = [arr[0], arr[1], arr[2], arr[3], arr[4]];
-                dispatch("finished");   
+          
+            
+           if (videoIndex != numVideos){
+            let rating_info = [value, value1, value2, value3, value4, value5, value6];
+            let dimensions = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6]];
+                dispatch("finished")
                 await db.doc(ratingDocPathway).update({
                     Ratings: rating_info,
                     Dimensions: dimensions,
                 });    
             } 
             else
             {
-                let rating_info = [value, value1, value2, value3, value4];
-                let dimensions = [arr[0], arr[1], arr[2], arr[3], arr[4]];
-                dispatch("complete");   
+                let rating_info = [value, value1, value2, value3, value4, value5, value6];
+                let dimensions = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6]];
+                dispatch("complete")
                 await db.doc(ratingDocPathway).update({
                     Ratings: rating_info,
                     Dimensions: dimensions,
@@ -202,11 +202,23 @@
                                         <input type="range" min = "1" max = "100" bind:value={value4}>
                                         <p> Rating: {value4} <span id="demo2"> </span> </p>
                                     </label>
+
+                                    <label class="label"><h3>{Q6}</h3>
+                                        <div class="rangeslider">
+                                        <label class="radio2">
+                                            <input type="range" min = "1" max = "100" bind:value={value5}>
+                                            <p> Rating: {value5} <span id="demo2"> </span> </p>
+                                        </label>
+
+                                        <label class="label"><h3>{Q7}</h3>
+                                            <div class="rangeslider">
+                                            <label class="radio2">
+                                                <input type="range" min = "1" max = "100" bind:value={value6}>
+                                                <p> Rating: {value6} <span id="demo2"> </span> </p>
+                                            </label>
                 <p>
                     If you have any questions or concerns, you can email <a href={emailAddress}>{labName}.</a> 
-                   <br>
-                    If you would like to <strong>repeat this HIT with a new video</strong>, 
-                    please simply click the next button. There are {numOptions} videos left to watch. Thanks! <br>
+
                 </p>
 
                 <div class="field-label">
@@ -216,4 +228,4 @@
                 <button class="button is-success is-large" on:click={newPage}>NEXT PAGE</button>         
             </form>
         </div> 
-    </div>
+    </div>

src/pages/Debrief3.svelte

@@ -0,0 +1,145 @@
+<!-- this page is the debrief that collects post survey questions;
+    there is a single button that saves responses to firebase and submits HIT  -->
+
+    <script>
+        import { db, params, serverTime, experiment, userGroup } from '../utils'
+        import { createEventDispatcher } from 'svelte';
+
+
+        const ratingsPath = `${experiment}/ratings`;
+	    const ratingsDoc = db.doc(ratingsPath);
+	    const subjectGroupPath = `${experiment}/subjects/${userGroup}`;
+	    const subjectGroupCollection = db.collection(subjectGroupPath);
+	    const stimuliPath = `${experiment}/stimuli`;
+	    const stimuliDoc = db.doc(stimuliPath);
+
+        const dispatch = createEventDispatcher();
+        
+        // populating necessary variables
+        
+        export let email;
+        export let videoIndex;
+  
+        
+        export let ratingType;
+	    export let movies;
+	    export let options;
+	    export let links;
+	    export let index; 
+
+        let emailAddress = "mailto:" + email;
+        let currID = params.assignmentId;
+        let postURL = 'https://www.prolific.com/'
+        let moviesRemaining = [];
+        let numVideos = 9;
+
+        let currVid;
+	    let currVidSrc;
+	    let ratingDocPathway;
+        let botCheck = 2;
+       let answer = "";
+
+        if (options > 0) {
+		// choose random movie and rating type
+		currVid = movies[index];
+
+		let vidPlusRating = `${currVid}-${ratingType}`;
+
+		ratingDocPathway = `${ratingsPath}/${params.workerId}/${vidPlusRating}`;
+
+		// grab URL for video sourcing
+		currVidSrc = links[index];
+	
+	}
+    console.log(ratingDocPathway)
+   
+     
+     
+        const newPage = async () =>{   
+            if (videoIndex % botCheck == 0 && videoIndex != numVideos){
+                dispatch("botcheck")
+                await db.doc(ratingDocPathway).update({
+                 Comprehension: answer,
+                });   
+
+            }  
+             else
+                dispatch("finished")
+                await db.doc(ratingDocPathway).update({
+                   Comprehension: answer,
+                });    
+        
+        }
+      
+    </script>
+
+    <style>
+        .container {
+            margin: 0 auto !important; 
+            max-width: 800px;
+            text-align: center;
+        }
+        .form-box {
+            padding: 2%;
+                background-color: rgba(255, 255, 255, 0.6);
+            border-left: 2px solid #aaa;
+                border-radius: 2px;
+                box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);   
+            text-align: left;
+        }
+            .label {
+            font-weight: bold;
+        }
+        .button {
+            background-color: lightblue;
+        }
+    </style>
+
+    <div class="container">
+        <div class="form-box">
+            <form name="mturk" action={postURL} method='POST'>
+                <h2> After watching the video, we have a set of questions for you to answer.</h2>
+                <em> Please answer all questions and press submit once you've finished for another video. </em>
+
+                <input type="hidden" name="assignmentId" id="assignmentId" value={currID}>
+                <input type="hidden" name="hidden_val_DONT_REMOVE" value="1">
+
+
+                                        <label class="label"
+            ><u>What animals were featured in the video clip you just saw?</u>
+            <div class="options">
+                <label class="radio">
+                    <input type="radio" bind:group={answer} value={"cows"} />
+                    Cows
+                </label>
+                <label class="radio">
+                    <input type="radio" bind:group={answer} value={"pigs"} />
+                    Pigs
+                </label>
+                <label class="radio">
+                    <input type="radio" bind:group={answer} value={"chicken"} />
+                    Chicken
+                </label>
+                <label class="radio">
+                    <input type="radio" bind:group={answer} value={"sheep"} />
+                    Sheep
+                </label>
+                <label class="radio">
+                    <input type="radio" bind:group={answer} value={"cats"} />
+                    Cats
+                </label>
+                <br />
+            </div>
+        </label>
+
+
+
+
+                <div class="field-label">
+                    <!-- Left empty for spacing -->
+                </div> 
+                <br>
+                <button class="button is-success is-large" on:click={newPage}>NEXT PAGE</button>         
+            </form>
+        </div> 
+    </div>