Git Product home page Git Product logo

lightoftwelve / its-quiz-time Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 11.46 MB

Welcome to Logic Lab's Know-It or Blow-It JavaScript Quiz. This engaging and dynamic code quiz presents an excellent way to test and improve your JavaScript knowledge. The quiz begins when you hit the start button, activating a countdown timer and presenting you with your first question.

Home Page: https://lightoftwelve.github.io/its-quiz-time/

CSS 26.37% JavaScript 49.62% HTML 24.01%
highscores html-css-javascript javascript quiz-app quiz-game quizapp sound-effects fullstack fullstack-developer uiux-design uiuxdesigner web webapp

its-quiz-time's Introduction

Logic Lab's Know-It or Blow-It JavaScript Quiz

Overview

Welcome to Logic Lab's Know-It or Blow-It JavaScript Quiz. This engaging and dynamic code quiz presents an excellent way to test and improve your JavaScript knowledge. The quiz begins when you hit the start button, activating a countdown timer and presenting you with your first question. With each question answered, a new one will appear, making your learning experience fun and challenging. However, be cautious; incorrect answers will result in a deduction of your remaining time. The quiz ends when all questions have been answered or the timer reaches zero, following which, you can save your initials and score.

Features

  • Interactive Questions: Engage in a thrilling quiz experience with thought-provoking questions that will keep you on your toes.
  • Real-Time Feedback: Receive instant feedback on your answers and track your progress throughout the quiz.
  • Exciting Sound Effects: Immerse yourself in the quiz atmosphere with captivating sound effects that enhance your gaming experience.
  • High Score Competition: Compete with friends and fellow quiz enthusiasts for the top spot on the leaderboard and prove your knowledge reigns supreme.

Usage Guide

  • Navigate to the quiz start page.
  • Click on the Next button. The timer begins, and your first question is displayed.
  • Answer the question by clicking on one of the presented options.
  • The quiz proceeds with the next question, regardless of whether your previous answer was correct or not.
  • In case of an incorrect answer, time will be deducted from the timer.
  • The quiz ends when all questions are answered, or the timer reaches zero.
  • At the end of the quiz, enter your initials and click 'submit to save your score.

Screenshots

Hero Title Image Welcome message with highscore board image Overview of key features Get started introduction rules screenshot Countdown quiz sneakpeak quiz popdown revealing answer initial screen leaderboard

Technologies Used

  • HTML
  • CSS
  • JavaScript
  • Ionic Icons (Icon library)

Live Demo

Check out the live version of this project here.

Credits

This project was independently developed by Victoria Alawi. Inspiration for the style and functionality of the timer is from https://www.patreon.com/onlinetutorials // The project titled: Countdown Timer in Vanilla Javascript | CSS SVG Circle Countdown Time Animation

Acknowledgements

I want to express my gratitude to my teacher, Sean Roshan, and TA, Serena Guo, for their invaluable guidance and support in the structuring of this project.

License

This project is not currently licensed.

its-quiz-time's People

Contributors

lightoftwelve avatar

Watchers

avatar

its-quiz-time's Issues

Quiz Completion and High Scores

Quiz Completion and High Scores

User Story

AS A developer
I WANT to allow users to view and save their final scores and initials once the quiz is finished,
SO THAT users can track their progress and compete with others.

Acceptance Criteria

GIVEN a user has finished the quiz or the timer has reached zero
WHEN the game ends
THEN the user should be able to view their final score and enter their initials.
WHEN the user submits their score and initials
THEN this information should be saved and displayed on a high scores page.

Responsive and Attractive Interface

Responsive and Attractive Interface

User Story

AS A developer
I WANT to design a clean, polished, and responsive user interface,
SO THAT the quiz provides a visually pleasing and accessible experience for users.

Acceptance Criteria

GIVEN a user is using the quiz app
WHEN they navigate and interact with different features
THEN the user interface should respond smoothly and display correctly across different screen sizes.

Quiz Questions and Answers

Quiz Questions and Answers

User Story

AS A developer
I WANT to create a multiple-choice question set with correct and incorrect answers,
SO THAT users can engage with a dynamic and challenging quiz.

Acceptance Criteria

GIVEN I have a list of questions and multiple-choice answers
WHEN I enter them into the system
THEN they should be correctly stored and retrievable for quiz display.

Investigate and Resolve Issue with Incorrect Quiz Answer Validation

Investigate and Resolve Issue with Incorrect Quiz Answer Validation

User Story

AS a developer
I WANT to investigate and resolve the issue with incorrect quiz answer validation
SO THAT users receive accurate feedback on their quiz responses.

Acceptance Criteria

GIVEN a quiz question with multiple correct answers,
WHEN a user submits an answer,
THEN the system should mark it as correct if the user's answer matches the correct answer

Sounds Part 2

Sounds

User Story

AS A developer
I WANT to incorporate sounds into the quiz game
SO THAT the user can have an enhanced audio experience based on their actions.

Acceptance Criteria

GIVEN a user is on the high score page
WHEN they view the page
THEN background music should play to create an enjoyable atmosphere.

GIVEN a user has completed the quiz and received a low score
WHEN the game is over
THEN a game-over sound should play to indicate the end of the game.

Answer Verification and Score Calculation

Answer Verification and Score Calculation

User Story

AS A developer
I WANT to implement a scoring system that evaluates user answers and adjusts scores and time accordingly,
SO THAT users can see their scores and have the opportunity to improve their performance.

Acceptance Criteria

GIVEN a user selects an answer to a question
WHEN the answer is correct
THEN their score should increase based on their speed of response, and the next question should be presented.
WHEN the answer is incorrect
THEN time should be deducted from the timer, and the next question should be presented.

High Scores Page

High Scores Page

User Story

AS A developer
I WANT to design a separate high scores page,
SO THAT users can compare their scores against their peers' scores and motivate themselves to improve.

Acceptance Criteria

GIVEN a user wants to view the high scores
WHEN they navigate to the high scores page
THEN they should see a list of initials and corresponding scores sorted in descending order.

Sounds

Sounds

User Story

AS A developer
I WANT to incorporate sounds into the quiz game
SO THAT the user can have an enhanced audio experience based on their actions.

Acceptance Criteria

GIVEN a user is taking the quiz
WHEN they answer a question correctly
THEN a chime sound should play to provide positive feedback.

GIVEN a user is taking the quiz
WHEN they answer a question incorrectly
THEN a corresponding sound should play to indicate an incorrect answer.

Timer Functionality

Timer Functionality

User Story

AS A developer
I WANT to add a timer to the quiz that starts when a user begins the quiz,
SO THAT the quiz simulates a real-world timed testing environment.

Acceptance Criteria

GIVEN a user starts a new quiz
WHEN the first question is displayed
THEN the timer should start counting down.

Quiz Restarting and Score Resetting

Quiz Restarting and Score Resetting

User Story

AS A developer
I WANT to add functionality that allows users to restart the quiz and reset scores,
SO THAT users can retake the quiz to improve their scores.

Acceptance Criteria

GIVEN a user has completed the quiz
WHEN they select the option to retake the quiz
THEN the quiz should restart, the timer should reset, and the score should be cleared for a new session.

Dynamic HTML and CSS Updates via JavaScript

Dynamic HTML and CSS Updates via JavaScript

User Story

AS A developer
I WANT to write JavaScript code that updates the HTML and CSS dynamically,
SO THAT the quiz is engaging, interactive, and reacts to user actions in real time.

Acceptance Criteria

GIVEN a user is taking the quiz
WHEN they perform actions such as answering a question or starting a new session
THEN the HTML content and CSS styling should dynamically update to reflect these actions.

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.