Home Kênh học tậpLập trìnhJavaScript Tạo ứng dụng Quiz bằng JavaScript
Hướng dẫn học JavaScript từ cơ bản đến nâng cao

Tạo ứng dụng Quiz bằng JavaScript

by admin
518 views

Chào mừng các bạn đến với khóa học Javascript từ cơ bản đến nâng cao từ Kênh 49. Hôm này mình sẽ giới thiệu với các bạn cách tạo ứng dụng Quiz (ứng dụng trắc nghiệm) bằng JavaScript.

Yêu cầu của ứng dụng là ta tạo một file HTML, khi mở nó lên sẽ hiện ra 5 câu hỏi và trả lời. Cùng bắt đầu nào

Trong thẻ Script ta sử dụng 5 thẻ Prompt(). Các bạn có thể tăng giảm số lượng thẻ tương ứng với số câu hỏi muốn tạo. Và mình sẽ thêm 3 điều kiện, tùy theo kết quả của mỗi câu hỏi trên. Nếu score là 5 thì bạn về đầu, score là 4 thì bạn về nhì, score là 3 bạn về 3, score <3 bạn trượt.

Đặt setTimerout để ra vẻ như chương trình phải mất một lúc để chấm điểm 2000 milliseconds = 2s

<html lang="vi">
    <head>
        <meta charset="utf-8">
        <title>Ứng dụng Quiz - Kênh 49</title>
        
    </head>
    <body>
        <div align="center">
            <h1>Kết quả</h1>
            <p>Tổng điểm : 5</p>
            <div>Điểm bạn đạt được : <span id="result"></span></div>
        </div>
        <script type="text/javascript">
            var score = 0;
            if(prompt(" Đà Lạt có bao nhiêu phường? A.12  B.11. C.13 ") == "A")
            {
                score +=1;
            }
            if(prompt(" Đà Lạt có bao nhiêu xã? A.1  B.2. C.3 ") == "B")
            {
                score +=1;
            }
            if(prompt(" Lâm Đồng có bao nhiêu thành phố? A.1  B.2. C.3 ") == "B")
            {
                score +=1;
            }
            if(prompt(" Đà Lạt trực thuộ tỉnh nào? A.Trung ương  B.bảo Lộc. C.Lâm Đồng ") == "A")
            {
                score +=1;
            }
            if(prompt(" Đà Lạt có bao nhiêu phường? A.12  B.11. C.13 ") == "A")
            {
                score +=1;
            }
            document.getElementById("result").innerHTML = "Hệ thống đang tính toán...."
            function showanser()
            {
                if(score == 5)
                {
                    alert("Bạn về nhất");
                    document.getElementById("result").innerHTML = score;
                }
                if(score == 4)
                {
                    alert("Bạn về nhì");
                    document.getElementById("result").innerHTML = score;
                }
                if(score == 3)
                {
                    alert("Bạn về ba");
                    document.getElementById("result").innerHTML = score;
                }
                if(score < 3)
                {
                    alert("Chúc may mắn lần sau!")
                    document.getElementById("result").innerHTML = score;
                }
            }
            setTimeout(showanser, 2000);
        </script>
        
    </body>
</html>

Cuối cùng cũng đã tạo ứng dụng Quiz đơn giản với JavaScript. Chúc bạn bạn thành công! Và hẹn ở những bài tiếp theo

Series Navigation<< Sử dụng hàm trong JavaScriptTạo ứng dụng bảng tính bằng JavaScript >>

Related Posts

error: Content is protected !!