ในตัวอย่างนี้เราขอนำเสนอ การสร้าง ฟอร์ม HTML ตัวเลือกแบบสอบถามอย่างง่าย ๆ ซึ่งจะใช้ input ที่ มี Type เป็น radio โดยเราจะเพิ่มการแสดง Progress Bar
เปอร์เซ็นต์ การ เลือก ตอบคำถาม ว่าผู้ตอบคำถามได้ตอบคำถามไปแล้วกี่เปอร์เซ็นต์
สามารถนำไปประยุกต์ใช้กับการกรอกแบบฟอร์มในรูปแบบต่าง ๆ ได้
ไปดูตัวอย่างกันเลย Demo Form Progress Bar
มาเริ่มกันเลย
1.สร้างไฟล์ index.html นำเข้า javascript และ Css ที่จำเป็น
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Question Progress</title>
<!-- นำเข้า Css Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
</div>
<!-- นำเข้า ไฟล์ JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2.เพิ่มเติมไฟล์ index.html เรียกใช้ class progress-bar จาก Bootstrap และ สร้างฟอร์ม Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Question Progress</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.question-table{
text-align:center;
}
.question-title{
text-align:left;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12">
<h3>EX Question Progress Bar</h3>
<hr>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100" style="min-width: 4em;width: 0%;">
0 %
</div>
</div>
<form id="question-form">
<table class="table table-bordered question-table">
<tbody>
<tr>
<td rowspan="2" width="70">ลำดับ</td>
<td rowspan="2" width="280">เนื้อหา</td>
<td colspan="5" height="25" width="450">ระดับความพึงพอใจของผู้เรียน</td>
</tr>
<tr>
<td height="25" width="90" >มากที่สุด</td>
<td width="90">มาก</td>
<td width="90">ปานกลาง</td>
<td width="90">น้อย</td>
<td width="90">น้อยที่สุด</td>
</tr>
<tr>
<td height="25" >1</td>
<td class="question-title"> อธิบายเนื้อหาเข้าใจง่าย</td>
<td>
<input type="radio" name="question1" onchange="return checkForm('question1')" value="5">
</td>
<td>
<input type="radio" name="question1" onchange="return checkForm('question1')" value="4">
</td>
<td>
<input type="radio" name="question1" onchange="return checkForm('question1')" value="3">
</td>
<td>
<input type="radio" name="question1" onchange="return checkForm('question1')" value="2">
</td>
<td>
<input type="radio" name="question1" onchange="return checkForm('question1')" value="1">
</td>
</tr>
<tr>
<td height="25" >2</td>
<td class="question-title"> สามารถนำเนื้อหาที่ได้รับไปใช้ในชีวิตประจำวันได้</td>
<td>
<input type="radio" name="question2" onchange="return checkForm('question2')" value="5">
</td>
<td>
<input type="radio" name="question2" onchange="return checkForm('question2')" value="4">
</td>
<td>
<input type="radio" name="question2" onchange="return checkForm('question2')" value="3">
</td>
<td>
<input type="radio" name="question2" onchange="return checkForm('question2')" value="2">
</td>
<td>
<input type="radio" name="question2" onchange="return checkForm('question2')" value="1">
</td>
</tr>
<tr>
<td height="25" >3</td>
<td class="question-title"> เนื้อหาทันสมัยทันกับเหตุการณ์ในปัจจุบัน</td>
<td>
<input type="radio" name="question3" onchange="return checkForm('question3')" value="5">
</td>
<td>
<input type="radio" name="question3" onchange="return checkForm('question3')" value="4">
</td>
<td>
<input type="radio" name="question3" onchange="return checkForm('question3')" value="3">
</td>
<td>
<input type="radio" name="question3" onchange="return checkForm('question3')" value="2">
</td>
<td>
<input type="radio" name="question3" onchange="return checkForm('question3')" value="1">
</td>
</tr>
<tr>
<td height="25" >4</td>
<td class="question-title"> เอกสารการสอนมีความละเอียดเข้าใจง่าย</td>
<td>
<input type="radio" name="question4" onchange="return checkForm('question4')" value="5">
</td>
<td>
<input type="radio" name="question4" onchange="return checkForm('question4')" value="4">
</td>
<td>
<input type="radio" name="question4" onchange="return checkForm('question4')" value="3">
</td>
<td>
<input type="radio" name="question4" onchange="return checkForm('question4')" value="2">
</td>
<td>
<input type="radio" name="question4" onchange="return checkForm('question4')" value="1">
</td>
</tr>
<tr>
<td height="25" >5</td>
<td class="question-title"> เนื้อหาการสอนเหมาะสมกับ ความรู้พื้นฐานของผู้เรียน</td>
<td>
<input type="radio" name="question5" onchange="return checkForm('question5')" value="5">
</td>
<td>
<input type="radio" name="question5" onchange="return checkForm('question5')" value="4">
</td>
<td>
<input type="radio" name="question5" onchange="return checkForm('question5')" value="3">
</td>
<td>
<input type="radio" name="question5" onchange="return checkForm('question5')" value="2">
</td>
<td>
<input type="radio" name="question5" onchange="return checkForm('question5')" value="1">
</td>
</tr>
</tbody>
</table>
<div class="text-center">
<hr>
<button id="submit-form" class="btn btn-success">Send Answer</button>
</div>
</form>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3.เขียน Script ตรวจสอบการ เลือกข้อคำถาม และ แสดง Progress Bar ใน แบบฟอร์ม
<script>
$(function(){
$("#submit-form").click(function(){
alert($( "form" ).serialize());
return false;
});
});
//กำหนดค่าเริ่มต้น progress bar
progress = 0;
//ตัวแปร checked สำหรับ เก็บ ข้อที่ได้ตอบไปแล้ว
checked = [];
//จำนวนข้อทั้งหมด
number = 5;
//ฟังชั่นตรวจสอบการเลือกคำถามในแบบฟอร์ม
function checkForm(qname){
//ตรวจสอบว่ามีการเลือกไปแล้วหรือยัง
if(!isChecked(qname)){
progress ++;
checked.push(qname);
}
//แสดง progress bar เป็น แบบ เปอร์เซ้น
show_progress = (progress * 100) / number;
$(".progress-bar").attr('style','width:'+show_progress+'%').text(parseInt(show_progress)+' %');
}
//ฟังชั่น ตรวจสอบ ว่า มีการ เลือกคำตอบไปแล้วหรือยัง
function isChecked(qname){
for(i = 0; i<=checked.length;i++){
if(checked[i] == qname){
//คืนค่าจริง หาก มีการเลือกข้อนี้ไปแล้ว
return true;
}
}
//คืนค่าเท็จ กรณียังไม่มีการเลือก
return false;
}
</script>