Hugging Face's logo

Spaces:
Nuzwa
/
_EduAssessPro_Smart_Exam_Papper_Designer_
Running

App Files Community
Nuzwa commited on
Commit
24ef1b8
·
verified ·
1 Parent(s): 3a90d0e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +79 -201
index.html CHANGED
@@ -3,13 +3,11 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Edu AssessPro - Exam Paper Designer</title>
7
- <!-- Poppins 400/600/700 -->
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
11
  <style>
12
- /* ========== 1) Design Tokens (exact) ========== */
13
  :root{
14
  --primary-color-start: #4F46E5;
15
  --primary-color-end: #8B5CF6;
@@ -19,7 +17,6 @@
19
  --label-color: #374151;
20
  --border-color: #d1d5db;
21
  --shadow-color: rgba(0, 0, 0, 0.08);
22
- /* Fixed colors (don’t change) */
23
  --fixed-outer-border: #e5e7eb;
24
  --fixed-subtitle: #6b7280;
25
  --fixed-inputs-bg: #f9fafb;
@@ -32,265 +29,146 @@
32
  --fixed-pre-border: #1f2937;
33
  --fixed-toast-shadow: rgba(0,0,0,.2);
34
  }
35
-
36
- /* ========== 2) Base Layout & Typography ========== */
37
  html,body{height:100%}
38
  body{
39
  padding:1rem; display:flex; justify-content:center; align-items:flex-start;
40
  min-height:100vh; background:var(--background-color); color:var(--text-color);
41
- font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
42
- font-size:1rem;
43
  }
44
  .container{
45
  max-width:820px; width:100%; background:var(--container-bg); padding:2rem; border-radius:16px;
46
  box-shadow:0 10px 30px var(--shadow-color); border:1px solid var(--fixed-outer-border);
47
  }
48
- @media (max-width:600px){ .container{ padding:1.25rem; } }
49
-
50
  h1{
51
  font-size:2rem; font-weight:700; margin:0 0 .75rem 0; text-align:center;
52
  background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
53
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
54
  }
55
- .subtitle{ font-size:.9rem; color:var(--fixed-subtitle); text-align:center; margin-bottom:.75rem; }
56
-
57
- label{ font-weight:600; color:var(--label-color); margin-top:1rem; margin-bottom:.4rem; font-size:.95rem; display:block; }
58
-
59
- .row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1rem; }
60
- .actions{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1.25rem; }
61
- .toolbar{ display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap; margin:.35rem 0 1rem; }
62
- .toolbar select{ width:auto; min-width:12ch; }
63
- .note{ font-size:.8rem; color:var(--fixed-subtitle); margin-top:.25rem; }
64
-
65
- pre#output{
66
- background:var(--fixed-pre-bg); color:#e5e7eb; padding:1rem 1.25rem; border-radius:12px; margin-top:1rem;
67
- border:1px solid var(--fixed-pre-border); font-size:.92rem; line-height:1.6; white-space:pre-wrap; word-break:break-word;
68
- }
69
-
70
- /* ========== 4) Inputs / Textareas / Selects (uniform) ========== */
71
- .field, select, textarea{
72
- width:100%; padding:.8rem 1rem; border-radius:10px; border:1px solid var(--border-color);
73
- background:var(--fixed-inputs-bg); transition:all .2s; font-size:1rem;
74
  }
75
- .field:focus, select:focus, textarea:focus{
76
- outline:none; border-color:var(--primary-color-start); box-shadow:0 0 0 3px var(--fixed-focus-shadow); background:#fff;
77
  }
78
-
79
- /* Select (custom chevron) */
80
- select{
81
- -webkit-appearance:none; -moz-appearance:none; appearance:none;
82
- padding-right:2.25rem;
83
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="%234F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
84
- background-repeat:no-repeat; background-position:right .75rem center; background-size:14px;
85
- }
86
- select::-ms-expand{ display:none; }
87
- select:disabled{ opacity:.6; cursor:not-allowed; }
88
-
89
- textarea{ min-height:110px; resize:vertical; }
90
-
91
- /* ========== 5) Buttons ========== */
92
  .btn{
93
- display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; user-select:none;
94
- background:linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
95
- color:var(--fixed-text-on-primary); padding:.9rem 1.2rem; border:none; border-radius:10px; width:100%;
96
- font-weight:700; font-size:1.05rem; box-shadow:0 4px 15px var(--fixed-btn-shadow); transition:transform .15s ease, box-shadow .15s ease;
 
97
  }
