|
19 | 19 | </v-row> |
20 | 20 | </v-alert> |
21 | 21 | </v-card-text> |
| 22 | + <v-card-text v-if="hasRightAnswer"> |
| 23 | + <v-alert prominent type="success" color="secondary darken-2"> |
| 24 | + <v-row align="center"> |
| 25 | + <v-col |
| 26 | + class="grow" |
| 27 | + >You got the right answer! Go ahead and review your code. When you're ready to submit go ahead and click "Submit Answer"</v-col> |
| 28 | + </v-row> |
| 29 | + </v-alert> |
| 30 | + </v-card-text> |
22 | 31 | <v-card-text> |
23 | 32 | <v-select v-bind="fields.language" v-model="fields.language.value" /> |
24 | 33 | <code-editor |
|
29 | 38 | </v-card-text> |
30 | 39 | <v-card-actions> |
31 | 40 | <v-spacer /> |
32 | | - <v-btn type="submit" :disabled="isSubmitting" large color="secondary darken-2">Submit Answer</v-btn> |
| 41 | + <v-btn |
| 42 | + :disabled="isSubmitting" |
| 43 | + large |
| 44 | + color="secondary darken-2" |
| 45 | + @click="checkAnswer" |
| 46 | + >Check Answer</v-btn> |
| 47 | + <v-btn |
| 48 | + type="submit" |
| 49 | + :disabled="isSubmitting || !hasRightAnswer " |
| 50 | + large |
| 51 | + color="secondary darken-2" |
| 52 | + >Submit Answer</v-btn> |
33 | 53 | </v-card-actions> |
34 | 54 | </v-form> |
35 | 55 | </v-card> |
@@ -64,6 +84,7 @@ output = calculateAnswer()`; |
64 | 84 | return { |
65 | 85 | isLoading: false, |
66 | 86 | isSubmitting: false, |
| 87 | + hasRightAnswer: false, |
67 | 88 | question: "", |
68 | 89 | rank: "", |
69 | 90 | asset: "", |
@@ -100,56 +121,70 @@ output = calculateAnswer()`; |
100 | 121 | } |
101 | 122 | }, |
102 | 123 | async mounted() { |
103 | | - await this.loadQuestion(); |
| 124 | + this.question = this.Quiz.question; |
| 125 | + this.rank = this.Quiz.rank; |
| 126 | + this.asset = this.Quiz.asset; |
104 | 127 | }, |
105 | 128 | methods: { |
106 | | - async submit() { |
| 129 | + async makeRequest(checkOnly) { |
| 130 | + const response = await api.quiz.submitFinal( |
| 131 | + this.fields.code.value, |
| 132 | + this.fields.language.value === "javascript" ? "js" : "py", |
| 133 | + checkOnly |
| 134 | + ); |
| 135 | + const isCorrect = response.correct; |
| 136 | +
|
| 137 | + if (isCorrect) { |
| 138 | + return true; |
| 139 | + } else { |
| 140 | + if (!!response.js_error) { |
| 141 | + return Promise.reject(response.js_error); |
| 142 | + } else { |
| 143 | + return Promise.reject( |
| 144 | + "Hmmm.... Your code doesn't seem to generate the correct answer. Try again." |
| 145 | + ); |
| 146 | + } |
| 147 | + } |
| 148 | + }, |
| 149 | + async checkAnswer() { |
107 | 150 | if (this.isSubmitting) { |
108 | 151 | return false; |
109 | 152 | } |
| 153 | + this.hasRightAnswer = false; |
| 154 | + this.errorMessage = false; |
110 | 155 | this.isSubmitting = true; |
111 | | - try { |
112 | | - const response = await api.quiz.submitFinal( |
113 | | - this.fields.code.value, |
114 | | - this.fields.language.value === "javascript" ? "js" : "py" |
115 | | - ); |
116 | | - const isCorrect = response.correct; |
117 | 156 |
|
118 | | - if (isCorrect) { |
119 | | - // await this.$store.dispatch("Quiz/clearWrongCount"); |
120 | | - // await api.auth.fetchState(); |
121 | | - // await this.$store.dispatch("Quiz/refresh"); |
122 | | - // this.showSuccessModal = true; |
123 | | - // this.fields.answer.successMessages = ["Your answer was correct!"]; |
124 | | - // this.fields.answer.success = true; |
| 157 | + try { |
| 158 | + const response = await this.makeRequest(true); |
| 159 | + if (response !== true) { |
| 160 | + return Promise.reject(response); |
125 | 161 | } else { |
126 | | - if (!!response.js_error) { |
127 | | - this.errorMessage = response.js_error; |
128 | | - } else { |
129 | | - this.errorMessage = |
130 | | - "Hmmm.... Your code doesn't seem to generate the correct answer. Try again."; |
131 | | - } |
| 162 | + this.hasRightAnswer = true; |
132 | 163 | } |
133 | 164 | } catch (err) { |
134 | | - if (err.status === 429) { |
135 | | - this.showRateLimitModal = true; |
136 | | - } else { |
137 | | - this.$store.dispatch("Snackbar/showError", err); |
138 | | - } |
| 165 | + this.errorMessage = err; |
139 | 166 | } |
140 | 167 | this.isSubmitting = false; |
141 | 168 | }, |
142 | | - async loadQuestion() { |
143 | | - this.isLoading = true; |
144 | | - await this.$store.dispatch("Quiz/refresh"); |
145 | | - if (this.Quiz.awaitNextQuestion) { |
146 | | - this.$router.push({ name: "quiz-countdown" }); |
147 | | - } else { |
148 | | - this.question = this.Quiz.question; |
149 | | - this.rank = this.Quiz.rank; |
150 | | - this.asset = this.Quiz.asset; |
| 169 | + async submit() { |
| 170 | + if (this.isSubmitting) { |
| 171 | + return false; |
151 | 172 | } |
152 | | - this.isLoading = false; |
| 173 | + this.hasRightAnswer = false; |
| 174 | + this.errorMessage = false; |
| 175 | + this.isSubmitting = true; |
| 176 | +
|
| 177 | + try { |
| 178 | + const response = await this.makeRequest(false); |
| 179 | + if (response !== true) { |
| 180 | + return Promise.reject(response); |
| 181 | + } else { |
| 182 | + this.$router.go(); |
| 183 | + } |
| 184 | + } catch (err) { |
| 185 | + this.errorMessage = err; |
| 186 | + } |
| 187 | + this.isSubmitting = false; |
153 | 188 | } |
154 | 189 | }, |
155 | 190 | computed: { |
|
0 commit comments