JS/HTML/CSS Quiz

A collection if questions to help you understand basic web concepts (mostly javascript).

🎞 Apps (Domains)

• 👩‍💻 JS Quiz - test your JS skills!
• 📗 HTML / CSS / JS Homework
• 🧮 Basic Math Quiz
• 📖 Olimpiada Biblică 2024

📚 Useful Resources

‍💻 My course on Udemy

• Become a WEB Developer from Scratch, step by step Guide - by Nicolae Matei

📖 Read

• Useful Examples of map, reduce and filter
• toptal - javascript/interview-questions
• js-concepts by leonardomso
• javascript-questions by lydiahallie
• JS Exercises
• Arrays: Some(), Every(), and forEach()
• Simplify your JavaScript – Use .some() and .find()
• ES6 Javascript: The Complete Developer's Guide
• justjavascript.com

🎥 Conferences

• JSHeroes

💠 Features

• Welcome screen (enter or select name) + remember me
• Remember selected options for each name
• Show random tests with different levels
• Choose levels
• Choose domain
• After finish Test show info notes
• Add time limit
• Store answers in local storage in case of reload
• Theme switch
• Allow answers as text & number in combination with radio & checkbox
• (bug) Reset after change level

👨‍🏫 Trainer Notes

📃 Generate a test with required questions

• (Optional) Custom header
  • right click / 📝 Show Custom header editor
  • then ➔ Set Custom header on URL
• Open test and right click / ✅ Select questions by ID's
• Select specific ID's then press Copy ID's (bottom of the list)
• right click / ✅ Generate Test Link
• Paste the ID's from clipboard into browser prompt (CTRL + V)
• Copy current link and share it

🔠 Extra params

• test = 1 - to generate a theoretical or practical test (uses in prev chapter)
• type = used to store the type of test (eg. theoretical or practical)
• shuffle = none | all | questions | answers | both | 0 | a | q - to shuffle questions or answers
• limit = 10 | 100 | 1000 | 10000 - to limit the number of questions
• correct = 1 | true | 0 | false - to show correct answers
• add = true | false - to add questions to the list
• index = id - to show question id
• allowUnload = false | true - to allow or prevent page unload
• header = html - to show a custom header (you can use {params} as templates)
  • all parameters from URL can be used inside the header with {param})
  • extra parameters: {user-name} and {start-time}

📋 Dev Notes

▶ Start & Build

npm i
npm start

Production build:

npm run build
# or
npm run deploy

How to add new questions

• Fork this repo and clone it (your own copy), after that you can add new questions
  • commit / push changes on your own repo
  • create a pull request to merge your changes into this repo
  • if pull request is merged your name will be seen in Contributors view
• Add Bible questions: domain=bible&level=1&limit=10000&add=true&index=id&correct=1
• JS questions are listed in src/data/questions/js.js
• CSS questions are listed in src/data/questions/css.js
• correct answers are listed in src/data/answers.json

TODOs

• try webworkers to store entire content when you don't have internet