대화형 퀴즈 앱-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

대화형 퀴즈 앱

Susan Sarandon

Dec 24, 2024 am 01:53 AM

Interactive Quiz App

이 프로젝트는 HTML, CSS 및 JavaScript간단한 대화형 퀴즈 애플리케이션입니다. 🎜>. 이를 통해 사용자는 객관식 질문에 답하고 답변을 제출하며 즉시 점수를 받을 수 있습니다. 이 앱은 JavaScript의 기본 양식 처리, 동적 콘텐츠 업데이트 및 DOM 조작을 보여줍니다.

사업개요

특징

객관식 질문: 객관식 질문 3개.
제출 버튼: 사용자가 답변을 제출할 수 있습니다.
즉시 점수: 제출 직후 사용자의 점수를 표시합니다.
인터랙티브 디자인: 더 나은 사용자 경험을 위한 간단한 스타일과 호버 효과.

사용된 기술

HTML: 콘텐츠 구조화용.
CSS: 퀴즈 인터페이스 스타일을 지정합니다.
JavaScript: 대화형 기능을 추가하고 답변을 처리합니다.

파일 구조

quiz-app/
│-- index.html      ← The HTML structure
│-- styles.css      ← The CSS styling
└-- script.js       ← The JavaScript logic

로그인 후 복사

코드 분석

HTML(index.html)

HTML 파일은 질문, 답변 선택, 제출 버튼을 포함한 퀴즈의 구조를 만듭니다.

핵심 요소:

양식 (
)을 사용하여 퀴즈 질문을 그룹화하세요.
라디오 버튼() 답변 선택
제출 버튼을 눌러 답변을 확인하세요.
결과 Div 점수를 표시합니다.

<form>



<h3>
  
  
  ? <strong>CSS (styles.css)</strong>
</h3>

<p>The CSS file styles the quiz interface, making it visually appealing and responsive.</p>

<p><strong>Key Styling Concepts:</strong></p>

로그인 후 복사

Layout: Flexbox for alignment and spacing.
Hover Effects: Button changes color when hovered.
Box Shadow: For a modern card-like appearance.

button {
  background-color: #28a745;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

로그인 후 복사

⚙️

자바스크립트(script.js)

JavaScript 파일은 퀴즈 로직을 처리하고, 사용자 답변을 처리하고, 점수를 표시합니다.

주요 개념:

이벤트 리스너: 사용자가 제출 버튼을 클릭하는 시기를 감지합니다.
양식 처리: 사용자가 선택한 답변에 액세스
DOM 조작: 사용자 점수로 결과 섹션을 업데이트합니다.

document.getElementById('submit-btn').addEventListener('click', function() {
  const answers = {
    q1: 'Paris',
    q2: '4',
    q3: 'Blue'
  };

  let score = 0;
  const form = document.getElementById('quiz-form');

  if (form.q1.value === answers.q1) score++;
  if (form.q2.value === answers.q2) score++;
  if (form.q3.value === answers.q3) score++;

  document.getElementById('result').textContent = `You scored ${score} out of 3!`;
});

로그인 후 복사

학습의 핵심 개념

HTML 양식 및 입력:
CSS 스타일링:
JavaScript 상호 작용:
- addEventListener()를 사용하여 이벤트 리스너 추가.
- 양식 데이터를 읽고 사용자 입력을 정답과 비교합니다.
- textContent를 사용하여 DOM을 동적으로 업데이트합니다.

?️ 프로젝트 진행 방법

프로젝트 복제 또는 다운로드:

quiz-app/
│-- index.html      ← The HTML structure
│-- styles.css      ← The CSS styling
└-- script.js       ← The JavaScript logic

로그인 후 복사

브라우저에서 index.html을 엽니다.

<form>



<h3>
  
  
  ? <strong>CSS (styles.css)</strong>
</h3>

<p>The CSS file styles the quiz interface, making it visually appealing and responsive.</p>

<p><strong>Key Styling Concepts:</strong></p>

로그인 후 복사

Layout: Flexbox for alignment and spacing.
Hover Effects: Button changes color when hovered.
Box Shadow: For a modern card-like appearance.

button {
  background-color: #28a745;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

로그인 후 복사