My-Java-Script--Programs/Quiz JavaScript.txt at main · msrihanreddy5-code/My-Java-Script--Programs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Quiz App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="quiz-container">
    <h1>Quiz App</h1>
    <div id="high-scores"></div>
    <div id="question-section"></div>
    <div id="answer-section"></div>
    <div id="timer"></div>
    <button id="next-btn" style="display:none;">Next</button>
    <div id="result-section" style="display:none;"></div>
    <button id="restart-btn" style="display:none;">Restart Quiz</button>
  </div>
  <script src="questions.js"></script>
  <script src="index.js"></script>
</body>
</html>
body {
  background: #f2f2f2;
  font-family: Arial, sans-serif;
}

#quiz-container {
  background: #fff;
  margin: 30px auto;
  padding: 30px;
  border-radius: 8px;
  max-width: 430px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
  text-align: center;
}

#timer {
  font-weight: bold;
  color: #ff5722;
  margin: 10px 0;
  text-align: right;
}

#question-section {
  font-size: 1.2em;
  margin: 20px 0;
}

#answer-section button {
  display: block;
  width: 100%;
  background: #e0e0e0;
  border: none;
  margin: 8px 0;
  padding: 12px;
  font-size: 1em;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

#answer-section button.selected {
  background: #b3e5fc;
}

#answer-section button.correct {
  background: #c8e6c9;
}

#answer-section button.incorrect {
  background: #ffcdd2;
}

#next-btn, #restart-btn {
  background: #2196f3;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 1em;
  cursor: pointer;
  margin: 15px 0;
  width: 100%;
  transition: background 0.2s;
}

#next-btn:hover, #restart-btn:hover {
  background: #1976d2;
}

#high-scores {
  margin-bottom: 12px;
  font-size: 0.98em;
  color: #555;
}

#result-section {
  margin: 20px 0;
  background: #e3f2fd;
  padding: 12px;
  border-radius: 6px;
}
// Example questions in JSON format
const questions = [
  {
    question: "What is the capital of France?",
    choices: ["Berlin", "Paris", "Madrid", "Rome"],
    correct: 1
  },
  {
    question: "Which language runs in a web browser?",
    choices: ["Java", "C", "Python", "JavaScript"],
    correct: 3
  },
  {
    question: "What does HTML stand for?",
    choices: [
      "Hyper Trainer Marking Language",
      "Hyper Text Markup Language",
      "Hyper Text Marketing Language",
      "Hyper Tool Markup Language"
    ],
    correct: 1
  },
  {
    question: "Which year was JavaScript launched?",
    choices: ["1996", "1995", "1994", "None of the above"],
    correct: 1
  }
  // Add more questions as needed!
];