Commit b4c59ef2 authored by Ariyasuthan's avatar Ariyasuthan

Upload Front end

parent ddbf8f42
<template>
<TopBar></TopBar>
<div class="quiz">
<h5>Quiz</h5>
<div>
<Navbar></Navbar>
</div>
<div class="question-block">
<div class="question-box" v-for="(question,index) in showQuestions.slice(a,b)" :key="index" >
<div class="question">
<p1>{{question.question}}</p1>
</div>
<div class="box-propositions">
<ul>
<li v-for="(answer,index) in question.answer" :key="index" class="answers" >
<input class="ans-button" type="radio" id="one" :value="answer.ans" v-model="picked">
<label for="one">{{answer.ans}}</label><br>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="menu">
<div class="submit">
<button @click="nextQuestion">Next</button>
</div>
</div>
<div>
</div>
</template>
<script>
import axios from 'axios'
import Navbar from "../components/Navbar.vue"
import TopBar from "../components/TopBar.vue"
export default {
name: "JavaQuiz",
components:{
Navbar, TopBar
},
data(){
return {
questions: [] ,
AllQuestions:[],
showQuestions:[],
picked:[],
a:0,
b:1,
i:1
}
},
async beforeCreate(){
const result = await axios.get("https://3c39-35-194-244-161.ngrok.io/recommend")
const quesNum = result.data
const ques = []
quesNum.forEach((element) => {
let number = element.slice(1) //except the first character
ques.push(parseInt(number))
});
await fetch("http://localhost:3000/RecommendationQuestions-Java")
.then((response) => response.json())
.then((question) => {
for (var value of Object.values(question)) {
this.AllQuestions.push(value)
}
for(let i = 0; i < ques.length; i++) {
// Loop for array2
for(let j = 0; j < this.AllQuestions.length; j++) {
// Compare the element of each and
// every element from both of the
// arrays
if(ques[i] === this.AllQuestions[j].id) {
// Return if common element found
this.showQuestions.push({question:this.AllQuestions[j].question , answer:this.AllQuestions[j].answer})
}
}
}
});
console.log('success')
.catch(error => console.log(error))
},
methods:{
nextQuestion(){
var selected=[]
if ( this.i < this.showQuestions.length + 1) {
this.a=this.a+1;
this.b=this.b+1
// console.log(this.picked)
// console.log(this.i)
// console.log(selected)
selected.push({'id':this.i,'answer':this.picked})
}
// console.log(this.picked)
this.picked=''
this.i++;
if (this.i === this.showQuestions.length +1) {
this.$router.push('/');
}
},
onclick(evt) {
if (evt.target.checked) {
// console.log(this.picked)
return false;
}
return true;
}
}
}
</script>
<style scoped>
.quiz {
width: 100%;
height:100% !important ;
border: 1px solid #CCCCCC;
padding: 20px;
min-height: 100% !important;
min-width: 100% !important;
}
.question-block {
width:75% !important;
height: auto;
position:absolute ;
justify-content: center !important;
top: 420px ;
left: 5.0%;
margin: auto;
padding: 0 100px;
}
.question-box {
top: 30% !important;
margin: auto;
background: rgb(243, 239, 239);
border-radius: 20px;
transition: all .3s;
height: 230px;
width: 130% !important;
}
.question {
width: 50%;
text-align: center;
color:black !important;
}
.answers {
list-style: none;
text-align: left;
}
.ans-button{
left: 1% !important;
margin: 10px;
}
input:checked {
border: 6px solid rgb(38, 4, 160);
}
h5 {
font-size: xx-large;
font-weight: bolder;
color: rgb(53, 125, 233);
margin: 5px;
text-align: center;
padding: 5px 0 0 60px !important;
top: 10% !important;
}
.form-group {
text-align: left;
}
.submit button {
color: black;
background-color: rgb(12, 165, 211);
border: black;
left: 24% !important;
top: 670px;
position: absolute;
display: block;
width: 50px !important
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment