Upload Front end

Front End/JavaQuiz.vue

+<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>