diff --git a/content/participant/Moazam.md b/content/participant/Moazam.md new file mode 100644 index 0000000..e98742e --- /dev/null +++ b/content/participant/Moazam.md @@ -0,0 +1,5 @@ +--- +name: Syed Moazam Ali +institution: UET TAXILA PAKISTAN +github: https://github.com/MoazamAli45 +--- diff --git a/quiz-app/.prettierrc b/quiz-app/.prettierrc new file mode 100644 index 0000000..b4f8e6a --- /dev/null +++ b/quiz-app/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "arrowParens": "avoid" +} diff --git a/quiz-app/index.html b/quiz-app/index.html new file mode 100644 index 0000000..7c4118a --- /dev/null +++ b/quiz-app/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + Quiz App + + + +
+
+

Q1) What is Your Name?

+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + diff --git a/quiz-app/readme.md b/quiz-app/readme.md new file mode 100644 index 0000000..d4c4a3f --- /dev/null +++ b/quiz-app/readme.md @@ -0,0 +1,54 @@ +# Quiz App + +Welcome to the Quiz App! This application is built using HTML, CSS, and JavaScript and is fully responsive. + +## Features + +- Multiple choice questions +- Real-time score tracking +- Responsive design for all devices +- Timer for each question +- Interactive UI/UX + +## Technologies Used + +- HTML +- CSS +- JavaScript + +## Getting Started + +Follow these instructions to get a copy of the project up and running on your local machine. + +### Prerequisites + +Make sure you have a web browser installed. + +### Installation + +1. Clone the repository: + ```bash + git clone https://github.com/yourusername/quiz-app.git + ``` +2. Navigate to the project directory: + ```bash + cd quiz-app + ``` +3. Open `index.html` in your web browser to start the app. + +## Usage + +1. Start the quiz by clicking the "Start Quiz" button. +2. Select the correct answer from the multiple choices. +3. Your score will be updated in real-time. +4. Complete all questions to see your final score. + +## License + +This project is licensed under the MIT License. + +## Contact + +For any questions or feedback, please contact [your email]. + +Enjoy the quiz! diff --git a/quiz-app/src/app.js b/quiz-app/src/app.js new file mode 100644 index 0000000..74285b4 --- /dev/null +++ b/quiz-app/src/app.js @@ -0,0 +1,182 @@ +console.log('Moazam'); +const question = [ + { + ques: 'Which of the following is the markup Language?', + a: 'HTML', + b: 'CSS', + c: 'JavaScript', + d: 'PHP', + correct: 'a', + }, + // 2 nd qs + { + ques: 'In Which JavaScript was launched?', + a: '1996', + b: '1995', + c: '1998', + d: '2000', + correct: 'b', + }, + { + ques: 'What does CSS stands for?', + a: 'Cascade Style Sheet', + b: 'Cascading Style Sheet', + c: 'Hyper Text Markup Lanaguage', + d: 'Jason object Notation', + correct: 'b', + }, +]; + +const total = question.length; +const display = document.querySelector('.box'); +const ques = document.querySelector('.Ques'); +const options = document.querySelectorAll('.options'); +const btn = document.querySelector('.submit'); +const again = document.querySelector('.again'); +let index = 0; +let right = 0; +let wrong = 0; + +// for without result +// const emptyQues = function () { +// display.innerHTML = ''; +// loadQues(); +// }; + +const loadQues = function () { + if (index !== total) { + console.log(index); + let data = question[index]; + console.log(data); + /* + const html = `

Q${index + 1}) ${data.ques}

+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+ `; + */ + + //////// this is for without try again button + ques.innerText = `Q${index + 1}) ${data.ques}`; + + options[0].nextElementSibling.innerText = data.a; + options[1].nextElementSibling.innerText = data.b; + options[2].nextElementSibling.innerText = data.c; + options[3].nextElementSibling.innerText = data.d; + + // for without result correct + // display.innerHTML = html; + } else { + endQuiz(); + } +}; +const getResult = function () { + let data = question[index]; + console.log(data); + const answer = checkAnswer(); + if (answer == data.correct) { + right++; + } else { + wrong++; + } + index++; + reset(); + loadQues(); + return; +}; +const reset = () => { + options.forEach(input => { + input.checked = false; + }); +}; + +const checkAnswer = function () { + let answer; + options.forEach(input => { + if (input.checked) { + answer = input.value; + } + }); + return answer; +}; +const endQuiz = () => { + if (index !== total) { + console.log(display); + display.innerHTML = ''; + } + let html = ''; + if (right === total) { + html = `Excellent👏`; + } else if (right == total - 1) { + html = `Good 👍`; + } else if (right == total - 2) { + html = `Satisfactory `; + } else { + html = `Better Luck Next time`; + } + // console.log(display); + // again.classList.remove('hidden'); + display.innerHTML = ` + +

Thank you for solving the quiz!!

+

Correct Options: ${right}/${total} +

+

${html}

+`; + // without result + // +}; + +// withput result +// function againStart() { +// console.log(index); +// index = 0; +// right = 0; +// emptyQues(); +// } + +// in start load Question +loadQues(); +// this is for without try agan button +btn.addEventListener('click', getResult); +// console.log(again); diff --git a/quiz-app/src/quizz.jpg b/quiz-app/src/quizz.jpg new file mode 100644 index 0000000..d5b9c08 Binary files /dev/null and b/quiz-app/src/quizz.jpg differ diff --git a/quiz-app/src/style.css b/quiz-app/src/style.css new file mode 100644 index 0000000..de4f5a1 --- /dev/null +++ b/quiz-app/src/style.css @@ -0,0 +1,119 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); +* { + padding: 0px; + margin: 0px; +} +body { + font-size: 62.5%; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} +main { + /* position: relative; */ + width: 100%; + height: 100vh; + background: linear-gradient( + to right bottom, + rgb(52, 152, 219), + rgb(41, 128, 185) + ), + url('../src/quizz.jpg'); + background-position: center; + background-size: cover; + background-blend-mode: screen; + display: flex; + justify-content: center; + align-items: center; +} +.box { + background-color: white; + width: 42%; + height: 300px; + padding: 15px; + border-radius: 5px; + position: relative; +} +.Ques { + font-size: 1.5rem; +} +.row { + font-size: 1rem; + margin: 2rem; + margin-left: 0px; +} +.btn { + outline: none; + width: 100%; + font-size: 1rem; + background-color: #3498db; + border: none; + border-radius: 5px; + font-weight: 500; + padding: 5px; + font-family: Roboto; + color: white; + transition: all 0.3s; +} +.btn:hover { + background-color: rgb(41, 128, 185); +} +.head { + font-size: 2rem; + margin: 20px; + /* height: 300px; */ +} +.marks { + font-size: 1.5rem; + margin: 50px; +} +.result { + font-size: 2rem; + text-align: center; +} +.again { + margin-top: 35px; + position: absolute; + display: block; + /* opacity: 1; */ + width: 95%; + /* transform: translateY(6rem) translateX(-35rem); */ + /* bottom: 11rem; */ +} +.hidden { + display: none; +} +.copyRight { + font-size: 0.75rem; + + position: absolute; + margin-inline: auto; + bottom: 2rem; +} +@media screen and (max-width: 576px) { + .box { + width: 60%; + } + .Ques { + font-size: 1rem; + } + .row { + font-size: 0.75rem; + } + .btn { + font-size: 0.75rem; + } + .marks { + font-size: 1rem; + } + .result { + font-size: 1.3rem; + text-align: center; + } + .head { + font-size: 1.3rem; + } + .again{ + width:90%; + } +} + diff --git a/static/images/moazam.jpg b/static/images/moazam.jpg new file mode 100644 index 0000000..5b87a15 Binary files /dev/null and b/static/images/moazam.jpg differ