<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue3</title> <script src="https://unpkg.com/vue@next"></script> <style> .v-move{ transition: transform 1s; } .div-list{ margin-bottom: 10px; } .p1{ width: 500px;padding:10px; background-color: bisque; } .p2{ width: 500px; padding:10px; top: -16px; position: relative; background-color: aliceblue; } </style> </head> <body> <h2>퀴즈 맞추기</h2> <div id="app"> <transition-group> <div class="div-list" v-for="(item, index) in dataArray" :key="item.no" > <my-product :object="item"></my-product> </div> </transition-group> <p> <button @click="submitYourAnswer">정답 제출하기</button> </p> <p v-show="isResultShow"> 총득점 : {{totalJumSu}} </p> <input type="file" @change="loadData"> </div> <script> const Mycomponent={ props:['object'], template:` <p class="p1" >문제 {{index}}. {{object.question}} (배점: {{object.point}})</p> <p class="p2" >정답: <input type="radio" value="true" v-model="object.userAnswer"> O <input type="radio" value="false" v-model="object.userAnswer"> X </p> ` }; const app = { data() { return { totalJumSu:0, dataArray:[ {"no":1, "question" :"1+1=2 입니다. ","point":1 , "answer": "true" , "userAnswer":""}, {"no":2, "question" :"2+2는 4입니다.", "point":2 , "answer": "true", "userAnswer":""}, {"no":3, "question" :"3+3는 7입니다","point":4 , "answer": "false" , "userAnswer":""}, {"no":4, "question" :"4+4는 9입니다.","point":13 , "answer": "false" ,"userAnswer":""}, {"no":5, "question" :"5+5는 10입니다.","point":22 , "answer": "true", "userAnswer":""} ], isResultShow:false } }, components: { 'my-product':Mycomponent }, methods: { submitYourAnswer(){ let score=0; for(let i=0; i<this.dataArray.length; i++){ console.log( i + " _: " + this.dataArray[i].userAnswer); if(this.dataArray[i].userAnswer==this.dataArray[i].answer){ score +=this.dataArray[i].point; } } this.totalJumSu=score; this.isResultShow=true; }, loadData(e){ const file=e.target.files[0]; if(file){ const reader=new FileReader(); const thisParent=this; reader.onload=function(e){ const json=JSON.parse(e.target.result); thisParent.dataArray=json; } reader.readAsText(file); } } }, } Vue.createApp(app).mount('#app'); </script> </body> </html>
upload.json
[ {"no":1, "question" :"1+1=2 입니다. ","point":1 , "answer": "true" , "userAnswer":""}, {"no":2, "question" :"2+2는 4입니다.", "point":2 , "answer": "true", "userAnswer":""}, {"no":3, "question" :"3+3는 7입니다","point":4 , "answer": "false" , "userAnswer":""}, {"no":4, "question" :"4+4는 9입니다.","point":13 , "answer": "false" ,"userAnswer":""}, {"no":5, "question" :"5+5는 10입니다.","point":22 , "answer": "true", "userAnswer":""} ]
댓글 ( 4)
댓글 남기기