Skip to content
Snippets Groups Projects
Commit bc390ee1 authored by Torbjørn Antonsen's avatar Torbjørn Antonsen
Browse files

Merge branch 'playquiz-changes' into 'main'

Playquiz changes

See merge request !49
parents 95c1c21d 616d3b4c
No related branches found
No related tags found
1 merge request!49Playquiz changes
Pipeline #270122 passed
...@@ -29,8 +29,9 @@ export default { ...@@ -29,8 +29,9 @@ export default {
} }
}, },
async mounted() { async mounted() {
await this.getUser(); // await this.getUser();
await this.setup(); // await this.setup();
this.quizId = this.$route.params.quizId;
this.getQuiz(); this.getQuiz();
await this.getQuestions(); await this.getQuestions();
}, },
...@@ -84,7 +85,6 @@ export default { ...@@ -84,7 +85,6 @@ export default {
alert("You must select an option") alert("You must select an option")
return; return;
} }
if (this.currentQuestionIndex < this.questions.length - 1) { if (this.currentQuestionIndex < this.questions.length - 1) {
this.hasAnswered = true; this.hasAnswered = true;
if (this.selectedOption === this.currentQuestion.answer) { if (this.selectedOption === this.currentQuestion.answer) {
...@@ -105,6 +105,7 @@ export default { ...@@ -105,6 +105,7 @@ export default {
} }
this.showPopup = true; this.showPopup = true;
this.buttonText = "Finish"; this.buttonText = "Finish";
this.popupMessage += "\nYour final score is: " + this.currentScore + " / " + this.totalScore
} }
}, },
...@@ -144,13 +145,12 @@ export default { ...@@ -144,13 +145,12 @@ export default {
<div id="current-q" class="question"> <div id="current-q" class="question">
<h3 v-if="currentQuestion">{{currentQuestionText}}</h3> <h3 v-if="currentQuestion">{{currentQuestionText}}</h3>
<ul>
<li v-for="(option, index) in currentAnswers" :key="index">
<label>{{ option }}</label>
<input type="radio" :id="option" :value="option" :checked="option === selectedOption" @change="selectOption(option)">
</li>
</ul> <div class="options">
<div class="option" :class="{ 'selected': selectedOption === option }" @click="selectOption(option)" v-for="(option, index) in currentAnswers" :key="index">
<label>{{ option }}</label>
</div>
</div>
<div v-if="showPopup" class="popup"> <div v-if="showPopup" class="popup">
<p>{{ popupMessage }}</p> <p>{{ popupMessage }}</p>
</div> </div>
...@@ -202,6 +202,28 @@ export default { ...@@ -202,6 +202,28 @@ export default {
</template> </template>
<style> <style>
.option {
font-size: 13px;
font-weight: bolder;
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.option:hover {
background-color: #f0f0f0;
}
.selected {
background-color: #4285f4; /* Change to the color you want for selected option */
color: #fff; /* Change text color for better visibility */
}
.quiz{ .quiz{
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
...@@ -231,6 +253,10 @@ export default { ...@@ -231,6 +253,10 @@ export default {
} }
.question{ .question{
letter-spacing: .13em; letter-spacing: .13em;
padding: 3%;
display: flex;
justify-content: center;
flex-direction: column;
} }
.choice{ .choice{
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment