마카로닉스

1781 No

Vue.js 3 퀴즈 맞추기 (라디오 버튼 사용법 , 파일 읽기) , components , FileReader

2021-11-12 06:48:41 By 라이트 0 658 댓글수 4 포스트 하기

12월 2025
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

<!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 &nbsp;
                <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":""}

]

vue