98
- .btn:hover{ transform:translateY(-2px); box-shadow:0 7px 20px var(--fixed-btn-hover-shadow); }
99
- .btn:active{ transform:translateY(0); }
100
- .btn.secondary{ background:var(--fixed-secondary-bg); }
101
-
102
- /* ========== 7) Toast ========== */
103
- .toast{
104
- position:fixed; right:16px; bottom:16px; background:var(--fixed-secondary-bg); color:#fff;
105
- padding:10px 12px; border-radius:10px; box-shadow:0 8px 20px var(--fixed-toast-shadow);
106
- opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s; z-index:50;
107
  }
108
- .toast.show{ opacity:1; transform:translateY(0); }
109
-
110
- .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
 
111
  </style>
112
  </head>
113
  <body>
114
- <div class="container" role="application" aria-label="Prompt builder demo">
115
- <h1>Tokens-Exact UI Demo</h1>
116
- <p class="subtitle">All styles derive strictly from the provided Design Tokens. Selects use a uniform custom chevron. <strong>Output is plain text prompt (not JSON).</strong></p>
117
-
118
- <!-- Toolbar -->
119
- <div class="toolbar" aria-label="Quick filters">
120
- <select aria-label="Level filter" class="field" id="tb-level">
121
- <option value="All Levels" selected>All Levels</option>
122
- <option>Beginner</option>
123
- <option>Intermediate</option>
124
- <option>Advanced</option>
125
- </select>
126
- <select aria-label="Language filter" class="field" id="tb-lang">
127
- <option value="English" selected>English</option>
128
- <option>Urdu</option>
129
- <option>Bilingual</option>
130
- </select>
131
- </div>
132
-
133
- <!-- Two-column form -->
134
  <div class="row">
135
  <div>
136
  <label for="grade">Grade</label>
137
- <select id="grade" class="field" required>
138
- <option selected>Grade 9</option>
139
- <option>Grade 10</option>
140
- <option>Grade 11</option>
141
- <option>Grade 12</option>
142
  </select>
143
  </div>
144
  <div>
145
  <label for="subject">Subject</label>
146
- <select id="subject" class="field" required>
147
- <option selected>Physics</option>
148
- <option>Chemistry</option>
149
- <option>Biology</option>
150
- <option>Mathematics</option>
151
  </select>
152
  </div>
153
  <div>
154
  <label for="board">Board</label>
155
- <select id="board" class="field" required>
156
- <option selected>FBISE (Federal)</option>
157
- <option>PCTB (Punjab)</option>
158
- <option>Sindh Board</option>
159
- <option>KPK Board</option>
160
- <option>Balochistan Board</option>
161
- <option>AKUEB</option>
162
  </select>
163
  </div>
164
  <div>
165
  <label for="testType">Test Type</label>
166
- <select id="testType" class="field" required>
167
- <option selected>Formative</option>
168
- <option>Summative</option>
169
- <option>Diagnostic</option>
170
  </select>
171
  </div>
172
  <div>
173
  <label for="questionType">Question Type</label>
174
  <select id="questionType" class="field">
175
- <option selected>MCQs</option>
176
- <option>Short Questions</option>
177
- <option>Long Questions</option>
178
- <option>Practical/Diagram</option>
179
- <option>Moral/Ethical</option>
180
- <option>Islamic</option>
181
  </select>
182
- <div class="note">Uniform chevron applies across all browsers.</div>
183
  </div>
184
  <div>
185
  <label for="duration">Duration</label>
186
  <select id="duration" class="field">
187
- <option selected>45 minutes</option>
188
- <option>30 minutes</option>
189
- <option>60 minutes</option>
190
  </select>
191
  </div>
192
- <div>
193
  <label for="topic">Topic (optional)</label>
194
- <input id="topic" class="field" type="text" placeholder="e.g., Unit 2 (Dynamics)" />
195
- </div>
196
- <div>
197
- <label for="mcqs">MCQs Count (optional)</label>
198
- <input id="mcqs" class="field" type="number" min="1" step="1" placeholder="e.g., 20" />
199
- </div>
200
- <div style="grid-column:1 / -1">
201
- <label for="notes">Additional Notes</label>
202
- <textarea id="notes" class="field" placeholder="Any special instructions..."></textarea>
203
  </div>
