QuizSense/index.html at main · atharrva01/QuizSense · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adaptive Quiz Engine</title>
  <link rel="stylesheet" href="./css/style.css">

</head>
<body>

  <header class="navbar">
    <div class="logo">Adaptive Quiz Engine</div>
    <nav>
      <a href="#features">Features</a>
      <a href="#how">How It Works</a>
      <a href="#contact">Contact</a>
    </nav>
    <button class="login-btn" id="homeBtn">Get Started</button>
  </header>

  <section class="hero">
    <div class="hero-left">
      <h1>Adaptive Quiz Engine<br>with Smart <span class="highlight">Item Bank</span> and Analytics</h1>

      <p class="subtext">
        A dynamic quiz platform that adjusts difficulty in real-time based on student performance,
        powered by a structured item bank and deep analytics for teachers and admins.
      </p>

      <div class="cta-row">
        <button class="primary-btn" id="startBtn">Start Quiz Now</button>
      </div>
    </div>

    <div class="hero-right">
      <div class="preview-card">
        <h3>Performance Overview</h3>
        <div class="progress-bar"></div>

        <div class="stats-row">
          <div class="stat-box">
            <h2>82%</h2>
            <p>Accuracy</p>
          </div>
          <div class="stat-box">
            <h2>27</h2>
            <p>Questions</p>
          </div>
          <div class="stat-box">
            <h2>Medium</h2>
            <p>Difficulty</p>
          </div>
        </div>

        <div class="note-box">
          Smart adaptation active based on your responses
        </div>
      </div>
    </div>
  </section>

  <section class="features" id="features">
    <h2 class="section-title">Core Features</h2>

    <div class="feature-grid">
      <div class="feature-card">
        <div class="feature-icon">🧠</div>
        <h3>Adaptive Quiz Flow</h3>
        <p>
          Questions automatically increase or decrease difficulty based on the learner's response patterns.
        </p>
      </div>

      <div class="feature-card">
        <div class="feature-icon">📚</div>
        <h3>Structured Item Bank</h3>
        <p>
          Categorized and leveled questions stored securely with metadata like difficulty, topic, and type.
        </p>
      </div>

      <div class="feature-card">
        <div class="feature-icon">📊</div>
        <h3>Admin Dashboard</h3>
        <p>
          View performance charts, student progress, item difficulty distribution, and quiz analytics.
        </p>
      </div>

      <div class="feature-card">
        <div class="feature-icon">🎯</div>
        <h3>Performance Insights</h3>
        <p>
          Track accuracy, time-per-question, topic-wise weaknesses, and improvement trends.
        </p>
      </div>
    </div>
  </section>

  <section class="how-it-works" id="how">
    <h2 class="section-title">How It Works</h2>

    <div class="steps-grid">
      <div class="step">
        <div class="step-circle">1</div>
        <h3>Student Starts Quiz</h3>
        <p>System picks a question based on medium difficulty.</p>
      </div>

      <div class="step">
        <div class="step-circle">2</div>
        <h3>Engine Analyses Answers</h3>
        <p>Correct answer → increase difficulty, Incorrect → decrease.</p>
      </div>

      <div class="step">
        <div class="step-circle">3</div>
        <h3>Adaptive Questioning</h3>
        <p>Algorithm selects next question from the item bank.</p>
      </div>

      <div class="step">
        <div class="step-circle">4</div>
        <h3>Analytics Generated</h3>
        <p>Dashboards show accuracy, topics, time, and difficulty curve.</p>
      </div>
    </div>
  </section>

  <footer id="contact">
    <p>Adaptive Quiz Engine – OJT Project 2025</p>
    <p>Built by Atharva & Aman</p>
  </footer>

  <script>
    document.getElementById("startBtn").addEventListener("click", () => {
      localStorage.setItem("enteredUser", "true");
      window.location.href = "./Screens/user.html";
    });

    document.getElementById("homeBtn").addEventListener("click", () => {
      localStorage.setItem("enteredUser", "true");
      window.location.href = "./Screens/user.html";
    });

    // Smooth scrolling for navigation links
    document.querySelectorAll('nav a').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    });
  </script>

</body>
</html>