Zero1000

Vue2.js(CDN)

11: today
1: CSS

1.

index.html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></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">
	{{cnt+1}}/{{l}}<br>
	
	{{quiz[cnt]}}<br>
	
	<button  @click='up'>up</button>

</div>


<div v-if="debug">
		<hr>
		
		today:{{today}}<br>
		quiz:{{quiz}}<br>
		out:{{out}}<br>
</div>

</div>






<script>


quiz=['dog','cat','bird','sheep']
l=quiz.length

today=[...Array(l)].map((v, i)=> i)




new Vue({

	el:"#app",
	data:{
		debug:0,
		out:'aaa',
		today:today,
		l:l,
		quiz:quiz,
		cnt:0,
		
	},
	mounted :function(){
		
		a=this.sort([1,2,3,4],[9,2,5,4])
	

		
		this.out=a
		
		
	
	},	
	
	
	
	methods:{
		
		up(){ 
			
			if(this.cnt+1<this.l){
				this.cnt++  
			}
			else{
				this.cnt=0
			}

			
		},
		
		sort(num,scr){
			
			data=[]
			l=num.length
			
			for(i=0;i<l;i++){
	
				data.push({n:num[i],s:scr[i]})
			}
			
			data.sort(this.compare)
			
			b=[]
			l=data.length
			
	

			for(i=0;i<data.length;i++){
				b.push(data[i].n)
			}
		
		
			

			
			return b
		},
		compare( a, b ){
			var r = 0;
			if( a.s < b.s ){ r = -1; }
			else if( a.s > b.s ){ r = 1; }

			return r;
		},
	},


});


</script>