htdoc/htdocs_old/course3/function.js

function nextPage(code,num){
	saveRecord(code);
	setTimeout(1500,location.replace(num+'.php'));
}
function nextPage2(code,url){
	saveRecord(code);
	setTimeout(1500,location.replace(url));
}
function selectItem(ans,num,check){
	if(!isStop){
		saveRecord(ans);
		saveRecord(250);
		document.getElementById("status").setAttribute('src', "image/check.jpg");
		document.getElementById("status").style.display="inline";
		document.getElementById("selectItem1").style.display="none";
		document.getElementById("selectItem2").style.display="none";
		document.getElementById("selectItem3").style.display="none";
		
		if(num == 4)
			document.getElementById("selectItem4").style.display="none";

		setTimeout(
			function(){
				saveRecord(check);
				if(check==200){
					error++;
					if(error==1){ //錯誤次數
						document.getElementById("status").setAttribute('src', "image/wrongnext.jpg");
						document.getElementById("status").style.display="inline";
						document.getElementById("buttonPrev").style.display="inline";
						document.getElementById("buttonNext").style.display="inline";
						document.getElementById("selectItem1").style.display="inline";
						document.getElementById("selectItem2").style.display="inline";
						document.getElementById("selectItem3").style.display="inline";
						if(num == 4)
							document.getElementById("selectItem4").style.display="inline";
						isStop = true;
					}
					else{
						document.getElementById("status").setAttribute('src', "image/retry.jpg");
						document.getElementById("status").style.display="inline";
						setTimeout(
							function(){
								document.getElementById("status").setAttribute('src', "");
								document.getElementById("status").style.display="none";
							},3000);
					}
				}
				else{
					document.getElementById("status").setAttribute('src', "image/correct.jpg");
					document.getElementById("status").style.display="inline";
					document.getElementById("buttonPrev").style.display="inline";
					document.getElementById("buttonNext").style.display="inline";
					document.getElementById("selectItem1").style.display="inline";
					document.getElementById("selectItem2").style.display="inline";
					document.getElementById("selectItem3").style.display="inline";
					if(num == 4)
						document.getElementById("selectItem4").style.display="inline";
					isStop = true;
				}
			},3000);
	}
}

function dragPic(){
	dragTime = Math.floor(Date.now() / 1000);
}

function rotatePic(top,bottom,value,direction){
	if(direction == 8){
		rotateX = rotateX + value;
		if(rotateX == 90){
			rotateX = rotateX + value;
			saveRecordr(300,value*2,0,0,0);
		}
		else if(rotateX == 270){
			rotateX = rotateX + value;
			saveRecordr(300,value*2,0,0,0);
		}
		else if(rotateX == 360){
			rotateX = 0;
			saveRecordr(300,value,0,0,0);
		}
		else{
			saveRecordr(300,value,0,0,0);
		}
	}
	else if(direction == 2){
		rotateX = rotateX - value;
		if(rotateX == -90){
			rotateX = rotateX - value;
			saveRecordr(350,-value*2,0,0,0);
		}
		else if(rotateX == -270){
			rotateX = rotateX - value;
			saveRecordr(350,-value*2,0,0,0);
		}
		else if(rotateX == -360){
			rotateX = 0;
			saveRecordr(350,-value,0,0,0);
		}
		else {
			saveRecordr(350,-value,0,0,0);
		}
	}
	else if(direction == 4){
		rotateY = rotateY + value;
		if(rotateY == 90){
			rotateY = rotateY + value;
			saveRecordr(400,0,value*2,0,0);
		}
		else if(rotateY == 270){
			rotateY = rotateY + value;
			saveRecordr(400,0,value*2,0,0);
		}
		else if(rotateY == 360){
			rotateY = 0;
			saveRecordr(400,0,value,0,0);
		}
		else{
			saveRecordr(400,0,value,0,0);
		}
	}
	else if(direction == 6){
		rotateY = rotateY - value;
		if(rotateY == -90){
			rotateY = rotateY - value;
			saveRecordr(450,0,-value*2,0,0);
		}
		else if(rotateY == -270){
			rotateY = rotateY - value;
			saveRecordr(450,0,-value*2,0,0);
		}
		else if(rotateY == -360){
			rotateY = 0;
			saveRecordr(450,0,-value,0,0);
		}
		else{
			saveRecordr(450,0,-value,0,0);
		}
	}
	else if(direction == 7){
		rotateZ = rotateZ - value;
		if(rotateZ == -90){
			rotateZ = rotateZ - value;
			saveRecordr(550,0,0,-value*2,0);
		}
		else if(rotateZ == -270){
			rotateZ = rotateZ - value;
			saveRecordr(550,0,0,-value*2,0);
		}
		else if(rotateZ == -360){
			rotateZ = 0;
			saveRecordr(550,0,0,-value,0);
		}else{
			saveRecordr(550,0,0,-value,0);
		}
	}
	else if(direction == 9){
		rotateZ = rotateZ + value;
		if(rotateZ == 90){
			rotateZ = rotateZ + value;
			saveRecordr(500,0,0,value*2,0);
		}	
		else if(rotateZ == 270){
			rotateZ = rotateZ + value;
			saveRecordr(500,0,0,value*2,0);
		}
		else if(rotateZ == 360){
			rotateZ = 0;
			saveRecordr(500,0,0,value,0);
		}
		else{
			saveRecordr(500,0,0,value,0);
		}
	}
	else if(direction == 1){
		if(scale<top){
			scale += 0.1 ;
			saveRecordr(301,0,0,0,0.1);
		}
	}
	else if(direction == 3){
		if(scale>bottom){
			scale -= 0.1 ;
			saveRecordr(302,0,0,0,-0.1);
		}
	}
	document.getElementById("picA").style.transform = 'rotateX('+rotateX+'deg)rotateY('+rotateY+'deg)rotateZ('+rotateZ+'deg)scale('+scale+','+scale+')';
	document.getElementById("picB").style.transform = 'rotateX('+rotateX+'deg)rotateY('+rotateY+'deg)rotateZ('+rotateZ+'deg)scale('+scale+','+scale+')';
}

