Object oriented programming with Javascript - Build Quiz App

Create the quiz app's HTML skeleton in an index.html file, head with a title and language, and a page layout with header, questions, options, submit, next, and results.

Set up the app’s meta information by configuring character set UTF-8 and the viewport for responsive design, ensuring the page adapts to any device width.

Create the app's header by implementing a header inside a box that takes the full page width, using an h1 heading and unique IDs for styling and scripting.

Build a ten-tracker quiz interface with HTML and CSS, using unique IDs and a shared class, while JavaScript updates each tracker color to reflect correct or incorrect answers.

Set up the quiz section by creating a quiz container with a question area, four option buttons, and a next question button, with randomized questions controlled by JavaScript.

Learn to build a quiz app footer with a progress bar and timer, using JavaScript to toggle visibility, update a progress message, and structure a result box with a timer.

Create and link an external stylesheet to style the quiz app, using a link tag with rel=stylesheet and type=text/css, comparing internal and inline styles for readability and separation of concerns.

Learn to use CSS selectors and properties to style web pages by targeting elements with name, id, class, or universal selector, and apply colors, fonts, and sizes.

Learn CSS basics for app design by resetting margins and padding, managing defaults, and using box-sizing border-box. Protect quiz content by disabling text selection with user-select none and vendor prefixes.

Select the body or html to set a page background, and use color names, hex, or rgb; explore the W3Schools color picker for shades.

Design the quiz box by styling its container with background color, borders, border radius, and shadows, then center and size it using relative positioning, margins, and padding.

Shape the quiz box with a 40-pixel border radius, padding, and a dual blue-tinted box shadow for depth; tune the RGBA colors to suit the theme, ensuring text stays contained.

Design the header with a background and centered text, using relative positioning and a 40px border radius, 68px font size, margins, and 2px top and bottom padding with complementary colors.

Design and style the trackers: arrange them horizontally, shape each as a square-to-circle with border and padding, center white text at 22px using relative positioning and inline-block layout.

Design the question header and four option buttons for a JavaScript quiz app, applying white text, 35px font, left alignment, spacing, and bordered, hoverable option styles.

Learn to design the question and options area for a JavaScript quiz app, including center-aligned text, button styling, hover states, padding, and color tweaks, ready for dynamic text via JavaScript.

Design the next question button by using relative positioning and float right, applying a gray background, white text, and tuned width, padding, border radius, and font size.

Design the quiz footer to show a progress indicator and a timer, using JavaScript to update progress on each question change, with a relative layout and planned dynamic result messaging.

Design the result area to center the score and retake button, using a block display and centered margins. Style hover and focus states with a matching background and rounded borders.

Learn to connect html with external css and javascript files, place the script tag at the bottom of the body for loading, and keep code separate for a quiz app.

Learn how to declare and name variables in JavaScript, understand data types like strings, numbers, and booleans, follow naming rules, use semicolons, and adopt camelCase conventions for readable code.

Master JavaScript basics with arithmetic operators like addition, subtraction, multiplication, division, and modulus, and learn to display results using alerts, variables, and string concatenation.

Explore conditional statements in javascript by using if and if else to execute code based on true or false conditions, and learn common comparison operators and comment syntax.

Explore switch statements in JavaScript, compare them to if statements, and learn how cases, breaks, and a default handle multiple values (numbers, strings, booleans) to control flow.

Master the JavaScript for loop by initializing a counter, testing a condition, and incrementing it, then see how it prints 1 to 5 using repeated statements.

Explore one-dimensional arrays in JavaScript, learning how to declare arrays with new Array() and literals, access elements by zero-based indices, and store numbers, strings, and booleans.

Explore two dimensional arrays in JavaScript by creating arrays within arrays, assigning values, and accessing elements with two indices.

Explore how JavaScript functions encapsulate reusable code, defined once and called repeatedly. Learn about function definitions, calls, parameters, and returns with simple examples.

Discover how the document object model represents a page as a tree and use getElementById and innerText to access elements by id and modify them.

Explore the DOM and manipulate elements with getElementById and text properties, then implement click events using addEventListener instead of inline onClick, with a button triggering a JavaScript function.

Learn to handle the left mouse down event with a JavaScript listener. See the color change from red to yellow and the camelCase styling used.

Learn to add mouse down, mouse up, and mouse move event listeners to an element, changing its background color between red, yellow, and green to reflect user interaction.

Explore how JavaScript models real-world entities as objects with properties, using curly braces to declare person objects and access their values.

Learn how to create objects, define properties, and access values in JavaScript using dot notation and bracket notation, including string quotes, case sensitivity, undefined properties, and arrays of objects.

Create an array of two person objects containing multiple properties, then access a nested value by indexing the second object and using dot notation to retrieve its color.

Create and link external javascript files to power the quiz app, load data first by including questions.js before the main script, and ensure the question bank initializes before rendering.

Create a question bank as an array of objects, each with a question, four options, and an answer, enabling random 10-question quiz loading with green/red feedback based on the answers.

Set and initialize global variables, load the current question and options, and implement seven code parts to drive a JavaScript quiz app with random, non repeating questions.

Set and initialize variables for a JavaScript quiz, track 0–9 questions, manage score and answers, implement a timer with timeout, and load randomized, non-repeating questions using jackpot and state.

Learn to retrieve and manage quiz elements with a helper function wrapping document.getElementById, including question text, options, buttons, progress, and result, while resetting colors for new questions.

Initialize and manage variables for the quiz app, including per-question trackers, a timer, a seconds setting to set duration, and a footer timer element to update and stop the countdown.

Create a set question function that loads a random question and its options, resets option colors, and updates the progress bar.

Update the quiz progress bar as each question loads by changing the progress text and tracker color, using the load question workflow and a dedicated change progress bar function.

Create a function that resets all quiz option buttons to their default color when a new question loads, preventing previously selected options from staying green.

Learn how the get question function orchestrates set question, progress bar updates, and default option colors while handling last-question logic and timer setup in a modular, reusable way.

Implement set correct and set wrong to update the tracker colors (green or red), and a final score function to display the results page and switch between quiz and results.

Learn to generate a unique random number to select the next question and answer set. Track used indices and loop until you find an unused index.

Generate a unique random number to fetch a question and answer set, avoid index 10, verify duplicates with loops and state flags, and load new questions when needed.

Explore wiring a countdown timer to the quiz’s random generator in javascript, using Math.random, set timer logic, and setTimeout to count down from five.

Fixes the quiz timer by adding conditions to stop the countdown at zero, clear the timeout, and advance to the next question or show results on the last question.

Master the timer logic for a Javascript quiz app: manage countdown, handle no option selected or a chosen option, verify correctness, and advance to the next question.

Implement a reusable option selection system by binding four buttons to a single option select function, update the clicked option to green, and reset others to default.

Learn to wire the next question button to validate a chosen option, alert if none is selected, load the next question, reset timer, and update the score toward final results.

Consolidate quiz logic by wiring a retake test button to reload the page and initialize on window load. Start with the first random question from the ten-question array using getQuestion.

debug and fix bugs in a JavaScript quiz app by examining output, refining conditional logic, and using console.log to ensure correct next-question behavior and accurate button coloring.