Code Monkey home page Code Monkey logo

labadie_hw5th_csi3150_fs2023's Introduction

Problem Statement:

This quiz app was created using HTML, CSS, and JavaScript so that the user could interact with the quiz. The quiz contains questions that test the user’s understanding of the basics of web development. The app allows the user to answer 5 questions and lets them know the answer after they answer the question or after 15 seconds. The goal of the app is to either teach the user about the basics of web development or to refresh them on abbreviations in web development.

Functional Features:

  • Start/End Quiz Button - The user can begin the quiz by clicking the “Start Quiz” button or exit the quiz by clicking on the “Exit Quiz” button
  • Quiz Instructions - The set of rules for the quiz, providing information about the time limit, questions/answers, and quiz duration
  • Quiz Question DIsplay - Dynamic container for all questions from the “question.js” file
  • Multiple-choice options - a set of possible answers that allows the user to choose the option they think is correct
  • Timer - a countdown for each question, showing the user how long they have before the app moves to the next question
  • Visual Timer - the line showing the visual progress of the countdown timer
  • Selection & Feedback - provides feedback to the user about the answer they selected
  • Score - the visual representation of the user’s correct answers
  • Next Question Button - allows the user to move to the next question by pressing the “Next Question” button
  • Results Display - after the quiz, displays the users final score
  • Replay & Quit Buttons - Allows the user to either replay the quiz or close the app by pressing the corresponding button

Directory Structure:

Index.html: Primary HTML file for the application

  • Contains the base HTML logic including references to the necessary CSS and JavaScript files
  • Contains the basic layout for the application with containers for JavaScript generated content

Style.css

  • Contains CSS styling for the entire applications
  • Uses HTML classes to define styling
  • Controls the appearance of all elements

Questions.js

  • Contains an array of custom question objects

quizApp.js

  • Contains primary JavaScript logic for generating quiz questions
  • Uses DOM to interact with HTML elements
  • Defines listeners for all button elements
  • Handles the flow of the quiz by dynamically updating the visual score and timer elements
  • Uses the pre-defined objects in the “questions.js” file to create the questions

Code Explanation:

  • index.html - Defines the structure of the application, including all static elements and containers for dynamic ones
  • style.css - Defines the styles used for all different elements, used to modify visual appearance
  • questions.js - Contains an array of questions to be used in other JavaScript files
  • quizApp.js - Creates questions from the questions.js and manages quiz logic using event listeners and functions

labadie_hw5th_csi3150_fs2023's People

Contributors

martysen avatar technoknight17 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.