Zero1000

Score-Vue

13:
1: quizの原型

1. 基本形

index.html
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">



<dir id="app">
{{cnt+1}}/{{len}}<br>


<h4 v-html=quiz[cnt].q > </h4>


<li v-for="(q,i) in quiz[cnt].a">

<button @click="bt(i)">{{q}}</button>

</li>




<hr>
{{quiz[cnt].c}}<br>
<button @click="up">up</button>


</dir>


<script>

new Vue({
	el:"#app",
	data:{
		cnt:0,
		quiz:[],		
	},
	
	methods:{
		up:function(){this.cnt +=1},
		
		bt:function(x){
	
			if( x==this.quiz[this.cnt].c  ){this.ok() }
			
			else{this.ng()}
			
		},
		
		ok:function(x){
			
			$('#app').addClass('animated fadeInRight')
			.one('animationend', function (){  $('#app').removeClass('animated fadeInRight')})

			
			if(this.cnt+1<this.len){
			this.cnt +=1}
			else{
				this.cnt=0
			}
		},
		
		ng:function(){
			
			$('#app').addClass('animated shake')
			.one('animationend', function (){  $('#app').removeClass('animated shake')})
			
		},		
	},
	
	mounted :function(){
	
		axios.get('https://zero1000.mixh.jp/quiz')
        .then(response => this.quiz=response.data )
        .catch(error => console.log(error))
        
        //this.len=this.quiz.length  
  	},
  	
  	
  	computed: {
      
    len: function() {
        return this.quiz.length
    }
  }
  	
})
</script>