Introduction
You will have two possibilities :
- Topic 1: write a small "quizz engine". This is the topic to choose if you want to improve your skills in DOM API/handle html5 input fields, play with data structures.
- Topic 2: improving the video game developed at the end of Module 2. This is the topic to choose if you want to learn more into graphics/animation/interaction
TOPIC 1 : write a small quizz engine
Online examples you can get inspiration from:
As part of your coursework, you will be tasked with an exciting project - the development of a quiz engine using JavaScript, CSS, and HTML. You will not use any server-side development (the project is 100% pure HTML/CSS/JS).
You will show your quizz engine with a quizz made of at least 10 questions about cinema/TV shows.
This project will require you to apply your JavaScript development skills to create a dynamic and interactive quiz platform.
Key Components:
- HTML Structure: You will need to create the HTML structure for the quiz questions, options, and results.
- CSS Styling: Apply CSS to make the quiz visually appealing and user-friendly.
- JavaScript Functionality: Implement JavaScript for the interactive features, such as user input validation, scoring, and feedback.
- User Interface: Design an intuitive user interface that guides users through the quiz.
- Main screen for starting one quizz (might propose several quizzes you can choose from)
- Once started, the first question is displayed (it might be taken at random among the quizz questions, or the quizz might have this as an option), with picture/video, text, possible answers (buttons or checkboxes depending on the type of question).
- When the question has been answered, the next question is displayed.
- After the last question has been answered, results / final score is displayed.
- Optionnal : show which questions were correct/incorrect.
- Question display: a question is made of text (i.e "which actor played the main male character of this movie?"), with one or more pictures (i.e movie extract or poster), optionnaly you might also include a video.
- Question Types: The quiz engine should support different question types, including :
- single choice (One question, n multiple answers, only one is correct)
- multiple-choice (One question, 2 or more answers are correct). It is your choice to decide if you will give negative scores, or partial scores is the answer is partially correct.,
- true/false or yes/no: similar to single choice, except that you will display yes/no or true/false clickable answers only.
- Scoring: Develop a scoring mechanism to calculate and display scores to users.
- Feedback: Provide feedback to users after they complete the quiz, including correct answers and explanations.
- Data Management: Utilize data structures to store and manage quiz questions and answers.
- Responsiveness (optionnal): Ensure that the quiz engine is responsive and works well on different screen sizes (i.e mobile phones)
TOPIC 2: improve the video game form Module 2
Skeleton code to start with
- This skeleton project (to come) has been live coded and commented during the 6/11 video tutoring session. Unzip and open index.html with Live Server. It shows how to add levels, score, lives and a game over screen.
What you have to do
You will have to improve the small video game that has been developed at the end of Module 2. Do what you can and feel free to take creative initiatives.
YOU ARE SUPPOSED TO HAVE COMPLETED THE COURSE TO THE END OF MODULE 2 !!!! If this is not the case, try to catch up as quickly as possible !
DO NOT FORGET TO OPEN ALL THE TIME THE DEVTOOL CONSOLE OF YOUR BROWSER IN ORDER TO SEE ERRORS!
- The game is not completely finished, as you may have noticed :-) So, try to make "levels": when all good balls have been eaten, let's restart automatically, but this time with one more ball in the initial set! THE WORK IS NEARLY DONE 100% IN THE SKELETON AND I HAVE EXPLAINED HOW TO DO THIS IN THE SECOND TUTORING VIDEO
- Try to display the level number on the right,
- Try to have the player have a nicer shape than a rectangle/square. For example, give it a nicer : i.e balls are COVID viruses and the player is a bacteria.
- Try to use a global variable "gameState" that can be equal to "gameRunning" or to "displayGameOverMenu". Use it in the game loop with a switch statement, to display a game over menu when the player hits a certain number of bad balls (say three bad balls eaten and you're done!)
- When, in the game over menu, listen to keydown events on the canvas and suggest pressing space to go to restart the game.
- Add other input fields to further customize the game.
- Try to make ball movements different depending on their color (random direction that changes along the course of a ball, zigzag movements, etc.) I SHOWED HOW TO DO THIS IN THE SECOND TUTORING VIDEO SESSION
- Try to make the balls change their size during the animation.
- More difficult: try to make your player fire bullets to destroy enemy balls :-)
- Try to add some other game play elements (obstacles ?)
How to submit / due date
Due date is November 15th. I will not accept late submissions.
You will have to send me (micbuffa@gmail.com) your work. Unfortunately, zip files cannot be sent using email easily.
If you do not receive in 24hours an email saying "Bien reçu" or "I got it thanks", then resend and check the email address!
IN THE ARCHIVE : please write a small README.txt file that explains your contributions. If you know how to do it : put your project online and add the URL of your project so that I can test it rapidly.
- Send me the URL of the GitHub repo of the project (if you know how to use git), or use wetransfer or any other mean (google drive, One Drive, dropbox etc.). GitHub highly recommended!
- Send me the URL of your online project: once your project works locally on your hard disk (I recommend to develop it with Visual Studio code or equivalent), host it on GitHub Pages (very easy if your project is on GutHub), or host it somewhere so that I can try it online.
Vous n'êtes pas connecté. Connexion 