A few images of my quiz
Mobile-first
Desktop
The link to go to my website :
The link to go to the github of my website :
Description of the project
In the "Animation et interactivité en web" course in Multimedia Integration Techniques, the second practical assignment aimed to put into practice skills in responsive layout, CSS animations, and JavaScript interactions. The objective was to create a quiz-style application, designed with a "Mobile First" approach, featuring a responsive layout (phone, tablet, desktop) using flexbox and media queries.
Key elements to implement included:
- CSS transformations, transitions, and animations
- Use of pseudo-elements for interactivity and styling
- Custom cursor with CSS and JavaScript
- DOM manipulation in JavaScript, using the RequestAnimationFrame API and score storage in LocalStorage
Interfaces to develop:
- Animated Introduction : title and animated instructions to start the quiz
- Quiz : at least five questions, with animations indicating correct or incorrect answers
- Final Interface : score display, option to replay, and best score saved via LocalStorage.
Publication date
This project was completed on May 18th 2023.
Role(s) in the project
In this web project, I was responsible for the complete programming of the site, researching information on various aviation facts, and styling the site.
As the lead developer, I wrote the code in HTML5, CSS3, and JavaScript. The research process involved gathering data related to different aspects of aviation. This project was the final practical assignment in the "Animation et interactivité en web" course within the Multimedia Integration program.
As the lead developer, I wrote the code in HTML5, CSS3, and JavaScript. The research process involved gathering data related to different aspects of aviation. This project was the final practical assignment in the "Animation et interactivité en web" course within the Multimedia Integration program.
Software used
For this project, I used Visual Studio Code. This software allowed me to program in three languages—HTML5, CSS3, and JavaScript. We also learned to install different extensions, which helped me work faster with Visual Studio Code.
Programming languages used
For this project, I used HTML5, CSS3, and JavaScript:
- HTML5: I used this language to structure the content of my site, including elements like the site title, answer boxes, and fonts.
- CSS3: I used CSS3 to style my site, controlling its visual appearance. It allowed me to define colors, fonts, spacing, and animations. Additionally, I used it to make the site responsive for mobile, tablet, and desktop views.
- JavaScript: I used JavaScript to manipulate the DOM, manage animations, store different user results, and customize the cursor. These elements helped me create a smooth and dynamic site.