Zero1000

Vue2.js(FlashCard)

13: nextCnt
1: デバッグ中

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

<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>
	
	<h3 v-html="quiz[cnt]['q']"></h3>	
	
	<span v-html="quiz[cnt]['j']" v-if="flg==0" ></span>		



</div>

<div v-if='mode==2'>
	<h2>Finished!!</h2>

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

</div>


<div v-if='debug'>
	<hr>
	score2:{{score2}}<br>
	score2a:{{score2a}}<br>			
	total:{{total}}<br>	
	result:{{result}}<br>
	next0:{{next0}}<br>
	next1:{{next1}}<br>	
	
	
	mode:{{mode}}<br>
	{{keyNum}}<br>
</div>

</div>



<script>	
level=2
debug=0
timelimit=200


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,
		next0:0,
		next1:0,					
	},
	
	methods:{
		
		f1:function(){
			
			new WOW().init();
			
			if(this.mode==0){	this.f1a()	} // Quiz開始
			else{this.f1b()}　// 回答・next
		},

		f1a:function(){
			tm1=setInterval(()=>this.tm++,timelimit)	
			this.mode=1	
		},
		
		f1b:function(){
			
			// ----- score 演算　---
			
			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}
			
			//  --- next cnt ----

			var r2 = this.result.filter((r)=> {return r==0 });
			


			var n0=this.result.indexOf(0,0)				
			var n1=this.result.indexOf(0,this.cnt+1)
			
			this.next0=n0
			this.next1=n1			
			
			if(r2.length==1){
			
				this.mode=2
			
			}else if(n0<0){
			
				this.mode=2
			
			}else if(n1>-1){
				this.cnt=n1
				this.score1=[]	
			}else{
				this.cnt=n0
				this.score1=this.score
				this.score=[]
				this.score2a=this.score2
				this.score2=[]
				this.totals.push( newArray( this.total))
			}
			
			//  ---- timer 開始 ------
			
			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>