Xin chào , Hôm nay trong blog này, bạn sẽ học Cách tạo Ứng dụng đố vui bằng HTML CSS & JavaScript. Trước đó, tôi đã chia sẻ một blog về Thanh trượt hình nền bằng cách sử dụng Html Css & javascript và bây giờ là lúc để tạo Ứng dụng đố vui

Nếu bạn đã quen thuộc với HTML CSS & JAVASCRIPT thì bạn có thể dễ dàng tạo ứng dụng Tạo ứng dụng đố vui này bằng HTML CSS & JavaScript. Những người cảm thấy khó hiểu điều này, đừng lo lắng. Bạn có thể xem một video hướng dẫn đầy đủ trên Ứng dụng đố vui này

Hướng dẫn đầy đủ bằng video về Thanh trượt hình nền

THEO DÕI NGAY

bạn có thể thích điều này

• Thanh trượt hình ảnh đáp ứng
• Biểu mẫu đăng nhập Neumorphism trong HTML & CSS. Biểu mẫu đăng nhập CSS Neumorphism
• Cách tạo biểu mẫu đăng nhập mạng xã hội bằng Html & Css
• Cách tạo biểu mẫu đăng nhập đáp ứng chỉ bằng Html Css
• Cách tạo trang web CV xin việc bằng HTML CSS Bootstrap4

Tạo Ứng dụng đố vui bằng HTML CSS & JavaScript [Mã nguồn]

Để tạo Ứng dụng đố vui này  Trước tiên, bạn cần tạo Ba tệp, Tệp HTML Tệp CSS và Tệp JAVASCRIPT. Sau khi tạo các tệp này, chỉ cần sao chép mã nguồn đã cho và dán vào trình soạn thảo văn bản của bạn và chỉnh sửa nó theo yêu cầu của bạn. Bạn cũng có thể tải xuống các tệp mã nguồn của  Ứng dụng quiz này bằng HTML CSS & JavaScript  từ nút tải xuống nhất định

# MÃ HTML

Đầu tiên, tạo một tệp Html (chỉ mục. html) và dán các mã đã cho vào tệp CSS của bạn

 

    

      
Question Text
      

        

          
          Answer
        
        

          
          Answer
        
        

          
          Answer
        
        

          
          Answer
        
      
    
    Submit
  

# MÃ CSS

Thứ hai, bạn tạo một tệp CSS (kiểu. css) và dán các mã đã cho vào tệp CSS của bạn

/* coding with nick */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
  box-sizing: border-box;
}
body{
  background-color: #b8c6db;
  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7f7 100%);
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.quiz-container{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
  width: 600px;
  overflow: hidden;
}
.quiz-header{
  padding: 4rem;
}
h2{
  padding: 1rem;
  text-align: center;
  margin: 0;
}
ul{
  list-style-type: none;
  padding: 0;
}
ul li{
  font-size: 1.2rem;
  margin: 1rem 0;
}
ul li label{
  cursor: pointer;
}
button{
  background-color: #03cae4;
  color: #fff;
  border: none;
  display: block;
  width: 100%;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: inherit;
  padding: 1.3rem;
}
button:hover{
  background-color: #04adc4;
}
button:focus{
  outline: none;
  background-color: #44b927;
}

# MÃ JS

Cuối cùng, tạo một tệp JavaScript ( script. js ) và dán các mã đã cho vào tệp JavaScript của bạn

const quizData = [
    {
        question: "Which language runs in a web browser?",
        a: "Java",
        b: "C",
        c: "Python",
        d: "javascript",
        correct: "d",
    },
    {
        question: "What does CSS stand for?",
        a: "Central Style Sheets",
        b: "Cascading Style Sheets",
        c: "Cascading Simple Sheets",
        d: "Cars SUVs Sailboats",
        correct: "b",
    },
    {
        question: "What does HTML stand for?",
        a: "Hypertext Markup Language",
        b: "Hypertext Markdown Language",
        c: "Hyperloop Machine Language",
        d: "Helicopters Terminals Motorboats Lamborginis",
        correct: "a",
    },
    {
        question: "What year was JavaScript launched?",
        a: "1996",
        b: "1995",
        c: "1994",
        d: "none of the above",
        correct: "b",
    },
];
const quiz= document.getElementById('quiz')
const answerEls = document.querySelectorAll('.answer')
const questionEl = document.getElementById('question')
const a_text = document.getElementById('a_text')
const b_text = document.getElementById('b_text')
const c_text = document.getElementById('c_text')
const d_text = document.getElementById('d_text')
const submitBtn = document.getElementById('submit')
let currentQuiz = 0
let score = 0
loadQuiz()
function loadQuiz() {
    deselectAnswers()
    const currentQuizData = quizData[currentQuiz]
    questionEl.innerText = currentQuizData.question
    a_text.innerText = currentQuizData.a
    b_text.innerText = currentQuizData.b
    c_text.innerText = currentQuizData.c
    d_text.innerText = currentQuizData.d
}
function deselectAnswers() {
    answerEls.forEach(answerEl => answerEl.checked = false)
}
function getSelected() {
    let answer
    answerEls.forEach(answerEl => {
        if(answerEl.checked) {
            answer = answerEl.id
        }
    })
    return answer
}
submitBtn.addEventListener('click', () => {
    const answer = getSelected()
    if(answer) {
       if(answer === quizData[currentQuiz].correct) {
           score++
       }
       currentQuiz++
       if(currentQuiz < quizData.length) {
           loadQuiz()
       } else {
           quiz.innerHTML = `
           
You answered ${score}/${quizData.length} questions correctly
           Reload
           `
       }
    }
})

Vậy là xong, bây giờ bạn đã giải ứng dụng Quiz thành công bằng HTML CSS và JavaScript. Nếu mã của bạn không hoạt động hoặc bạn gặp phải bất kỳ lỗi Và sự cố nào, vui lòng tải xuống mã nguồn từ nút tải xuống đã cho

Làm cách nào để tạo một ứng dụng đố vui trong HTML?

Làm cách nào để tạo bài kiểm tra MCQ trong HTML?