Upload Front end

Front End/ShowQuestions.vue

+<template>
+<TopBar></TopBar>
+<div class="show-questions">
+  <p>Questions</p>
+    <template v-for="n in showQuestions" :key="n" style="font-size:20px;">
+        {{n}}
+        <br />
+        <!-- <option v-for="n in subtopicsList.உயிரியல் " :key="n">{{n}}</option> -->
+    </template>
+  <!-- <h7>{{showQuestions}}</h7> -->
+  <div>
+  <router-link to="/quiz" style="color: blue; font-size: 25px; font-weight: bold;  ">next</router-link>
+  </div>
+  </div>
+</template>
+
+<script>
+// import axios from 'axios'
+import TopBar from "../components/TopBar.vue"
+
+export default {
+    
+    name: 'Show Questions',
+     components:{
+   TopBar
+ },
+
+    data(){
+        return{
+            questions: [] ,
+            AllQuestions:[],
+            showQuestions:[]
+        }
+    },
+    async beforeCreate(){
+             const result = await axios.get("https://8683-35-196-1-82.ngrok.io/predict")
+            //  this.questions=Object.values(result.data)
+                 const ques = result.data
+                 fetch("http://localhost:3000/RecommendationQuestions")
+                .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:{
+
+    }
+
+}
+</script>
+
+<style scoped>
+.show-questions{
+    max-height: 100%;
+    background-color: white !important;
+    border: black !important;
+    width: 60%;
+    justify-content: center !important;
+    left: 20% !important;
+    margin:5% 20% ;
+    border-radius: 8px;
+  
+    
+
+}
+p{
+    color: black;
+    font-size: 75px ;
+    position: relative;
+    font-weight: bolder;
+    
+
+}
+h7{
+    color: red;
+    position: relative;
+    font-size: 6vh ;
+    font-weight: bolder;
+}
+.router-link-text{
+    color: blue;
+    font-size: 2vh;
+    font-weight: bold;
+}
+
+</style>
\ No newline at end of file