Working on the position of the blocks

pages/fifth.html

@@ -2,6 +2,7 @@
   <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
   <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.5/aframe/build/aframe-ar.js"></script>
   <script src="/js/vue.js"></script>
+  <script src="/js/lodash.min.js"></script>
   <!-- <script src="./assets/three.js"></script>
   <script src="./assets/draco.js"></script> -->
 
@@ -99,7 +100,7 @@
           material="color: #000"
           light="type: point; intensity: 2.0"
           rotation="-90 0 0"
-          position="0 5 0"
+          position="0 0 0"
           scale="2 3 1"
         >
           <a-text
@@ -107,10 +108,26 @@
             anchor="center"
             color="#FFF"
             z-offset="2"
-            width="0.25"
+            width="0.5"
             :value="question.question"
           ></a-text>
         </a-entity>
+        <a-entity
+          v-for="(response, resp_index) in createResponseArray(question.correct_answer, question.incorrect_answers)"
+          :key="resp_index"
+          geometry="primitive: box"
+          class="clickable"
+          :material="getColor()"
+          :position="getPosition(resp_index)"
+          scale="0.75 1 1"
+        >
+          <a-text
+            color="#FFF"
+            z-offset="2"
+            width="0.5"
+            :value="response"
+          ></a-text>
+        </a-entity>
       </a-marker>
       <a-entity camera></a-entity>
     </a-scene>
@@ -224,6 +241,31 @@
         data: {
           message: "Hello Vue!",
           questions
+        },
+        methods: {
+          createResponseArray(correct, others) {
+            console.log(_.shuffle([correct, ...others]));
+            return _.shuffle([correct, ...others]);
+          },
+
+          getId(index, resp_index) {
+            return `${index}_${resp_index}`;
+          },
+          getPosition(index) {
+            console.log(index + index * 3);
+            return `${index - 1} -0.5 3`;
+          },
+          getRandomColor() {
+            var letters = "0123456789ABCDEF";
+            var color = "#";
+            for (var i = 0; i < 6; i++) {
+              color += letters[Math.floor(Math.random() * 16)];
+            }
+            return color;
+          },
+          getColor() {
+            return `opacity: 1; color: ${this.getRandomColor()}`;
+          }
         }
       });
       window.onload = function() {};