Quiz preview - submit and results

Author: tarunluthra123

app/helpers/mark-option.js

@@ -0,0 +1,13 @@
+import {helper} from '@ember/component/helper';
+
+export function markOption([questionId, choiceId, answers]) {
+    let index = answers.findIndex(obj => obj.id == questionId)
+    if (index > -1) {
+        if (answers[index].markedChoices.includes(choiceId)) {
+            return true;
+        }
+    }
+    return false
+}
+
+export default helper(markOption);

app/pods/components/question-preview/component.js

@@ -1,3 +1,19 @@
 import Component from '@ember/component';
+import Ember from 'ember';
 
-export default Component.extend({})
+export default Component.extend({
+    actions: {
+        selectChoiceAndMark(questionNumber, choiceId) {
+            this.get('selectChoice')(questionNumber, choiceId)
+        }
+    },
+    selectedChoice: Ember.computed('questionNumber', 'answers', function () {
+        let questionNumber = this.get('questionNumber')
+        let answers = this.get('answers')
+        let index = answers.findIndex(obj => obj.id == questionNumber)
+        if (index > -1) {
+            return answers[index].markedChoices[0]
+        }
+        return null
+    })
+})

app/pods/components/question-preview/template.hbs

@@ -4,9 +4,16 @@
     <br>
     {{#each question.choices as |choice|}}
         {{#if question.multicorrect}}
-            <input type="checkbox" name="questionChoices" value="{{choice.id}}"> {{choice.title}} <br>
+            {{input type="checkbox" checked=(mark-option question.id choice.id answers) name="questionChoices"
+                    click=(action "selectChoiceAndMark" question.id choice.id)}}
+            {{choice.title}}
+            <br>
         {{else}}
-            <input type="radio" name="questionChoices" value="{{choice.id}}"> {{choice.title}} <br>
+            {{#radio-button value=choice.id groupValue=selectedChoice name="questionChoices"
+                            changed=(action "selectChoiceAndMark" question.id choice.id)}}
+                {{choice.title}}
+            {{/radio-button}}
+            <br>
         {{/if}}
         {{choice.description}}<br><br>
     {{/each}}

app/pods/components/question-result/component.js

@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import Ember from 'ember';
+import {inject as service} from '@ember/service';
+
+export default Component.extend({
+    store: service(),
+    question: Ember.computed('res', function () {
+        return this.store.findRecord('question', this.get('res').id)
+    })
+})

app/pods/components/question-result/template.hbs

@@ -0,0 +1,23 @@
+<div style="border-color: black">
+    Question ID : {{res.id}}<br>
+    Question Score : {{res.score}}<br>
+    Question Title : {{question.title}}<br>
+    {{#if res.correctlyAnswered}}
+        Correctly marked choices :
+        <ul style="list-style-type: square">
+            {{#each res.correctlyAnswered as |choice|}}
+                <li>{{choice.title}}</li>
+            {{/each}}
+        </ul>
+    {{/if}}
+
+    {{#if res.incorrectlyAnswered}}
+        Incorrectly marked choices :
+        <ul style="list-style-type: square">
+            {{#each res.incorrectlyAnswered as |choice|}}
+                <li>{{choice.title}}</li>
+            {{/each}}
+        </ul>
+    {{/if}}
+
+</div>

app/pods/quiz/id/preview/controller.js

@@ -1,10 +1,66 @@
 import Controller from '@ember/controller';
+import {inject as service} from '@ember/service';
 
 export default Controller.extend({
     queryParams: ['questionId'],
+    answers: [],
+    api: service(),
     actions: {
         navigate(questionNumber) {
             this.set('question', questionNumber)
+        },
+        async selectChoice(questionNumber, choiceId) {
+            let answers = this.answers
+            let idx = answers.findIndex(obj => obj.id == questionNumber)
+            if (idx > -1) {
+                let ans = answers[idx];
+                //If question's entry is present then modify it
+                const question = await this.store.findRecord('question', questionNumber)
+                if (question.multicorrect) {
+                    if (ans.markedChoices.includes(choiceId)) {
+                        //If choice is already listed then it must have been removed
+                        let index = ans.markedChoices.indexOf(choiceId);
+                        if (index > -1) {
+                            ans.markedChoices.splice(index, 1);
+                        }
+                    } else {
+                        //Else add the choice to current marked choices
+                        ans.markedChoices = [...ans.markedChoices, choiceId]
+                    }
+                } else {
+                    //For non-multicorrect questions, replace the previous choice
+                    ans.markedChoices = [choiceId]
+                }
+            } else {
+                //No previous record of this question. Create a new entry and append to answers.
+                answers.push({
+                    id: questionNumber,
+                    markedChoices: [choiceId]
+                })
+            }
+            this.answers = answers
+        },
+        fetchingResult: false,
+        submitQuiz() {
+            if (this.fetchingResult)
+                return;
+            let quiz = this.get('quiz')
+            let body = {
+                questions: this.answers
+            }
+            this.set('fetchingResult', true);
+            this.api.request('/quizzes/' + quiz.id + '/submit', {
+                method: 'POST',
+                mode: 'cors',
+                data: JSON.stringify(body),
+            }).then((response) => {
+                console.log(response)
+                this.set('results', response)
+            }).catch(console.error)
+                .finally(() => {
+                    this.set('fetchingResult', false)
+                })
+
         }
     },
 })

app/pods/quiz/id/preview/template.hbs

@@ -9,7 +9,7 @@
     {{#if question}}
         <div class="row">
             <div class="col container-fluid">
-                {{question-preview question=question}}
+                {{question-preview question=question selectChoice=(action 'selectChoice') answers=answers}}
             </div>
             <div class="col">
                 {{question-navigator quiz=quiz navigateToQuestion=(action (mut questionId))}}
@@ -23,10 +23,36 @@
     {{/if}}
 
     <div class="container-fluid">
-        <div class="button-solid">
-            <a href="/quiz/{{quiz.id}}" class="white">
-                <button>Edit Quiz</button>
-            </a>
+        <div class="row">
+            <div class="col-2"/>
+            <div class="col">
+                <div class="button-solid">
+                    <a href="/quiz/{{quiz.id}}" class="white">
+                        <button>Edit Quiz</button>
+                    </a>
+                </div>
+            </div>
+            <div class="col-4"/>
+            <div class="col">
+                <div class="button-solid">
+                    <button {{action 'submitQuiz'}}>Submit</button>
+                </div>
+            </div>
         </div>
+
+        {{#if fetchingResult}}
+            <h3> Fetching results ... wait a moment</h3>
+        {{/if}}
+        {{#if results}}
+            <div class="container-fluid">
+                <h3 align="center">Results</h3>
+                <b>Total Score : {{results.score}}</b>
+                <br>
+                {{#each results.questions as |quesResult|}}
+                    {{question-result res=quesResult}}
+                    <br>
+                {{/each}}
+            </div>
+        {{/if}}
     </div>
 </div>