12-1
<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">

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
g{
	color: green
}	

#app{
	width: 400px;
	height: 300px;
	border: 1px solid #aaa;
	
	display: block;
	margin: auto;
	
	text-align: center;
}
</style>


<div id="app"  class="wow fadeInRight">

<div v-if='mode==0' >

	<br>
	<button @click="start">start(→)</button>	

</div>	


<div v-if='mode==1' >

	({{cnt+1}}/{{len}})<br>
	
	<span v-html="quiz[cnt]['q']"></span>	
	
	<span v-html="quiz[cnt]['j']" v-if="flg==0" ></span>	



	
	<hr>


	score2:{{score2}}<br>
	score2a:{{score2a}}<br>			
	total:{{total}}<br>	
	result:{{result}}<br>

</div>

<div v-if='mode==2'>
	mode-2<br>

	<button @click='start'>start</button>

</div>


<div v-if='debug'>



	<hr>

	
	


	mode:{{mode}}<br>


	{{keyNum}}<br>
</div>
</dir>



<script>
	
level=1
debug=0
timelimit=100


function newArray(x){
	let l=x.length
	out=[]
	for(i=0;i<l;i++){out.push(x[i]) }
	return out
}


new Vue({
	el:"#app",
	data:{
		
		mode:0,		
		debug:debug,
		quiz:[],
		len:0,
		cnt:0,
		score:[],
		score1:[],		
		score2:[],
		score2a:[],				
		total:[],
		totals:[],		
		result:[],
		keyNum:"--",
		flg:0,
		tm:0,
				
	},
	
	methods:{
		
		f1:function(){
			
			if(this.mode==0){
				tm1=setInterval(()=>this.tm++,timelimit)	
				this.mode=1			
				
			}else{
				
				this.score.push(this.flg)
				this.score2[this.cnt]=this.flg
				this.score2a=[]
				this.total[this.cnt]=this.total[this.cnt]+this.flg
				
				if( this.total[this.cnt]>level ){this.result[this.cnt]=1}
				
				
				if(this.cnt+1<this.len){
					this.cnt++
					this.score1=[]	
				}else{
					this.cnt=0
					this.score1=this.score
					this.score=[]
					this.score2a=this.score2
					this.score2=[]
					this.totals.push( newArray( this.total))
				}
				
				
				
				clearTimeout(tm1)
				this.tm=0
				tm1=setInterval(()=>this.tm++,timelimit)					
			}


		},	

			/*
			
			if(this.flg==0){x=1}
			else{x=0}
			
			clearTimeout(tm1)
			this.flg=0
			tm1=setTimeout(()=>this.flg=1,timelimit)
			

		
			this.score[this.cnt]=x
			this.score2[this.cnt]=x	
			this.total[this.cnt]=this.score2[this.cnt]+	this.total[this.cnt]
			if(this.total[this.cnt]>level){
				this.result[this.cnt]=1
			}

			let n1=this.result.indexOf(0,this.cnt+1)
			let n2=this.result.indexOf(0,0)			
			
			if(n1>-1){
				this.cnt=n1		
			}else{
				this.cnt=n2
				this.score1=this.score	
				this.score=[]			
				this.score2=Array(this.len).fill(0)
			}
			

	
			let n3=this.result.indexOf(0,0)
			
			if(n3<0){
				this.mode=2
				
			}
			*/

		//---------- end of f1() ---------
		
		reset:function(){
			this.mode=0
			this.score=[]
		},

		start:function(){
			this.mode=0	
			this.cnt=0
			this.flg=1
			this.f1()
			
			this.score2=[]		
			this.total=Array(this.len).fill(0)
	        this.result=Array(this.len).fill(0)					
		}, //----- end of start()-------
		
		keyAction(e){
			this.keyNum = e.keyCode			
			
			if(this.keyNum==39){ 
				if(this.mode==0){this.start()}
				else{this.f1()}  
			}
			
			if(this.keyNum==13){this.reset()}
		},  //  ----- end of keyAction(e) -----

	}, //-----  end of functions -------
	
	
	
	created() {window.addEventListener("keydown", this.keyAction)},
	beforeDestroy() {window.removeEventListener("keydown", this.keyAction)},
	
	mounted :function(){
		axios.get('e1.php')
          .then(response =>{ 
	          this.quiz=response.data
	          this.len=this.quiz.length})    
          .catch(error => console.log(error))
  	},
  	watch: {
  	  		tm:function(a,b){ 
	  	  		if(a<10){this.flg=1 }
	  	  		else{this.flg=0}
  	  		}
  	},  	
})
</script>