204
  </div>
205
-
206
  <div class="actions">
207
- <button id="gen" class="btn" type="button" aria-label="Generate prompt from form">Generate Prompt</button>
208
- <button id="copy" class="btn secondary" type="button" aria-label="Copy full prompt and open GPT">Copy Prompt and Paste Now</button>
209
  </div>
210
-
211
- <pre id="output" aria-live="polite" aria-atomic="true"></pre>
212
  </div>
213
-
214
- <div id="toast" class="toast" role="status" aria-live="polite">Copied!</div>
215
-
216
  <script>
217
- const $ = (s)=>document.querySelector(s);
218
- const CUSTOM_GPT_URL = "https://chatgpt.com/g/g-68697e4c49508191b175d86830b34d85-eduassess-pro-smart-exam-paper-designer";
219
-
220
- const state = {
221
- fullPromptString: "" // complete prompt (not the streaming text)
222
- };
223
-
224
  function buildPrompt(){
225
- const payload = {
226
- grade: $('#grade').value,
227
- subject: $('#subject').value,
228
- board: $('#board').value,
229
- testType: $('#testType').value,
230
- questionType: $('#questionType').value,
231
- duration: $('#duration').value,
232
- topic: $('#topic').value || null,
233
- mcqs: $('#mcqs').value ? Number($('#mcqs').value) : null,
234
- notes: $('#notes').value || null,
235
- quickFilters: { level: $('#tb-level').value, language: $('#tb-lang').value }
236
  };
237
- // Compose human-readable, plain-text prompt
238
- let p = `Create a ${payload.testType} exam for ${payload.grade} — ${payload.subject} (Board: ${payload.board}).`;
239
- p += ` Include ${payload.questionType} with a duration of ${payload.duration}.`;
240
- if(payload.topic) p += ` Topic focus: ${payload.topic}.`;
241
- if(payload.mcqs) p += ` MCQs count: ${payload.mcqs}.`;
242
- if(payload.notes) p += ` Notes: ${payload.notes}.`;
243
- p += ` Language: ${payload.quickFilters.language}. Level: ${payload.quickFilters.level}.`;
244
- return p.trim();
245
- }
246
-
247
- // Typewriter (~7ms per char, batched)
248
- async function typeWriterPrint(fullText){
249
- const out = $('#output');
250
- out.textContent = '';
251
- const chars = Array.from(fullText);
252
- for(let i=0;i<chars.length;i++){
253
- out.textContent += chars[i];
254
- if(i % 20 === 0){ await new Promise(r=>setTimeout(r,7)); }
255
- }
256
- }
257
-
258
- function showToast(msg){
259
- const t = $('#toast');
260
- t.textContent = msg;
261
- t.classList.add('show');
262
- setTimeout(()=> t.classList.remove('show'), 1800);
263
  }
264
-
265
- $('#gen').addEventListener('click', async ()=>{
266
- const prompt = buildPrompt();
267
- state.fullPromptString = prompt; // store complete prompt before streaming
268
- await typeWriterPrint(prompt);
269
  });
270
-
271
- $('#copy').addEventListener('click', async ()=>{
272
- const text = state.fullPromptString || buildPrompt();
273
- try{
274
- await navigator.clipboard.writeText(text);
275
- showToast('Copied!');
276
- const popup = window.open(CUSTOM_GPT_URL, '_blank', 'noopener,noreferrer');
277
- // If popup blocked, user still has copied text and can click again
278
- }catch(err){
279
- showToast('Copy failed');
280
- }
281
  });
282
  </script>
283
-
284
- <!--
285
- Checklist (QA)
286
- :root tokens exact
287
- All <select> custom chevron + padding-right:2.25rem
288
- Uniform focus state
289
- Buttons: gradient + hover/active + shadows exact
290
- Grid .row gaps: .75rem x 1rem
291
- .container shadow/rounded/border exact; mobile padding 1.25rem @<=600px
292
- pre#output dark style exact
293
- Typewriter present; Copy copies FULL PROMPT and opens GPT
294
- -->
295
  </body>
296
  </html>
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Edu Assess Pro - smart Exam Paper Designer</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
10
  <style>
 
