Zero1000

Vue2.js(FlashCard)

10: 暗記カード(Proto-1)
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
}	

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


<div id="app" >

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

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

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

</div>	


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

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


</div>

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

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

</div>

</div>


<div v-if='debug'>
	<hr>
	score:{{score}}<br>
	score1:{{score1}}<br>	
	score2:{{score2}}<br>
			
	total:{{total}}<br>	
	result:{{result}}<br>	
	mode:{{mode}}<br>
	{{tm}}

</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==1){	this.f1a()	} // 回答・next
			else{this.f1b()}　//  Quiz開始
		},

		f1b:function(){
			this.tm=0
			tm1=setInterval(()=>this.tm++,timelimit)	
			this.mode=1	
		},
		
		f1a: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==0){
			
				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)
			
		}, //---------- end of f1() ---------
		
		reset:function(){
			this.mode=0
			this.score=[]
		},

		start:function(){
			this.mode=0	
			this.cnt=0
			this.flg=1

			this.score=[]				
			this.score1=[]
			this.score2=[]		
			this.total=Array(this.len).fill(0)
	        this.result=Array(this.len).fill(0)	
	        
	        this.f1()	
	        			
		}, //----- end of start()-------
		
		keyAction(e){
			this.keyNum = e.keyCode			
			
			if(this.keyNum==39){ 
				if(this.mode==1){this.f1()} 
				else{this.start()}
 
			}
			
			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>