updated scoring

Author: ajebasingh

src/components/LatinForms.vue

@@ -3,12 +3,17 @@
         <h1>Latin Forms</h1>
         <button v-on:click="getNextWord()" v-show="!showLatin">Start</button>
         <div v-show="showLatin">
-            <div>{{ selectedWord.word }}</div>
-            <div>{{ selectedWord.meaning }}</div>
+            <div class="scoreboard">
+                <span>Correct: <span class="score">{{ latinFormsScore.correct }}</span></span>
+                <span>Incorrect: <span class="score">{{ latinFormsScore.total - latinFormsScore.correct }}</span></span>
+            </div>
+            <div v-if="selectedWord != null" class="latin-form-word">{{ selectedWord.word }}</div>
+            <div v-if="selectedWord != null" class="latin-form-meaning">{{ selectedWord.meaning }}</div>
             <div>
-                {{ whichForm }}
+                <span class="latin-form">{{ whichForm }}</span>
+                <span class="latin-form-answer"><input v-model="latinFormsAnswer" class="latin-form-input"/></span>
             </div>
-            <button v-on:click="getNextWord()">Lock in Answer</button>
+            <button v-on:click="getNextWord()" class="btn-answer">Lock in Answer</button>
         </div>
     </div>
 </template>
@@ -27,6 +32,11 @@
                     {word: '', meaning: '', second: '', third: '', fourth: ''},
                     {word: '', meaning: '', second: '', third: '', fourth: ''}
                 ],
+                latinFormsAnswer: '',
+                latinFormsScore: {
+                    total: 0,
+                    correct: 0
+                },
                 selectedWord: null,
                 randomNumber: 0,
                 index: 0,
@@ -36,10 +46,32 @@
             }
         },
         methods: {
-            getSelectedWord() {
-                return this.selectedWord;
-            },
             getNextWord: function () {
+                if (this.showLatin) {
+                    //we already have an answer! check it.
+                    //increment our question count
+                    this.latinFormsScore.total++;
+
+                    switch (this.form) {
+                        case 0:
+                            if (this.latinFormsAnswer === this.selectedWord.second) {
+                                this.latinFormsScore.correct++;
+                            }
+                            break;
+                        case 1:
+                            if (this.latinFormsAnswer === this.selectedWord.third) {
+                                this.latinFormsScore.correct++;
+                            }
+                        case 2:
+                            if (this.latinFormsAnswer === this.selectedWord.fourth) {
+                                this.latinFormsScore.correct++;
+                            }
+                            break;
+                    }
+
+                    this.latinFormsAnswer = '';
+                }
+
                 axios.post("https://www.rdrand.com/API/GenerateUInt")
                     .then(response => {
                         this.randomNumber = response.data;
@@ -61,6 +93,8 @@
                                         this.whichForm = '4th';
                                         break;
                                 }
+
+                                this.showLatin = true;
                             })
                             .catch(e => {
                                 this.errors.push(e)
@@ -70,13 +104,42 @@
                         this.errors.push(e)
                     });
             }
-        },
-        created: function () {
-            this.selectedWord = this.phrases[0];
         }
     }
 </script>
 
 <style scoped>
+    .scoreboard {
+        font-size: .7em;
+    }
+
+    .score {
+        font-weight: bold;
+        font-size: 1.1em;
+        padding-right: 1em;
+    }
 
+    .latin-form {
+        padding-right: .5em;
+        font-size: .8em;
+        font-style: italic;
+    }
+
+    .latin-form-input {
+        padding: .5em .5em .5em .5em;
+    }
+
+    .latin-form-word {
+        font-weight: bold;
+        margin: 1em 0em 0em 0em;
+    }
+
+    .latin-form-meaning {
+        font-style: italic;
+        margin: 0em 0em 1em 0em;
+    }
+
+    .btn-answer {
+        margin-top: 1em;
+    }
 </style>