ProgramGuru

Quiz Application

Quiz Application — purpose and prerequisites

A quiz application presents questions, accepts answers, computes a score, and explains mistakes. Keeping answer evaluation separate from display allows the same quiz to work in a CLI, browser, or test runner.

What you’ll learn

  • Explain the purpose of quiz application.
  • Identify the typed contract, runtime responsibilities and common pitfalls.
  • Run the example and extend its behavior with a practical exercise.

How the idea works

The evaluator normalizes case and trims user responses. Both answers match, so it reports 2/2. A UI would present explanations and track progress separately.

Comparing the answer array and question array without handling missing positions can accept or display incorrect results.

Visualize the flow

Quiz Application — learning flowQuestion bank → Answer evaluation → Score + feedbackQuiz Application1Question bank2Answer evaluation3Score + feedbackProject core logic is executable; integrations may need setup.
A three-step view of the responsibilities and the observable result.

Run the checked TypeScript example

This source was compiled using TypeScript 5.8.3 with strict checking, then executed with Node.js 22.16.0. Its stdout below is the actual captured output. The core logic is runnable without a framework or a remote API; integration-specific examples appear in a separate lab when needed.

TypeScript source

type Question = { prompt: string; answer: string; explanation: string };
function evaluate(questions: readonly Question[], answers: readonly string[]): number {
  return questions.reduce((score, question, index) => score +
    (question.answer.toLowerCase() === (answers[index] ?? "").trim().toLowerCase() ? 1 : 0), 0);
}
const quiz: Question[] = [
  { prompt: "Which keyword declares a constant?", answer: "const", explanation: "const prevents reassignment." },
  { prompt: "What does tsc emit?", answer: "javascript", explanation: "tsc emits JavaScript when emission is enabled." },
];
console.log(`Score: ${evaluate(quiz, ["CONST", "JavaScript"])}/${quiz.length}`);

Verified output

Score: 2/2

Compile: npx tsc --strict --target es2022 --module commonjs quiz-application.ts; run: node quiz-application.js. For examples importing node: modules, install @types/node as a development dependency; for browser or React projects use the separate lab setup.

Trace the execution

The evaluator normalizes case and trims user responses. Both answers match, so it reports 2/2. A UI would present explanations and track progress separately.

Before editing the code, predict what the output will be for one changed input. Run it and compare your prediction with the actual result.

Common mistake and correction

Comparing the answer array and question array without handling missing positions can accept or display incorrect results.

Determine whether the issue belongs to the type system, a trust boundary, or actual runtime behavior before choosing a correction.

Your turn: extend the example

Add multiple-choice options and a timed mode. Test blank answers and questions whose case matters.

Record expected success and failure outcomes, run the code, and compare the observed behavior. Keep the exercise compatible with strict type checking.

Check your understanding

Which statement correctly describes quiz application in the example?
Choose one answer. You can try again.

Answer and explanation

The evaluator normalizes case and trims user responses.

The evaluator normalizes case and trims user responses. Both answers match, so it reports 2/2. A UI would present explanations and track progress separately.

Key idea to remember

The evaluator normalizes case and trims user responses. Both answers match, so it reports 2/2. A UI would present explanations and track progress separately.

Apply the same reasoning to the practice task, then integrate it into a real app only when the runtime and dependency setup are ready.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: File Organizer →