Added a few more quizzes, displaying the score

.gitignore

@@ -0,0 +1,2 @@
+.netlify
+node_modules

netlify.toml

@@ -0,0 +1,12 @@
+[dev]
+  # Directory to change to before starting a build. 
+  # This is where we will look for package.json/.nvmrc/etc.
+  base = "."
+
+  # Directory (relative to root of your repo) that contains the deploy-ready 
+  # HTML files and assets generated by the build. If a base directory has
+  # been specified, include it in the publish directory path.
+  publish = "./"
+
+  # Directory with the serverless Lambda functions to deploy to AWS.
+  functions = "functions/"

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "gyk-ar",
+  "version": "1.0.0",
+  "description": "Date: 2019-08-05",
+  "main": "index.js",
+  "scripts": {
+    "start": "./node_modules/live-server/live-server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-DL/gyk-ar.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/kevin-DL/gyk-ar/issues"
+  },
+  "homepage": "https://github.com/kevin-DL/gyk-ar#readme",
+  "devDependencies": {
+    "live-server": "^1.2.1"
+  }
+}

pages/fifth.html

@@ -10,43 +10,48 @@
     <script>
       AFRAME.registerComponent("markerhandler", {
         init: function() {
-          const animatedMarker = document.querySelector("#animated-marker");
+          // const markers = document.querySelectorAll(".marker");
+          // markers.forEach(marker => {
+          //   marker.addEventListener("click", function(ev, target) {
+          //     const intersectedElement =
+          //       ev && ev.detail && ev.detail.intersectedEl;
+          //     const parentId = ev.srcElement.id;
+          //     for (let index = 0; index < 5; index++) {
+          //       const childId = `${parentId}_${index}`;
+          //       const intersect = document.getElementById(childId);
+          //       if (
+          //         intersectedElement !== undefined &&
+          //         intersectedElement === intersect
+          //       ) {
+          //         console.log(childId);
+          //       }
+          //     }
+          //   });
+          // });
+          const animatedMarker = document.querySelector("#marker");
           // every click, we make our model grow in size :)
           animatedMarker.addEventListener("click", function(ev, target) {
             const intersectedElement =
               ev && ev.detail && ev.detail.intersectedEl;
-            const aEntity = document.querySelector("#sphere");
+            const boxes = document.querySelectorAll(".clickable");
-            const yellowSphere = document.querySelector("#yellow-sphere");
+            boxes.forEach(element => {
-            if (intersectedElement !== undefined) {
+              if (element && intersectedElement === element) {
-              if (aEntity && intersectedElement === aEntity) {
+                // element.click();
-                const scale = aEntity.getAttribute("scale");
+                // const material = element.getAttribute("material");
-                Object.keys(scale).forEach(
+                // Object.keys(material).forEach(key => {
-                  key => (scale[key] = scale[key] + 1)
+                //   material[key] = "green";
-                );
+                // });
-                aEntity.setAttribute("scale", scale);
+                // element.setAttribute("material", material);
-                const material = aEntity.getAttribute("material");
-                Object.keys(material).forEach(key => {
-                  if (key === "color") {
-                    material[key] = "green";
-                  }
-                });
-                aEntity.setAttribute("material", material);
-              }
-
-              if (yellowSphere && intersectedElement === yellowSphere) {
-                const material = yellowSphere.getAttribute("material");
-                Object.keys(material).forEach(key => {
-                  if (key === "color") {
-                    if (material[key] != "green") {
-                      material[key] = "green";
               } else {
-                      material[key] = "red";
+                // const material = element.getAttribute("material");
-                    }
+                // Object.keys(material).forEach(key => {
+                //   if (key === "color") {
+                //     material[key] = "gray";
+                //   }
+                // });
+                // element.setAttribute("material", material);
               }
             });
-                yellowSphere.setAttribute("material", material);
-              }
-            }
           });
         }
       });
@@ -87,15 +92,46 @@
         ></a-entity>
       </a-marker> -->
       <a-marker
-        v-for="(question, index) in questions"
+        markerhandler
-        :key="index"
+        id="marker"
         type="barcode"
-        :value="index"
+        emitevents="true"
+        cursor="rayOrigin: mouse"
+        raycaster="objects: .clickable"
       >
-        <!-- <a-plane color="#000" height="1" width="1" rotation="-90 0 0">
+        <a-plane
-          <a-text color="#FFF" z-offset="2" :value="question.question"></a-text>
+          v-if="currentQuestion"
-        </a-plane> -->
+          color="#000"
-        <a-entity
+          height="1"
+          width="1"
+          rotation="-90 0 0"
+          position="0 0 -2"
+        >
+          <a-text
+            color="#FFF"
+            z-offset="1"
+            :value="decodeURIComponent(currentQuestion.question)"
+            width="1"
+          ></a-text>
+        </a-plane>
+
+        <a-plane
+          color="#000"
+          height="1"
+          width="1"
+          rotation="-90 0 0"
+          position="-2 0 -2"
+        >
+          <a-text
+            color="#FFF"
+            z-offset="1"
+            value="SCORE"
+            width="3"
+            position="0 0 1"
+          ></a-text>
+          <a-text color="#FFF" z-offset="1" :value="score" width="2"></a-text>
+        </a-plane>
+        <!-- <a-entity
           geometry="primitive: plane"
           material="color: #000"
           light="type: point; intensity: 2.0"
@@ -104,147 +140,95 @@
           scale="2 3 1"
         >
           <a-text            
-            baseline="top"
-            anchor="center"
             color="#FFF"
             z-offset="2"
             width="0.5"
             :value="question.question"
           ></a-text>
-        </a-entity>
+        </a-entity> -->
+        <!-- <a-text
+          :value="question.question"
+          geometry="primitive:plane; primitive: plane; height: 10; width: 10;"
+          material="color: #efefef"
+          rotation="-90 0 0"
+          position="-2 0 0"
+          color="#000"
+          width="1"
+          z-offset="1"
+        ></a-text> -->
         <a-entity
-          v-for="(response, resp_index) in createResponseArray(question.correct_answer, question.incorrect_answers)"
+          v-if="currentQuestion"
+          v-for="(response, resp_index) in createResponseArray(currentQuestion.correct_answer, currentQuestion.incorrect_answers)"
           :key="resp_index"
           geometry="primitive: box"
           class="clickable"
-          :material="getColor()"
+          :material="getColor(resp_index)"
           :position="getPosition(resp_index)"
           scale="0.75 1 1"
+          @click="updateScore(response)"
         >
           <a-text
-            color="#FFF"
+            color="#000"
-            z-offset="2"
+            z-offset="1"
-            width="0.5"
+            :value="decodeURIComponent(response)"
-            :value="response"
+            rotation="-90 0 0"
+            width="1"
           ></a-text>
         </a-entity>
       </a-marker>
       <a-entity camera></a-entity>
     </a-scene>
     <script>
-      const questions = [
+      const colors = [
-        {
+        "#462186",
-          category: "Science: Computers",
+        "#F264F9",
-          type: "multiple",
+        "#3012AB",
-          difficulty: "easy",
+        "#7DC5DB",
-          question:
+        "#B5281B",
-            "In any programming language, what is the most common way to iterate through an array?",
+        "#C023EA",
-          correct_answer: "&#039;For&#039; loops",
+        "#83DD1D",
-          incorrect_answers: [
+        "#96EFC7",
-            "&#039;If&#039; Statements",
+        "#BB9713",
-            "&#039;Do-while&#039; loops",
+        "#4EF4BD"
-            "&#039;While&#039; loops"
-          ]
-        },
-        {
-          category: "Science: Computers",
-          type: "multiple",
-          difficulty: "easy",
-          question: "What does the &quot;MP&quot; stand for in MP3?",
-          correct_answer: "Moving Picture",
-          incorrect_answers: ["Music Player", "Multi Pass", "Micro Point"]
-        },
-        {
-          category: "Science: Computers",
-          type: "multiple",
-          difficulty: "easy",
-          question:
-            "Which computer hardware device provides an interface for all other connected devices to communicate?",
-          correct_answer: "Motherboard",
-          incorrect_answers: [
-            "Central Processing Unit",
-            "Hard Disk Drive",
-            "Random Access Memory"
-          ]
-        },
-        {
-          category: "Science: Computers",
-          type: "multiple",
-          difficulty: "easy",
-          question:
-            "In the programming language Java, which of these keywords would you put on a variable to make sure it doesn&#039;t get modified?",
-          correct_answer: "Final",
-          incorrect_answers: ["Static", "Private", "Public"]
-        },
-        {
-          category: "Science: Computers",
-          type: "multiple",
-          difficulty: "easy",
-          question:
-            "If you were to code software in this language you&#039;d only be able to type 0&#039;s and 1&#039;s.",
-          correct_answer: "Binary",
-          incorrect_answers: ["JavaScript", "C++", "Python"]
-        },
-        {
-          category: "Science: Computers",
-          type: "multiple",
-          difficulty: "easy",
-          question:
-            "What is the most preferred image format used for logos in the Wikimedia database?",
-          correct_answer: ".svg",
-          incorrect_answers: [".png", ".jpeg", ".gif"]
-        },
-        {
-          category: "Science: Computers",
-          type: "multiple",
-          difficulty: "easy",
-          question: "In web design, what does CSS stand for?",
-          correct_answer: "Cascading Style Sheet",
-          incorrect_answers: [
-            "Counter Strike: Source",
-            "Corrective Style Sheet",
-            "Computer Style Sheet"
-          ]
-        },
-        {
-          category: "Science: Computers",
-          type: "multiple",
-          difficulty: "easy",
-          question: "How many kilobytes in one gigabyte?",
-          correct_answer: "1000000",
-          incorrect_answers: ["1024", "1000", "1048576"]
-        },
-        {
-          category: "Science: Computers",
-          type: "multiple",
-          difficulty: "easy",
-          question: "What does LTS stand for in the software market?",
-          correct_answer: "Long Term Support",
-          incorrect_answers: [
-            "Long Taco Service",
-            "Ludicrous Transfer Speed",
-            "Ludicrous Turbo Speed"
-          ]
-        },
-        {
-          category: "Science: Computers",
-          type: "multiple",
-          difficulty: "easy",
-          question:
-            "Which programming language shares its name with an island in Indonesia?",
-          correct_answer: "Java",
-          incorrect_answers: ["Python", "C", "Jakarta"]
-        }
       ];
       var app = new Vue({
         el: "#app",
         data: {
           message: "Hello Vue!",
-          questions
+          questions: [],
+          currentQuestionIndex: 0,
+          currentQuestion: null,
+          score: 0
+        },
+        mounted() {
+          console.log(this);
+          const vm = this;
+          fetch(
+            `/.netlify/functions/getQuiz?id=${Math.floor(Math.random() * 11)}`
+          )
+            .then(function(response) {
+              return response.json();
+            })
+            .then(function(questions) {
+              vm.questions = questions;
+              vm.currentQuestion = questions[0];
+            });
         },
         methods: {
+          updateScore(response) {
+            if (response == this.currentQuestion.correct_answer) {
+              this.score = this.score + 1;
+            }
+
+            if (this.currentQuestionIndex < this.questions.length - 1) {
+              this.currentQuestionIndex = this.currentQuestionIndex + 1;
+              this.currentQuestion = this.questions[this.currentQuestionIndex];
+            } else {
+              this.currentQuestion.correct_answer = null;
+              this.currentQuestion.incorrect_answers = [];
+            }
+          },
           createResponseArray(correct, others) {
-            console.log(_.shuffle([correct, ...others]));
             return _.shuffle([correct, ...others]);
           },
 
@@ -252,8 +236,7 @@
             return `${index}_${resp_index}`;
           },
           getPosition(index) {
-            console.log(index + index * 3);
+            return `${index - 1} 0 0`;
-            return `${index - 1} -0.5 3`;
           },
           getRandomColor() {
             var letters = "0123456789ABCDEF";
@@ -263,8 +246,8 @@
             }
             return color;
           },
-          getColor() {
+          getColor(index) {
-            return `opacity: 1; color: ${this.getRandomColor()}`;
+            return `opacity: 0.5; color: ${colors[index]}`;
           }
         }
       });

pages/first.html

@@ -12,12 +12,16 @@
       <!-- <a-anchor hit-testing-enabled="true">        
       </a-anchor> -->
       <a-marker type="barcode" value="5">
-        <a-box material="opacity: 0.5; side:double; color:red;">
+        <a-box
+          material="opacity: 0.5; side:double; color:red;"
+          rotation="-90 0 0"
+        >
           <a-text value="Hello, World!"></a-text>
         </a-box>
         <a-box
           material="opacity: 0.5; side:double; color:yellow;"
           position="1 1 1"
+          rotation="-90 0 0"
         >
           <a-text value="Hello, World!"></a-text>
         </a-box>