ExamGeneratorPro/index.html at main · robomustib/ExamGeneratorPro · 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
"""
ExamGeneratorPro (https://github.com/robomustib/ExamGeneratorPro)
Copyright (c) 2025 Mustafa Bilgin
Licensed under Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)
"""

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ExamGenerator Pro</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.3/jspdf.umd.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/src/exam.css">
</head>
<body>
  <div class="container">
    <h1>ExamGenerator Pro with Structured Grading Rubric</h1>

    <div class="upload-section">
      <h2>1. Upload CSV File or Create Questions</h2>
      <p>Format: "Question;Points;Type;Solution;Criterion1:Points1;Criterion2:Points2;..."</p>
      <p>Types: open, mc, gap, memory, connection</p>
      <input type="file" id="csvFile" accept=".csv">
      <button id="loadCsv" class="button">Load CSV</button>
      <button id="createSampleCsv" class="button button-secondary">Create Sample CSV</button>
      <div id="csvStatus" class="status">Status: Ready</div>
    </div>

    <div class="upload-section">
      <h2>2. Structured Grading Rubric (Optional)</h2>
      <p>Upload a CSV with structured assessment criteria</p>
      <p>Format: "Question;Solution;Criterion1:Points1;Criterion2:Points2;..."</p>
      <input type="file" id="expectationFile" accept=".csv">
      <button id="loadExpectations" class="button">Load Rubric</button>
      <button id="createSampleExpectations" class="button button-secondary">Sample Rubric CSV</button>
      <div id="expectationStatus" class="status">Status: Not loaded</div>
    </div>

    <div class="upload-section">
      <h2>3. Create Additional Questions</h2>
      <div class="task-builder">
        <div class="task-type-selector">
          <label for="taskType">Select question type:</label>
          <select id="taskType">
            <option value="open">Open Question</option>
            <option value="mc">Multiple Choice</option>
            <option value="gap">Fill in the Blanks</option>
            <option value="memory">Matching Pairs</option>
            <option value="connection">Connection Task</option>
          </select>
          <button id="addTaskType" class="button">Add Question Type</button>
        </div>

        <div id="taskForms" class="task-forms"></div>

        <div class="task-list">
          <h3>Created Questions</h3>
          <div id="taskList"></div>
        </div>
      </div>
    </div>

    <div class="upload-section">
      <h2>4. Configure Exam Header</h2>
      <div class="header-config">
        <div class="config-row">
          <div class="config-group">
            <label for="examTitle">Exam Title:</label>
            <input type="text" id="examTitle" value="Practice Exam">
          </div>
          <div class="config-group">
            <label for="examSubtitle">Subtitle:</label>
            <input type="text" id="examSubtitle" value="Winter Semester 2024">
          </div>
        </div>
        <div class="config-row">
          <div class="config-group">
            <label for="logoUpload">Upload Logo:</label>
            <input type="file" id="logoUpload" accept="image/*">
          </div>
          <div class="config-group">
            <label>Or use default logo:</label>
            <button id="useDefaultLogo" class="button button-secondary">Use Default Logo</button>
          </div>
        </div>
      </div>
    </div>

    <div class="upload-section">
      <h2>5. Generate Practice Exam</h2>
      <label for="targetPoints">Total points:</label>
      <input type="number" id="targetPoints" value="50" min="1" style="width:80px; margin-left:10px;">
      <button id="generateExam" class="button" disabled>Generate Exam</button>
      <div id="generationStatus" class="status"></div>
    </div>

    <div class="exam-preview hidden" id="examPreview">
      <h2>Exam Preview</h2>

      <div class="student-fields">
        <div class="student-field">
          <label for="studentName">Name:</label>
          <input type="text" id="studentName" placeholder="First Name Last Name">
        </div>
        <div class="student-field">
          <label for="studentClass">Class/Course:</label>
          <input type="text" id="studentClass" placeholder="e.g. 10a, Math Course">
        </div>
        <div class="student-field">
          <label for="studentDate">Date:</label>
          <input type="text" id="studentDate" placeholder="DD.MM.YYYY">
        </div>
      </div>

      <div id="examHeader" class="exam-header">
        <div class="exam-title">
          <h2 id="previewTitle">Practice Exam</h2>
          <p id="previewSubtitle" class="exam-subtitle">Winter Semester 2024</p>
        </div>
        <div class="exam-logo">
          <img id="previewLogo" src="" alt="Logo" style="display: none;">
        </div>
      </div>
      <div id="examContent"></div>
      <div class="total-points" id="totalPoints"></div>

      <div class="pdf-buttons">
        <button id="exportPdf" class="button button-success">Export Exam as PDF</button>
        <button id="exportSolution" class="button button-warning">Export Assessment Sheet</button>
      </div>

      <div class="expectation-section hidden" id="expectationPreview">
        <div class="expectation-header">
          <h2>Structured Grading Rubric / Assessment Sheet</h2>
        </div>
        <div id="expectationContent"></div>
      </div>
    </div>
  </div>
 <script src="src/exam.js"></script>
</body>
</html>