Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/index.html

Last active March 13, 2022 12:18
Show Gist options
  • Save neno-tech/0281d8ac7f2b458c19f3d2cfc5d2134c to your computer and use it in GitHub Desktop.
Save neno-tech/0281d8ac7f2b458c19f3d2cfc5d2134c to your computer and use it in GitHub Desktop.
Download ZIP
การทำเว็บแอปแบบทดสอบง่ายๆ
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap');
*{font-family: 'Prompt'}
#frame {
height: 400px;
width: 400px;
background-color: white;
border: 3px solid black;
margin: 4px;
padding: 4px;
border-radius: 10px;
}
#center {
text-align: center;
color: black;
}
</style>
</head>
<body>
<div class = "row mt-4 justify-content-center">
<div id="frame">
<div id="center">
<h2>เว็บแอปแบบทดสอบ โดยครูอภิวัฒน์ วงศ์กัณหา</h2>
<hr />
<p id="comment"></p>
<hr />
<p id="question"></p>
<p id="options"></p>
<p id="button"></p>
</div>
</div>
</div>
<script>
// ------------------------------------ คำถาม 1 ---------------------------
var q01 = ["จงหาผลรวมของ 1 + 1 ?"];
var ch01 = [
`<input onclick=correct() name=btn01 type=radio /> 2 <br />
<input onclick=wrong() name=btn01 type=radio /> 4 <br />
<input onclick=wrong() name=btn01 type=radio /> 7 <br />`
];
// ------------------------------------ คำถาม 2 ---------------------------
var q02 = ["จงหาผลรวมของ 2 + 2 ?"];
var ch02 = [
`<input onclick=wrong() name=btn02 type=radio /> 3 <br />
<input onclick=correct() name=btn02 type=radio /> 4 <br />
<input onclick=wrong() name=btn02 type=radio /> 5 <br />`
];
// ------------------------------------ คำถาม 3 ---------------------------
var q03 = ["จงหาผลรวมของ 3 + 3 ?"];
var ch03 = [`
<input onclick=wrong() name=btn03 type=radio /> 8 <br />
<input onclick=wrong() name=btn03 type=radio /> 5 <br />
<input onclick=correct() name=btn03 type=radio /> 6 <br />`
];
// ------------------------------------ กำหนดตัวแปร ---------------------------
var score = 0;
function correct() {score++; }
function wrong() { }
// ------------------------------------ เริ่มสอบ ---------------------------
window.onload = function() {
comment.innerHTML = "แบบทดสอบก่อนเรียน";
question.innerHTML = "โปรดเลือกคำตอบที่ถูกต้องที่สุด";
options.innerHTML = "ข้อสอบมีทั้งหมด 3 ข้อ";
button.innerHTML = `<button type="button" class="btn btn-primary" onclick=ques01()>เริ่มสอบ</button>`;
}
// ------------------------------------ ข้อ 1 ---------------------------
function ques01() {
question.innerHTML = q01;
options.innerHTML = ch01;
comment.innerHTML = "ข้อที่ 1/3";
button.innerHTML = `<button type="button" class="btn btn-primary" onclick=ques02()>ข้อถัดไป</button>`;
}
// ------------------------------------ ข้อ 2 ---------------------------
function ques02() {
question.innerHTML = q02;
options.innerHTML = ch02;
comment.innerHTML = "ข้อที่ 2/3";
button.innerHTML = `<button type="button" class="btn btn-primary" onclick=ques03()>ข้อถัดไป</button>`;
}
// ------------------------------------ ข้อ 3 ---------------------------
function ques03() {
question.innerHTML = q03;
options.innerHTML = ch03;
comment.innerHTML = "ข้อที่ 3/3";
button.innerHTML = `<button type="button" class="btn btn-primary" onclick=summary()>ส่งคำตอบ</button>`;
}
// ------------------------------------ สรุปคะแนน ---------------------------
function summary() {
question.innerHTML = "คะแนนเต็ม 3 คะแนน";
options.innerHTML = "คุณทำได้: " + score + ' คะแนน';
comment.innerHTML = "สรุปผลการสอบ";
button.innerHTML = `<button type="button" class="btn btn-primary" onclick=restart()>เริ่มใหม่</button>`;
}
// ------------------------------------ เริ่มใหม่ ---------------------------
function restart() {
window.top.location="xxx"
}
</script>
</body>
</html>
Raw
index2.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap');
* {
font-family: 'Prompt'
}
#frame {
height: 450px;
width: 400px;
background-color: white;
border: 3px solid black;
margin: 4px;
padding: 4px;
border-radius: 10px;
}
input[type=button] {
width: 385px;
height: 2em;
}
input[type=button]:disabled {
opacity: 1
}
#center {
text-align: center;
color: black;
}
</style>
</head>
<div class="row mt-4 justify-content-center">
<div id="frame">
<div id="center">
<h2>เว็บแอปแบบทดสอบ</h2>
<hr />
<body onload="loadquestion()">
<form name="myform">
<label id="question">Question</label><br><br>
<input type="button" id="opt1" class="btn btn-warning" value="option1" name="opt1" onclick="checkans(1)"><br>
<input type="button" id="opt2" class="btn btn-warning" value="option2" name="opt2" onclick="checkans(2)"><br>
<input type="button" id="opt3" class="btn btn-warning" value="option3" name="opt3" onclick="checkans(3)"><br>
<input type="button" id="opt4" class="btn btn-warning" value="option4" name="opt4" onclick="checkans(4)"><br>
<input type="button" id="bt1" class="btn btn-primary" value="เริ่มใหม่" onclick="restart()">
</div>
</div>
</div>
<script>
let i=0;
let score=0;
let opt1 = document.getElementById("opt1")
let opt2 = document.getElementById("opt2")
let opt3 = document.getElementById("opt3")
let opt4 = document.getElementById("opt4")
// ------------------------------------ คำถาม---------------------------
let myqs=[["ผลรวมของ 1+1 ?","2","3","4","5","1"],
["ผลรวมของ 2+2 ?","3","4","5","6","2"],
["ผลรวมของ 3+3 ?","4","5","6","7","3"]
];
function loadquestion()
{
opt1.style.display = "block"
opt2.style.display = "block"
opt3.style.display = "block"
opt4.style.display = "block"
document.getElementById("bt1").style.display = "none"
document.getElementById("question").innerHTML=myqs[i][0];
myform.opt1.value=myqs[i][1];
myform.opt2.value=myqs[i][2];
myform.opt3.value=myqs[i][3];
myform.opt4.value=myqs[i][4];
}
function restart() {
window.top.location="xxx"
}
function next(){
i=i+1;
if(i<3){
loadquestion();
}else{
let summaryScore = "คุณทำได้ "+score +" คะแนน"
document.getElementById("question").innerHTML = "คุณทำแบบทดสอบครบทุกข้อแล้วจ้า"
opt1.value = "คะแนนเต็ม 3 คะแนน"
opt1.style.display = "block"
opt1.disabled = true;
opt2.style.display = "block"
opt2.disabled = true;
opt2.value = summaryScore;
opt3.style.display = "none"
opt4.style.display = "none"
document.getElementById("bt1").style.display = "block"
}
}
function checkans(select){
let ans=parseInt(myqs[i][5]);
if(ans==select)
{alert("ถูกต้อง! เก่งมากๆเลย");
score++
next()
}
else{
alert("เสียใจด้วย! พยายามใหม่นะ");
next()
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment