diff --git a/Rishi_20230087/index.html b/Rishi_20230087/index.html new file mode 100644 index 0000000..0018fbc --- /dev/null +++ b/Rishi_20230087/index.html @@ -0,0 +1,40 @@ + + + + + + Quiz App + + + +
+ +
+

Select a Topic

+ + + +
+ + +
+
+

+
+ + +
+
+

+
+ + +
+

Your Score:

+ + +
+
+ + + diff --git a/Rishi_20230087/script.js b/Rishi_20230087/script.js new file mode 100644 index 0000000..11ae40a --- /dev/null +++ b/Rishi_20230087/script.js @@ -0,0 +1,64 @@ +let currentScreen = 'topic-selection'; +let currentTopic = ''; +let currentQuestionIndex = 0; +let score = 0; + +const questions = { + Physics: [ + { text: 'Magnetic field lines exits in circular loop', correct: true }, + { text: 'Nuclear reaction are the zeroth order reactions', correct: false } + ], + Chemistry: [ + { text: 'SN1 reaction is favourable in tertiary Alkyl halide', correct: true }, + { text: 'AgCl ppt is blue in colour', correct: false } + ], + Computer: [ + { text: 'this keyword in java is used to diiferentiate between actual parameters and formal parameters', correct: true }, + { text: 'Method overloading amd method overriding are same ', correct: false } + ] +}; + +function showScreen(screen) { + document.querySelector(`#${currentScreen}`).classList.remove('active'); + document.querySelector(`#${screen}`).classList.add('active'); + currentScreen = screen; +} + +function selectTopic(topic) { + currentTopic = topic; + currentQuestionIndex = 0; + score = 0; + showScreen('quiz-questions'); + showQuestion(); +} + +function showQuestion() { + const question = questions[currentTopic][currentQuestionIndex]; + document.querySelector('#question-text').innerText = question.text; + document.querySelector('#question-number').innerText = `Question ${currentQuestionIndex + 1} of ${questions[currentTopic].length}`; +} + +function answerQuestion(answer) { + const question = questions[currentTopic][currentQuestionIndex]; + if (question.correct === answer) { + score++; + } + currentQuestionIndex++; + if (currentQuestionIndex < questions[currentTopic].length) { + showQuestion(); + } else { + document.querySelector('#score').innerText = score; + showScreen('final-score'); + } +} + +function retry() { + selectTopic(currentTopic); +} + +function goHome() { + showScreen('topic-selection'); +} + +// Initial setup +showScreen('topic-selection'); diff --git a/Rishi_20230087/style.css b/Rishi_20230087/style.css new file mode 100644 index 0000000..73686ba --- /dev/null +++ b/Rishi_20230087/style.css @@ -0,0 +1,107 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background: linear-gradient(135deg, #4A90E2, #7B4397, #4A90E2); + color: white; + animation: backgroundGradient 10s ease infinite; + } + + @keyframes backgroundGradient { + 0%,100% { background: linear-gradient(135deg, #4A90E2, #7B4397, #4A90E2); } + 50% { background: linear-gradient(135deg, #7B4397, #4A90E2, #7B4397); } + } + + #myH2 { + color: #232526; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 2.5em; + font-style: italic; + animation: fadeIn 2s ease-in-out; + } + + @keyframes fadeIn { + 0% { opacity: 0; transform: translateY(-20px); } + 100% { opacity: 1; transform: translateY(0); } + } + + #app { + width: 500px; + text-align: center; + padding: 20px; + border: 5px solid #7B4397; + border-radius: 10px; + background: rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 16px rgba(94, 201, 230, 0.3); + animation: popUp 1s ease-in-out; + } + + @keyframes popUp { + 0% { transform: scale(0.5); opacity: 0; } + 100% { transform: scale(1); opacity: 1; } + } + + .screen { + background-color: #7B4397; + display: none; + } + + .screen.active { + display: block; + animation: slideIn 0.5s ease-in-out; + } + + @keyframes slideIn { + 0% { transform: translateX(-100%); opacity: 0; } + 100% { transform: translateX(0); opacity: 1; } + } + + button { + display: block; + margin: 10px auto; + padding: 10px 20px; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 16px; + cursor: pointer; + border: none; + border-radius: 5px; + background-color: #7B4397; + color: white; + transition: background-color 0.3s, transform 0.3s; + } + + button:hover { + background-color: #e35f8e; + transform: translateY(-5px); + } + + button:active { + transform: translateY(0); + } + + #question-card { + border: 1px solid #ddd; + padding: 20px; + margin: 20px 0; + border-radius: 10px; + background-color: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + animation: fadeInCard 1s ease-in-out; + } + + @keyframes fadeInCard { + 0% { opacity: 0; transform: translateY(20px); } + 100% { opacity: 1; transform: translateY(0); } + } + + #swipe-buttons { + display: flex; + justify-content: space-between; + } + + #swipe-buttons button { + width: 45%; + }