11
  :root{
12
  --primary-color-start: #4F46E5;
13
  --primary-color-end: #8B5CF6;
 
17
  --label-color: #374151;
18
  --border-color: #d1d5db;
19
  --shadow-color: rgba(0, 0, 0, 0.08);
 
20
  --fixed-outer-border: #e5e7eb;
21
  --fixed-subtitle: #6b7280;
22
  --fixed-inputs-bg: #f9fafb;
 
29
  --fixed-pre-border: #1f2937;
30
  --fixed-toast-shadow: rgba(0,0,0,.2);
31
  }
 
 
32
  html,body{height:100%}
33
  body{
34
  padding:1rem; display:flex; justify-content:center; align-items:flex-start;
35
  min-height:100vh; background:var(--background-color); color:var(--text-color);
36
+ font-family:"Poppins",sans-serif; font-size:1rem;
 
37
  }
38
  .container{
39
  max-width:820px; width:100%; background:var(--container-bg); padding:2rem; border-radius:16px;
40
  box-shadow:0 10px 30px var(--shadow-color); border:1px solid var(--fixed-outer-border);
41
  }
42
+ @media (max-width:600px){.container{padding:1.25rem}}
 
43
  h1{
44
  font-size:2rem; font-weight:700; margin:0 0 .75rem 0; text-align:center;
45
  background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
46
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
47
  }
48
+ .subtitle{font-size:.9rem;color:var(--fixed-subtitle);text-align:center;margin-bottom:.75rem}
49
+ label{font-weight:600;color:var(--label-color);margin-top:1rem;margin-bottom:.4rem;font-size:.95rem;display:block}
50
+ .row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem}
51
+ .actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.25rem}
52
+ .field,select,textarea{
53
+ width:100%;padding:.8rem 1rem;border-radius:10px;border:1px solid var(--border-color);
54
+ background:var(--fixed-inputs-bg);transition:all .2s;font-size:1rem;
 
 
 
 
 
 
 
 
 
 
 
 
55
  }
56
+ .field:focus,select:focus,textarea:focus{
57
+ outline:none;border-color:var(--primary-color-start);box-shadow:0 0 0 3px var(--fixed-focus-shadow);background:#fff;
58
  }
59
+ select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.25rem;
 
 
 
 
60
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="%234F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
61
+ background-repeat:no-repeat;background-position:right .75rem center;background-size:14px;}
62
+ select::-ms-expand{display:none}
 
 
 
 
 
 
63
  .btn{
64
+ display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
65
+ background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
66
+ color:var(--fixed-text-on-primary);padding:.9rem 1.2rem;border:none;border-radius:10px;width:100%;
67
+ font-weight:700;font-size:1.05rem;box-shadow:0 4px 15px var(--fixed-btn-shadow);
68
+ transition:transform .15s ease,box-shadow .15s ease;
69
  }
70
+ .btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px var(--fixed-btn-hover-shadow)}
71
+ .btn:active{transform:translateY(0)}
72
+ pre#output{
73
+ background:var(--fixed-pre-bg);color:#e5e7eb;padding:1rem 1.25rem;border-radius:12px;margin-top:1rem;
74
+ border:1px solid var(--fixed-pre-border);font-size:.92rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;
 
 
 
 
75
  }
76
+ .toast{position:fixed;right:16px;bottom:16px;background:var(--fixed-secondary-bg);color:#fff;
77
+ padding:10px 12px;border-radius:10px;box-shadow:0 8px 20px var(--fixed-toast-shadow);
78
+ opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;z-index:50}
79
+ .toast.show{opacity:1;transform:translateY(0)}
80
  </style>
81
  </head>
82
  <body>
83
+ <div class="container">
84
+ <h1>Edu Assess Pro - smart Exam Paper Designer</h1>
85
+ <p class="subtitle">Fill the fields to generate a <strong>plain text prompt</strong>. Design tokens, layout, spacing, and colors remain exactly as specified.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  <div class="row">
87
  <div>
88
  <label for="grade">Grade</label>
89
+ <select id="grade" class="field">
90
+ <option>Grade 1</option><option>Grade 2</option><option>Grade 3</option><option>Grade 4</option>
91
+ <option>Grade 5</option><option>Grade 6</option><option>Grade 7</option><option>Grade 8</option>
92
+ <option>Grade 9</option><option>Grade 10</option><option>Grade 11</option><option>Grade 12</option>
 
