diff --git a/Smart Quiz Builder/README.md b/Smart Quiz Builder/README.md new file mode 100644 index 00000000..2b48fb03 --- /dev/null +++ b/Smart Quiz Builder/README.md @@ -0,0 +1,103 @@ +# 🧠 SmartQuiz Builder + +**SmartQuiz Builder** is a beautifully designed, fully client-side quiz application that lets users create and take customized quizzes. Users can either **upload a CSV** of questions or **enter them manually** using a clean form. It supports both **Multiple Choice (MCQ)** and **True/False (TF)** questions. + +--- + +## ✨ Features + +- Live Demo πŸ‘‰ [SmartQuiz Builder](https://smart-quiz-builder.netlify.app/) +- 🎨 Eye-catching **Glassmorphism UI** +- πŸ“₯ Upload questions using a properly formatted **CSV** +- ✍️ Manually create quiz questions (MCQ / True-False) +- πŸ”€ Auto-shuffling of quiz questions before starting +- βœ… Real-time scoring and result summary +- πŸ“Š Clear, colorful result screen with correct/incorrect answers +- πŸ“± Fully responsive design +- πŸŒ™ Future-ready design: supports dark mode styling if extended + +--- + +![alt text](SS/01.png) +![alt text](SS/02.png) +![alt text](SS/03.png) +![alt text](SS/04.png) +![alt text](SS/05.png) +![alt text](SS/06.png) + +## πŸ“‚ CSV Format + +When uploading questions using CSV, make sure the file follows this structure (no headers required): + +```csv +question,option1,option2,option3,option4,correct_answer,type +``` + + +### βœ… Example (MCQ): +```csv +What is the capital of France?,Berlin,Madrid,Paris,Rome,Paris,MCQ +``` + + +### βœ… Example (True/False): +```csv +Is the sky blue?,,,,True,TF +``` + + +> Ensure there are no extra spaces or empty lines, and each row ends with the question `type` as either `MCQ` or `TF`. + +--- + +## πŸ§ͺ Manual Entry Instructions + +- Click on **β€œCreate Quiz Manually”** +- Enter: + - Question text + - Select type: MCQ or TF + - For MCQ, enter at least 2 options + - Enter the correct answer +- Add more questions using βž• **Add Question** +- Start the quiz by clicking **Start Quiz** + + + +--- + +## πŸ“Œ Technologies Used + +- HTML5 +- CSS3 (with custom variables and effects) +- JavaScript (DOM manipulation, state handling) + +--- + +## πŸ“„ Future Enhancements (Ideas) + +- ⏱️ Timer for each question +- 🎨 Dark Mode toggle +- πŸ“€ Export results to PDF +- πŸ’Ύ Save & resume quiz progress using LocalStorage +- πŸ”— Shareable quiz links + +--- + +## πŸ™Œ Credits + +Developed with ❀️ by **Prashant Gohel** + +- πŸ”— [YouTube – DevOpsWithUs](https://www.youtube.com/@DevOpsWithUs) +- πŸ§‘β€πŸ’» [GitHub – prashantgohel321](https://github.com/prashantgohel321) +- πŸ‘” [LinkedIn – prashantgohel1706](https://www.linkedin.com/in/prashantgohel1706) + +--- + +## πŸ“œ License + +This project is open-source and free to use. You can modify and extend it as per your needs. + +--- + + + diff --git a/Smart Quiz Builder/SS/01.png b/Smart Quiz Builder/SS/01.png new file mode 100644 index 00000000..fcc7d741 Binary files /dev/null and b/Smart Quiz Builder/SS/01.png differ diff --git a/Smart Quiz Builder/SS/02.png b/Smart Quiz Builder/SS/02.png new file mode 100644 index 00000000..c2ee548d Binary files /dev/null and b/Smart Quiz Builder/SS/02.png differ diff --git a/Smart Quiz Builder/SS/03.png b/Smart Quiz Builder/SS/03.png new file mode 100644 index 00000000..1ecbf129 Binary files /dev/null and b/Smart Quiz Builder/SS/03.png differ diff --git a/Smart Quiz Builder/SS/04.png b/Smart Quiz Builder/SS/04.png new file mode 100644 index 00000000..469897c4 Binary files /dev/null and b/Smart Quiz Builder/SS/04.png differ diff --git a/Smart Quiz Builder/SS/05.png b/Smart Quiz Builder/SS/05.png new file mode 100644 index 00000000..a260a5e9 Binary files /dev/null and b/Smart Quiz Builder/SS/05.png differ diff --git a/Smart Quiz Builder/SS/06.png b/Smart Quiz Builder/SS/06.png new file mode 100644 index 00000000..e17aa5eb Binary files /dev/null and b/Smart Quiz Builder/SS/06.png differ diff --git a/Smart Quiz Builder/index.html b/Smart Quiz Builder/index.html new file mode 100644 index 00000000..b90e550e --- /dev/null +++ b/Smart Quiz Builder/index.html @@ -0,0 +1,971 @@ + + + + + + SmartQuiz Builder + + + + + + + +
+ +
+

SmartQuiz Builder

+

Build and Play Custom Quizzes Instantly.

+
+ + +
+
+ +
+
+ + +
+

About SmartQuiz Builder

+

+ This site is for practitioners who want to practice questions and answers for themselves. +

+

+ Whether you're studying for an exam, preparing for an interview, or just looking to test your knowledge, SmartQuiz Builder provides a simple and effective way to create personalized quizzes. +

+
+ +
+
+ + +
+

Upload CSV

+
+ + +
+
+ +
Format: question,option1,option2,option3,option4,correct_answer,type
Example (MCQ): What is 2+2?,1,2,3,4,4,MCQ
Example (T/F): Is the sky blue?,,,,True,TF
+ +
+
+ + +
+
+ + +
+

Create Questions Manually

+
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+
+

Question text goes here?

+
+ +
+
+ + + +
+
+
+
00:00
+

Questions

+
+ +
+
+
+
+ + +
+

Quiz Results

+

You scored 8 out of 10

+

80%

+

+ +
+ + +
+
+ +
+
+ + + + + + diff --git a/Smart Quiz Builder/que.csv b/Smart Quiz Builder/que.csv new file mode 100644 index 00000000..9c566257 --- /dev/null +++ b/Smart Quiz Builder/que.csv @@ -0,0 +1,11 @@ +question,option1,option2,option3,option4,correct_answer,type +What is the capital of France?,Berlin,Madrid,Paris,Rome,Paris,MCQ +Which planet is known as the Red Planet?,Earth,Mars,Jupiter,Saturn,Mars,MCQ +What is the largest mammal?,Elephant,Blue Whale,Hippopotamus,Giraffe,Blue Whale,MCQ +What is the square root of 64?,6,7,8,9,8,MCQ +Who wrote 'Hamlet'?,Mark Twain,William Shakespeare,Charles Dickens,Leo Tolstoy,William Shakespeare,MCQ +Which gas do plants absorb?,Oxygen,Hydrogen,Nitrogen,Carbon Dioxide,Carbon Dioxide,MCQ +Which is the longest river in the world?,Amazon,Nile,Ganges,Yangtze,Nile,MCQ +How many continents are there?,5,6,7,8,7,MCQ +Which language is used to create web pages?,Python,HTML,C++,Java,HTML,MCQ +What color do you get when you mix red and blue?,Green,Purple,Orange,Pink,Purple,MCQ