Tạo ứng dụng câu hỏi trắc nghiệm (quiz) bằng PHP & Ajax
Trước đây khi mới bắt đầu học về PHP, thì mình bắt đầu với ứng dụng xuất ra màn hình dòng chữ ” Hello World ! “. Theo thời gian thì mình thấy các bạn nên khởi đầu với một ứng dụng có thể áp dụng thực sự trong đời sống. Chính vì thế mà trong bài viết này, mình sẽ cùng với các bạn từng ...
Trước đây khi mới bắt đầu học về PHP, thì mình bắt đầu với ứng dụng xuất ra màn hình dòng chữ ” Hello World ! “. Theo thời gian thì mình thấy các bạn nên khởi đầu với một ứng dụng có thể áp dụng thực sự trong đời sống. Chính vì thế mà trong bài viết này, mình sẽ cùng với các bạn từng bước tạo một ứng dụng kiểm tra trắc nghiệm cực kỳ đơn giản và dễ hiểu với việc kết hợp giữa PHP, MySql, Ajax và jQuery.
Xem Demo | Download
Cấu trúc folder cho ứng dụng này như sau :
Bước 1 :
Tạo bảng cơ sở dữ liệu cho ứng dụng với đoạn SQL bên dưới.
CREATE TABLE IF NOT EXISTS `questions` ( `id` int(11) NOT NULL AUTO_INCREMENT, `question_name` text NOT NULL, `answer1` varchar(50) NOT NULL, `answer2` varchar(50) NOT NULL, `answer3` varchar(50) NOT NULL, `answer4` varchar(50) NOT NULL, `answer` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
Kế tiếp là chèn một số dữ liệu mẫu vào.
INSERT INTO `questions` (`id`, `question_name`, `answer1`, `answer2`, `answer3`, `answer4`, `answer`) VALUES
(1, 'PHP là chữ viết tắt của?', 'Personal Home Page', 'Personal Hypertext Processor', 'Private Home Page', 'PHP: Hypertext Preprocessor', '4'),
(2, 'Hiển thị chữ "Hello World" ra màn hình trong PHP', 'Document.Write("Hello World");', 'echo "Hello World";', '"Hello World";', '"Hello World";', '2'),
(3, 'PHP có cú pháp tương tự như :', 'VBScript', 'JavaScript', 'Perl & C', 'Pascal', '3'),
(4, 'Câu lệnh nào lấy dữ liệu khi submit form bằng phương thức "get" trong PHP?', 'Request.Form;', '$_GET[];', 'Request.QueryString;', 'Request.QueryString;', '2');
Bước 2
Tạo file config.php rồi sau đó copy đoạn code bên dưới để kết nối cơ sở dữ liệu.
<?php
define('DB_HOST', 'ten host');
define('DB_NAME', 'ten csdl');
define('DB_USER','user ket noi csdl');
define('DB_PASSWORD','pass ket noi csdl');
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
// doan code nay la de giup hien thi font unicode ra man hinh
mysql_query ("set character_set_client='utf8'");
mysql_query ("set character_set_results='utf8'");
mysql_query ("set collation_connection='utf8_general_ci'");
?>
Bước 3
Bây giờ chúng ta sẽ tạo file index.php và chèn file config.php vào ngay dòng đầu tiên.
<?php require_once 'config.php';?>
Kế tiếp là chèn những đoạn html cần thiết
<!DOCTYPE html> <html> <head> <title>Demo Gird</title> <meta charset='utf-8'> <link rel='stylesheet' href='css/style.css'/> </head> <body> <h1>Tạo ứng dụng câu hỏi trắc nghiệm (quiz) bằng PHP & Ajax</h1>
Bây giờ chúng ta sẽ lấy dữ liệu và hiển thị nó ra form như sau :
<?php $response=mysql_query("select * from questions");?>
<form method='post' id='quiz_form'>
<?php while($result=mysql_fetch_array($response)){ ?>
<div id="question_<?php echo $result['id'];?>" class='questions'>
<h2 id="question_<?php echo $result['id'];?>"><?php echo $result['id'].".".$result['question_name'];?></h2>
<div class='align'>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans1_<?php echo $result['id'];?>' for='1'><?php echo $result['answer1'];?></label>
<br/>
<input type="radio" value="2" id='radio2_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans2_<?php echo $result['id'];?>' for='1'><?php echo $result['answer2'];?></label>
<br/>
<input type="radio" value="3" id='radio3_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans3_<?php echo $result['id'];?>' for='1'><?php echo $result['answer3'];?></label>
<br/>
<input type="radio" value="4" id='radio4_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans4_<?php echo $result['id'];?>' for='1'><?php echo $result['answer4'];?></label>
<input type="radio" checked='checked' value="5" style='display:none' id='radio4_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
</div>
<br/>
<input type="button" id='next<?php echo $result['id'];?>' value='Next!' name='question' class='butt'/>
</div>
<?php }?>
</form>
Và cuối cùng là đoạn html để hiển thị kết quả và giờ.
<div id='result'> </div> <div id="demo1" class="demo" style="text-align:center;font-size: 25px;">00:00:00</div>
Bước 4
Để có thể hiển thị một câu hỏi duy nhất ra màn hình và tự động chuyển câu hỏi khi người dùng trả lời thì đoạn script bên dưới làm rất tốt điều đó.
Đoạn script trên có chứa một plugin là watch.js, plugin này giúp chúng ta hiển thị đồng hồ đếm thời gian. Các bạn có thể download plugin này về trực tiếp từ phần demo của bài viết này. Ngoài ra các bạn còn có thể thay đổi thời gian mặc định sẽ tự động submit khi hết thời gian qui định ở phần setTimeout. Ở đây mình ấn định giá trị là 50 giây.
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/watch.js"></script>
<script>
$(document).ready(function(){
$('#demo1').stopwatch().stopwatch('start');
var steps = $('form').find(".questions");
var count = steps.size();
steps.each(function(i){
hider=i+2;
if (i == 0) {
$("#question_" + hider).hide();
createNextButton(i);
}
else if(count==i+1){
var step=i + 1;
//$("#next"+step).attr('type','submit');
$("#next"+step).on('click',function(){
submit();
});
}
else{
$("#question_" + hider).hide();
createNextButton(i);
}
});
function submit(){
$.ajax({
type: "POST",
url: "ajax.php",
data: $('form').serialize(),
success: function(msg) {
$("#quiz_form,#demo1").addClass("hide");
$('#result').show();
$('#result').append(msg);
}
});
}
function createNextButton(i){
var step = i + 1;
var step1 = i + 2;
$('#next'+step).on('click',function(){
$("#question_" + step).hide();
$("#question_" + step1).show();
});
}
setTimeout(function() {
submit();
}, 50000);
});
</script>
Bước 5
Trong phần ajax ở bước 4, các bạn thấy mình có khai báo một file thực thi là ajax.php, file này sẽ giúp chúng ta kiểm tra xem người dùng trả lời có chính xác hay không và sẽ trả về kết quả ra màn hình. Và đây là toàn bộ đoạn code trong file này.
ajax.php
<?php
require_once 'config.php';
$response=mysql_query("select id,question_name,answer from questions");
$i=1;
$right_answer=0;
$wrong_answer=0;
$unanswered=0;
while($result=mysql_fetch_array($response)){
if($result['answer']==$_POST["$i"]){
$right_answer++;
}else if($_POST["$i"]==5){
$unanswered++;
}
else{
$wrong_answer++;
}
$i++;
}
echo "<div id='answer'>";
echo " Số lần đúng : <span class='highlight'>". $right_answer."</span><br>";
echo " Số lần sai : <span class='highlight'>". $wrong_answer."</span><br>";
echo " Số câu hỏi không trả lời : <span class='highlight'>". $unanswered."</span><br>";
echo "</div>";
?>
Mình thật sự mong muốn các bạn có thể từ ứng dụng nhỏ bé này mà có thể trở thành những người lập trình giỏi và kiếm thật nhiều tiền từ công việc của mình sau này.
Chúc các bạn thành công !
Chuyên Mục: PHP
Bài viết được đăng bởi webmaster