93
  </select>
94
  </div>
95
  <div>
96
  <label for="subject">Subject</label>
97
+ <select id="subject" class="field">
98
+ <option>Mathematics</option><option>English</option><option>Urdu</option><option>Science</option>
99
+ <option>Physics</option><option>Chemistry</option><option>Biology</option><option>Computer Science</option>
100
+ <option>Islamiat</option><option>Pakistan Studies</option>
 
101
  </select>
102
  </div>
103
  <div>
104
  <label for="board">Board</label>
105
+ <select id="board" class="field">
106
+ <option>PCTB (Punjab)</option><option>FBISE (Federal)</option><option>Sindh Board</option>
107
+ <option>KPK Board</option><option>Balochistan Board</option><option>AKUEB</option>
 
 
 
 
108
  </select>
109
  </div>
110
  <div>
111
  <label for="testType">Test Type</label>
112
+ <select id="testType" class="field">
113
+ <option>Formative</option><option>Summative</option><option>Diagnostic</option>
 
 
114
  </select>
115
  </div>
116
  <div>
117
  <label for="questionType">Question Type</label>
118
  <select id="questionType" class="field">
119
+ <option>MCQs</option><option>Short Questions</option><option>Long Questions</option>
120
+ <option>Practical/Diagram</option><option>Moral/Ethical</option><option>Islamic</option>
 
 
 
 
121
  </select>
 
122
  </div>
123
  <div>
124
  <label for="duration">Duration</label>
125
  <select id="duration" class="field">
126
+ <option>30 minutes</option><option>45 minutes</option><option>60 minutes</option>
 
 
127
  </select>
128
  </div>
129
+ <div style="grid-column:1/-1">
130
  <label for="topic">Topic (optional)</label>
131
+ <input id="topic" class="field" type="text" placeholder="Unit 2 (Dynamics)" />
 
 
 
 
 
 
 
 
132
  </div>
133
  </div>
 
134
  <div class="actions">
135
+ <button id="gen" class="btn" type="button">Generate Prompt</button>
136
+ <button id="copy" class="btn" type="button">Copy Prompt and Paste Now</button>
137
  </div>
138
+ <pre id="output"></pre>
 
139
  </div>
140
+ <div id="toast" class="toast">Copied & Opening GPT...</div>
 
 
141
  <script>
142
+ const CUSTOM_GPT_URL="https://chatgpt.com/g/g-68697e4c49508191b175d86830b34d85-eduassess-pro-smart-exam-paper-designer";
143
+ const $=s=>document.querySelector(s);
 
 
 
 
 
144
  function buildPrompt(){
145
+ const p = {
146
+ grade: document.querySelector('#grade').value,
147
+ subject: document.querySelector('#subject').value,
148
+ board: document.querySelector('#board').value,
149
+ testType: document.querySelector('#testType').value,
150
+ questionType: document.querySelector('#questionType').value,
151
+ duration: document.querySelector('#duration').value,
152
+ topic: (document.querySelector('#topic').value || '').trim()
 
 
 
153
  };
154
+ let s = `I need a ${p.testType} paper for ${p.grade} - ${p.subject}, Board: ${p.board}.`;
155
+ s += ` Question Type: ${p.questionType}. Duration: ${p.duration}.`;
156
+ if(p.topic) s += ` Topic: ${p.topic}.`;
157
+ return s;
158
+ } paper for ${$('#grade').value} - ${$('#subject').value}, Board: ${$('#board').value}.`;
159
+ if($('#topic').value.trim())p+=` Topic: ${$('#topic').value.trim()}.`;
160
+ return p;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  }
162
+ $('#gen').addEventListener('click',()=>{
163
+ const prompt=buildPrompt();
164
+ $('#output').textContent=prompt;
 
 
165
  });
166
+ $('#copy').addEventListener('click',async()=>{
167
+ const prompt=$('#output').textContent||buildPrompt();
168
+ try{await navigator.clipboard.writeText(prompt);}catch(e){}
169
+ const t=$('#toast');t.classList.add('show');setTimeout(()=>t.classList.remove('show'),1800);
170
+ window.open(CUSTOM_GPT_URL,"_blank","noopener,noreferrer");
 
 
 
 
 
 
171
  });
172
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
173
  </body>
174
  </html>