function checkAns(x){
	jigsawPage=x;

	switch(jigsawPage){
		case 310:
			if(!picAisdroped || !picBisdroped || !picCisdroped || !picDisdroped || isStop)
			return;

			saveRecord(250);
			document.getElementById("status").setAttribute('src', "image/check.jpg");
			document.getElementById("status").style.display="inline";
			document.getElementById("chkButton").style.display="none";
			document.getElementById("picA").style.display="none";
			document.getElementById("picB").style.display="none";
			document.getElementById("picC").style.display="none";
			document.getElementById("picD").style.display="none";

			setTimeout(
				function(){
					if(!isStop){
						if (answer1==3 && answer2==1 && answer3==2 && answer4==4){
							saveRecord(100);
							document.getElementById("status").setAttribute('src', "image/correct.jpg");
							document.getElementById("status").style.display="inline";
							document.getElementById("buttonPrev").style.display="inline";
							document.getElementById("buttonNext").style.display="inline";
							document.getElementById("picA").style.display="inline";
							document.getElementById("picB").style.display="inline";
							document.getElementById("picC").style.display="inline";
							document.getElementById("picD").style.display="inline";
							isStop = true;
						}
						else{
							error++;
							saveRecord(200);
							if(error==1){
								document.getElementById("status").setAttribute('src', "image/wrongnext.jpg");
								document.getElementById("status").style.display="inline";
								document.getElementById("buttonPrev").style.display="inline";
								document.getElementById("buttonNext").style.display="inline";
								document.getElementById("picA").style.display="inline";
								document.getElementById("picB").style.display="inline";
								document.getElementById("picC").style.display="inline";
								document.getElementById("picD").style.display="inline";
								isStop = true;
							}
							else{
								document.getElementById("status").setAttribute('src', "image/retry.jpg");
								document.getElementById("status").style.display="inline";
								answer1=0;
								answer2=0;
								answer3=0;
								answer4=0;
								picAisdroped = false;
								picBisdroped = false;
								picCisdroped = false;
								picDisdroped = false;
								document.getElementById("picA").style.top = 476;
								document.getElementById("picA").style.left = 185;
								document.getElementById("picB").style.top = 476;
								document.getElementById("picB").style.left = 316;
								document.getElementById("picC").style.top = 476;
								document.getElementById("picC").style.left = 450;
								document.getElementById("picD").style.top = 476;
								document.getElementById("picD").style.left = 582;

								setTimeout(
									function(){
										document.getElementById("status").setAttribute('src', "");
										document.getElementById("status").style.display="none";
									},3000);
							}
						}
					}
				},3000);

			break;
		case 314:
			if(answer1==0)
				return;

			saveRecord(250);
			document.getElementById("status").setAttribute('src', "image/check.jpg");
			document.getElementById("status").style.display="inline";
			document.getElementById("chkButton").style.display="none";
			document.getElementById("picA").style.display="none";
			document.getElementById("picB").style.display="none";
			document.getElementById("picC").style.display="none";
			document.getElementById("picD").style.display="none";

			setTimeout(
				function(){
					if(!isStop){
						if (answer1==3){
							saveRecord(100);
							document.getElementById("status").setAttribute('src', "image/correct.jpg");
							document.getElementById("status").style.display="inline";
							document.getElementById("buttonPrev").style.display="inline";
							document.getElementById("buttonNext").style.display="inline";
							document.getElementById("picA").style.display="inline";
							document.getElementById("picB").style.display="inline";
							document.getElementById("picC").style.display="inline";
							document.getElementById("picD").style.display="inline";
								isStop = true;
						}
						else{
							error++;
							saveRecord(200);
							if(error==1){
								document.getElementById("status").setAttribute('src', "image/wrongnext.jpg");
								document.getElementById("status").style.display="inline";
								document.getElementById("buttonPrev").style.display="inline";
								document.getElementById("buttonNext").style.display="inline";
								document.getElementById("picA").style.display="inline";
								document.getElementById("picB").style.display="inline";
								document.getElementById("picC").style.display="inline";
								document.getElementById("picD").style.display="inline";
								isStop = true;
							}
							else{
								document.getElementById("status").setAttribute('src', "image/retry.jpg");
								document.getElementById("status").style.display="inline";
								answer1=0;
								picAisdroped = false;
								picBisdroped = false;
								picCisdroped = false;
								picDisdroped = false;
								document.getElementById("picA").style.top = 380;
								document.getElementById("picA").style.left = 10;
								document.getElementById("picB").style.top = 380;
								document.getElementById("picB").style.left = 200;
								document.getElementById("picC").style.top = 380;
								document.getElementById("picC").style.left = 390;
								document.getElementById("picD").style.top = 380;
								document.getElementById("picD").style.left = 580;
								setTimeout(
									function(){
										document.getElementById("status").setAttribute('src', "");
										document.getElementById("status").style.display="none";
									},3000);
							}
						}
					}
				},3000);

			break;
		case 511:
			if(!picAisdroped || !picBisdroped || !picCisdroped || !picDisdroped || isStop)
			return;
			
			saveRecord(250);
			document.getElementById("status").setAttribute('src', "image/check.jpg");
			document.getElementById("status").style.display="inline";
			document.getElementById("chkButton").style.display="none";
			document.getElementById("picA").style.display="none";
			document.getElementById("picB").style.display="none";
			document.getElementById("picC").style.display="none";
			document.getElementById("picD").style.display="none";
			
			setTimeout(
				function(){
					if(!isStop){
						if (answer1==3 && answer2==1 && answer3==4 && answer4==2){
							saveRecord(100);
							document.getElementById("status").setAttribute('src', "image/correct.jpg");
							document.getElementById("status").style.display="inline";
							document.getElementById("buttonPrev").style.display="inline";
							document.getElementById("buttonNext").style.display="inline";
							document.getElementById("picA").style.display="inline";
							document.getElementById("picB").style.display="inline";
							document.getElementById("picC").style.display="inline";
							document.getElementById("picD").style.display="inline";
							isStop = true;
						}
						else{
							error++;
							saveRecord(200);
							if(error==1){
								document.getElementById("status").setAttribute('src', "image/wrongnext.jpg");
								document.getElementById("status").style.display="inline";
								document.getElementById("buttonPrev").style.display="inline";
								document.getElementById("buttonNext").style.display="inline";
								document.getElementById("picA").style.display="inline";
								document.getElementById("picB").style.display="inline";
								document.getElementById("picC").style.display="inline";
								document.getElementById("picD").style.display="inline";
								isStop = true;
							}
							else{
								document.getElementById("status").setAttribute('src', "image/retry.jpg");
								document.getElementById("status").style.display="inline";
								answer1=0;
								answer2=0;
								answer3=0;
								answer4=0;
								picAisdroped = false;
								picBisdroped = false;
								picCisdroped = false;
								picDisdroped = false;
								document.getElementById("picA").style.top = 440;
								document.getElementById("picA").style.left = 10;
								document.getElementById("picB").style.top = 440;
								document.getElementById("picB").style.left = 160;
								document.getElementById("picC").style.top = 440;
								document.getElementById("picC").style.left = 310;
								document.getElementById("picD").style.top = 440;
								document.getElementById("picD").style.left = 460;

								setTimeout(
									function(){
										document.getElementById("status").setAttribute('src', "");
										document.getElementById("status").style.display="none";
									},3000);
							}
						}
					}
				},3000);
			
			break;
		case 606:
			if(answer1==0)
				return;
			
			saveRecord(250);
			document.getElementById("status").setAttribute('src', "image/check.jpg");
			document.getElementById("status").style.display="inline";
			document.getElementById("chkButton").style.display="none";
			document.getElementById("picA").style.display="none";
			document.getElementById("picB").style.display="none";
			
			setTimeout(
				function(){
					if(!isStop){
						if (answer1==6){
							saveRecord(100);
							document.getElementById("status").setAttribute('src', "image/correct.jpg");
							document.getElementById("status").style.display="inline";
							document.getElementById("buttonPrev").style.display="inline";
							document.getElementById("buttonNext").style.display="inline";
							document.getElementById("picA").style.display="inline";
							document.getElementById("picB").style.display="inline";
							document.getElementById("picC").style.display="inline";
							document.getElementById("picD").style.display="inline";
							document.getElementById("picE").style.display="inline";
							document.getElementById("picF").style.display="inline";
							isStop = true;
						}
						else{
							error++;
							saveRecord(200);
							if(error==1){
								document.getElementById("status").setAttribute('src', "image/wrongnext.jpg");
								document.getElementById("status").style.display="inline";
								document.getElementById("buttonPrev").style.display="inline";
								document.getElementById("buttonNext").style.display="inline";
								document.getElementById("picA").style.display="inline";
								document.getElementById("picB").style.display="inline";
								document.getElementById("picC").style.display="inline";
								document.getElementById("picD").style.display="inline";
								document.getElementById("picE").style.display="inline";
								document.getElementById("picF").style.display="inline";
								isStop = true;
							}
							else{
								document.getElementById("status").setAttribute('src', "image/retry.jpg");
								document.getElementById("status").style.display="inline";
								answer1=0;
								picAisdroped = false;
								picBisdroped = false;
								picCisdroped = false;
								picDisdroped = false;
								picEisdroped = false;
								picFisdroped = false;
								document.getElementById("picA").style.top = 380;
								document.getElementById("picA").style.left = 20;
								document.getElementById("picB").style.top = 380;
								document.getElementById("picB").style.left = 150;
								document.getElementById("picC").style.top = 380;
								document.getElementById("picC").style.left = 300;
								document.getElementById("picD").style.top = 380;
								document.getElementById("picD").style.left = 420;
								document.getElementById("picE").style.top = 380;
								document.getElementById("picE").style.left = 570;
								document.getElementById("picF").style.top = 380;
								document.getElementById("picF").style.left = 710;

								setTimeout(
									function(){
										document.getElementById("status").setAttribute('src', "");
										document.getElementById("status").style.display="none";
									},3000);
								}
						}
					}
				},3000);
				
			
			break;
		case 609:
			if(answer1==0)
				return;
			
			saveRecord(250);
			document.getElementById("status").setAttribute('src', "image/check.jpg");
			document.getElementById("status").style.display="inline";
			document.getElementById("chkButton").style.display="none";
			document.getElementById("picA").style.display="none";
			document.getElementById("picB").style.display="none";
			document.getElementById("picC").style.display="none";
			document.getElementById("picD").style.display="none";
			document.getElementById("picE").style.display="none";
			document.getElementById("picF").style.display="none";
			
			setTimeout(
				function(){
					if(!isStop){
						if (answer1==2){
							saveRecord(100);
							document.getElementById("status").setAttribute('src', "image/correct.jpg");
							document.getElementById("status").style.display="inline";
							document.getElementById("buttonPrev").style.display="inline";
							document.getElementById("buttonNext").style.display="inline";
							document.getElementById("picA").style.display="inline";
							document.getElementById("picB").style.display="inline";
							document.getElementById("picC").style.display="inline";
							document.getElementById("picD").style.display="inline";
							document.getElementById("picE").style.display="inline";
							document.getElementById("picF").style.display="inline";
							isStop = true;
						}
						else{
							error++;
							saveRecord(200);
							if(error==1){
								document.getElementById("status").setAttribute('src', "image/wrongnext.jpg");
								document.getElementById("status").style.display="inline";
								document.getElementById("buttonPrev").style.display="inline";
								document.getElementById("buttonNext").style.display="inline";
								document.getElementById("picA").style.display="inline";
								document.getElementById("picB").style.display="inline";
								document.getElementById("picC").style.display="inline";
								document.getElementById("picD").style.display="inline";
								document.getElementById("picE").style.display="inline";
								document.getElementById("picF").style.display="inline";
								isStop = true;
							}
							else{
								document.getElementById("status").setAttribute('src', "image/retry.jpg");
								document.getElementById("status").style.display="inline";
								answer1=0;
								picAisdroped = false;
								picBisdroped = false;
								picCisdroped = false;
								picDisdroped = false;
								picEisdroped = false;
								picFisdroped = false;
								document.getElementById("picA").style.top = 380;
								document.getElementById("picA").style.left = 10;
								document.getElementById("picB").style.top = 380;
								document.getElementById("picB").style.left = 160;
								document.getElementById("picC").style.top = 380;
								document.getElementById("picC").style.left = 300;
								document.getElementById("picD").style.top = 380;
								document.getElementById("picD").style.left = 420;
								document.getElementById("picE").style.top = 380;
								document.getElementById("picE").style.left = 570;
								document.getElementById("picF").style.top = 380;
								document.getElementById("picF").style.left = 700;

								setTimeout(
									function(){
										document.getElementById("status").setAttribute('src', "");
										document.getElementById("status").style.display="none";
									},3000);
							}
						}
					}
				},3000);
			break;
		case 612:
			if(answer1==0)
				return;
			
			saveRecord(250);
			document.getElementById("status").setAttribute('src', "image/check.jpg");
			document.getElementById("status").style.display="inline";
			document.getElementById("chkButton").style.display="none";
			document.getElementById("picA").style.display="none";
			document.getElementById("picB").style.display="none";
			document.getElementById("picC").style.display="none";
			document.getElementById("picD").style.display="none";
			document.getElementById("picE").style.display="none";
			document.getElementById("picF").style.display="none";
			
			setTimeout(
				function(){
					if(!isStop){
						if (answer1==3){
							saveRecord(100);
							document.getElementById("status").setAttribute('src', "image/correct.jpg");
							document.getElementById("status").style.display="inline";
							document.getElementById("buttonPrev").style.display="inline";
							document.getElementById("buttonNext").style.display="inline";
							document.getElementById("picA").style.display="inline";
							document.getElementById("picB").style.display="inline";
							document.getElementById("picC").style.display="inline";
							document.getElementById("picD").style.display="inline";
							document.getElementById("picE").style.display="inline";
							document.getElementById("picF").style.display="inline";
							isStop = true;
						}
						else{
							error++;
							saveRecord(200);
							if(error==1){
								document.getElementById("status").setAttribute('src', "image/wrongnext.jpg");
								document.getElementById("status").style.display="inline";
								document.getElementById("buttonPrev").style.display="inline";
								document.getElementById("buttonNext").style.display="inline";
								document.getElementById("picA").style.display="inline";
								document.getElementById("picB").style.display="inline";
								document.getElementById("picC").style.display="inline";
								document.getElementById("picD").style.display="inline";
								document.getElementById("picE").style.display="inline";
								document.getElementById("picF").style.display="inline";
								isStop = true;
							}
							else{
								document.getElementById("status").setAttribute('src', "image/retry.jpg");
								document.getElementById("status").style.display="inline";
								answer1=0;
								picAisdroped = false;
								picBisdroped = false;
								picCisdroped = false;
								picDisdroped = false;
								picEisdroped = false;
								picFisdroped = false;
								document.getElementById("picA").style.top = 380;
								document.getElementById("picA").style.left = 0;
								document.getElementById("picB").style.top = 380;
								document.getElementById("picB").style.left = 160;
								document.getElementById("picC").style.top = 380;
								document.getElementById("picC").style.left = 270;
								document.getElementById("picD").style.top = 380;
								document.getElementById("picD").style.left = 440;
								document.getElementById("picE").style.top = 380;
								document.getElementById("picE").style.left = 570;
								document.getElementById("picF").style.top = 380;
								document.getElementById("picF").style.left = 700;

								setTimeout(
									function(){
										document.getElementById("status").setAttribute('src', "");
										document.getElementById("status").style.display="none";
									},3000);
							}
						}
					}
				},3000);
			break;
	}
}
function saveRecord(code){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000));
}
function saveRecordHTML5(obj){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	var code = obj.code;
	var rotX = obj.rotX;
	var rotY = obj.rotY;
	var rotZ = obj.rotZ;
	var rotS = obj.rotS;
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000) + "&rotx="+rotX+"&roty="+rotY+"&rotz="+rotZ+"&scale="+rotS);
}

function saveRecords(code,time){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&dragtime=" + time);
}

function saveRecordr(code,rotX,rotY,rotZ,rotS){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000) + "&rotx="+rotX+"&roty="+rotY+"&rotz="+rotZ+"&scale="+rotS);
}