Hugging Face's logo

Spaces:
Nuzwa
/
_EduAssessPro_Smart_Exam_Papper_Designer_
Running

App Files Community
Nuzwa commited on
Commit
7c3ae9a
·
verified ·
1 Parent(s): db3d1eb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +68 -37
index.html CHANGED
@@ -5,7 +5,7 @@
5
  <title>EduAssess Pro — Smart Exam Paper Designer</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
 
8
- <!-- ====== Inline Styles (All-in-one) ====== -->
9
  <style>
10
  :root{
11
  --bg: #0f172a; --panel:#0b1224; --muted:#94a3b8; --text:#e5e7eb; --white:#fff;
@@ -69,7 +69,7 @@
69
  .opt{
70
  --bg:#334155; --txt:#e2e8f0;
71
  appearance:none; border:none; cursor:pointer; padding:12px 14px; min-width:118px;
72
- border-radius:12px; background: var(--bg); color:var(--txt); font-weight:700; letter-spacing:.2px;
73
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, outline-color .15s ease;
74
  outline:2px solid transparent; outline-offset:2px;
75
  }
@@ -79,10 +79,12 @@
79
  .row{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px}
80
  .input{
81
  background:#0b1224; color:var(--text); border:1px solid rgba(148,163,184,.3); border-radius:12px;
82
- padding:12px 14px; outline:none; width:100%; font-weight:600;
83
  }
84
 
85
- .generate-wrap{ padding:16px; }
 
 
86
  .generate{
87
  width:100%; padding:16px; border-radius:14px; border:none; cursor:pointer;
88
  background: linear-gradient(135deg, #10b981, #22d3ee); color:#051e28; font-weight:900; letter-spacing:.3px;
@@ -102,6 +104,15 @@
102
  box-shadow: 0 10px 28px rgba(139,92,246,.35);
103
  }
104
  .footer{ padding:0 20px 20px; color:var(--muted); font-size:12px; text-align:center; }
 
 
 
 
 
 
 
 
 
105
  </style>
106
  </head>
107
  <body>
@@ -110,7 +121,7 @@
110
  <div class="header">
111
  <div>
112
  <h1 class="title">EduAssess Pro — Smart Exam Paper Designer</h1>
113
- <p class="subtitle">Top labels open their options. Quick Presets minimize clicks. Generate → auto-copy prompt → open Custom GPT.</p>
114
  </div>
115
  <div class="badge">Static • Hugging Face Ready</div>
116
  </div>
@@ -134,7 +145,7 @@
134
  <button class="label-btn lb-follow" data-panel="p-follow">Follow-up Details</button>
135
  </div>
136
 
137
- <!-- ====== PANELS ====== -->
138
  <div id="p-grade" class="panel">
139
  <div class="group" id="grade-options">
140
  <button class="opt" data-type="grade" data-value="Grade 1">Grade 1</button>
@@ -209,7 +220,7 @@
209
  </div>
210
  </div>
211
 
212
- <!-- ===== FOLLOW-UP (the confirmation questions as label/options) ===== -->
213
  <div id="p-follow" class="panel">
214
  <!-- Topic/Unit -->
215
  <div style="margin-bottom:12px;">
@@ -259,6 +270,9 @@
259
  </div>
260
  </div>
261
 
 
 
 
262
  <!-- ===== GENERATE ===== -->
263
  <div class="generate-wrap">
264
  <button id="generate" class="generate">Generate Prompt & Open Custom GPT</button>
@@ -271,16 +285,16 @@
271
  <button id="openGptBtn" class="open-gpt">Open EduAssess Pro GPT</button>
272
  </div>
273
 
274
- <div class="footer">© EduAssess Pro — Colorful top labels • Quick presets • Copy to clipboard • Auto-open Custom GPT</div>
275
  </div>
276
  </div>
277
 
278
- <!-- ===== Config: Your Custom GPT URL (edit if needed) ===== -->
279
  <script>
280
  const CUSTOM_GPT_URL = "https://chatgpt.com/g/g-68697e4c49508191b175d86830b34d85-eduassess-pro-smart-exam-paper-designer";
281
  </script>
282
 
283
- <!-- ===== Inline App Logic (ensure tags are CLOSED) ===== -->
284
  <script>
285
  (function(){
286
  // ---------- State ----------
@@ -312,6 +326,27 @@
312
  S[arrayKey] = [...set];
313
  }
314
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  // ---------- Label bar expand ----------
316
  $$('#labelBar .label-btn').forEach(btn=>{
317
  btn.addEventListener('click', ()=>{
@@ -362,7 +397,7 @@
362
  });
363
  $$('.opt[data-type="moral"]').forEach(b=>b.addEventListener('click',()=>singleSelect('moral', b)));
364
 
365
- // ---------- Quick Presets (min clicks) ----------
366
  const PRESETS = {
367
  formative10 : { testType:'Formative', mcqs:'10', duration:'30 minutes', bloomFollow:'no' },
368
  formative15 : { testType:'Formative', mcqs:'15', duration:'30 minutes', bloomFollow:'no' },
@@ -381,10 +416,9 @@
381
  if(!S.questionTypes.length) S.questionTypes = ['MCQs'];
382
  if(!S.topic) S.topic = 'Unit 1–3';
383
 
384
- // UI feedback
385
  $$('#quickPresets .label-btn').forEach(b=>b.classList.remove('active'));
386
  btn.classList.add('active');
387
-
388
  });
389
  });
390
 
@@ -395,7 +429,6 @@
395
  if(o.difficulty) p += " The difficulty level should be " + o.difficulty + ".";
396
  if(o.language) p += " The paper should be in " + o.language + ".";
397
 
398
- // Follow-up details to ensure GPT answers without more questions:
399
  const f = [];
400
  if(o.topic) f.push("Topic/Unit: " + o.topic);
401
  if(o.mcqs) f.push("Number of MCQs: " + o.mcqs);
@@ -406,40 +439,38 @@
406
  return p;
407
  }
408
 
409
- function ready(o){
410
- const base = !!(o.grade && o.subject && o.board && o.testType && (o.questionTypes||[]).length>0 && o.language);
411
- return base;
412
- }
413
-
414
- async function copy(text){
415
- try{
416
- if(navigator.clipboard && window.isSecureContext){ await navigator.clipboard.writeText(text); return; }
417
- const ta=document.createElement('textarea'); ta.value=text; document.body.appendChild(ta); ta.select();
418
- document.execCommand('copy'); document.body.removeChild(ta);
419
- }catch(e){}
420
- }
421
-
422
- // ---------- Generate ----------
423
- const resultBox = $('#result');
424
- const promptOutput= $('#promptOutput');
425
- const openBtn = $('#openGptBtn');
426
  $('#generate').addEventListener('click', async ()=>{
427
- if(!ready(S)){
428
- alert('Please complete: Grade, Subject, Board, Test Type, at least one Question Type, and Language. (Follow-up fields recommended.)');
 
 
 
 
 
429
  return;
430
  }
 
431
  const prompt = buildPrompt(S);
432
- promptOutput.value = prompt;
 
433
  resultBox.style.display = 'block';
434
  $('#ready-text').textContent = 'your prompt is Ready Now Paste it';
435
 
436
- await copy(prompt);
 
 
 
 
 
 
 
437
  const popup = window.open(CUSTOM_GPT_URL, '_blank', 'noopener,noreferrer');
438
- if(!popup){ openBtn.style.display = 'block'; }
439
  });
440
 
441
  // Manual open fallback
442
- openBtn.addEventListener('click', ()=>{ window.open(CUSTOM_GPT_URL, '_blank', 'noopener,noreferrer'); });
443
  })();
444
  </script>
445
  </body>
 
5
  <title>EduAssess Pro — Smart Exam Paper Designer</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
 
8
+ <!-- ====== Inline Styles (All-in-one, Mobile friendly) ====== -->
9
  <style>
10
  :root{
11
  --bg: #0f172a; --panel:#0b1224; --muted:#94a3b8; --text:#e5e7eb; --white:#fff;
 
69
  .opt{
70
  --bg:#334155; --txt:#e2e8f0;
71
  appearance:none; border:none; cursor:pointer; padding:12px 14px; min-width:118px;
72
+ border-radius:12px; background: var(--bg); color: var(--txt); font-weight:700; letter-spacing:.2px;
73
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, outline-color .15s ease;
74
  outline:2px solid transparent; outline-offset:2px;
75
  }
 
79
  .row{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px}
80
  .input{
81
  background:#0b1224; color:var(--text); border:1px solid rgba(148,163,184,.3); border-radius:12px;
82
+ padding:12px 14px; outline:none; width:100%; font-weight:600; font-size:16px; /* iOS zoom prevention */
83
  }
84
 
85
+ .warn{ color:#f87171; text-align:center; font-weight:700; margin:10px 16px; display:none; }
86
+
87
+ .generate-wrap{ padding:16px; position:sticky; bottom:0; background:linear-gradient(180deg, rgba(15,23,42,.0), rgba(15,23,42,.65)); backdrop-filter: blur(4px); }
88
  .generate{
89
  width:100%; padding:16px; border-radius:14px; border:none; cursor:pointer;
90
  background: linear-gradient(135deg, #10b981, #22d3ee); color:#051e28; font-weight:900; letter-spacing:.3px;
 
104
  box-shadow: 0 10px 28px rgba(139,92,246,.35);
105
  }
106
  .footer{ padding:0 20px 20px; color:var(--muted); font-size:12px; text-align:center; }
107
+
108
+ /* Mobile polish */
109
+ @media (max-width: 640px){
110
+ .labelbar{ position: sticky; top: 0; z-index: 20; }
111
+ .label-btn{ padding: 12px 14px; font-size: 14px; }
112
+ .opt{ min-width: 46%; } /* two per row on phones */
113
+ .generate{ font-size: 15px; padding: 14px; }
114
+ textarea{ height: 120px; }
115
+ }
116
  </style>
117
  </head>
118
  <body>
 
121
  <div class="header">
122
  <div>
123
  <h1 class="title">EduAssess Pro — Smart Exam Paper Designer</h1>
124
+ <p class="subtitle">Top labels open options. Quick Presets minimize clicks. Generate → auto-copy prompt → open Custom GPT.</p>
125
  </div>
126
  <div class="badge">Static • Hugging Face Ready</div>
127
  </div>
 
145
  <button class="label-btn lb-follow" data-panel="p-follow">Follow-up Details</button>
146
  </div>
147
 
148
+ <!-- ===== PANELS ===== -->
149
  <div id="p-grade" class="panel">
150
  <div class="group" id="grade-options">
151
  <button class="opt" data-type="grade" data-value="Grade 1">Grade 1</button>
 
220
  </div>
221
  </div>
222
 
223
+ <!-- ===== FOLLOW-UP ===== -->
224
  <div id="p-follow" class="panel">
225
  <!-- Topic/Unit -->
226
  <div style="margin-bottom:12px;">
 
270
  </div>
271
  </div>
272
 
273
+ <!-- ===== NON-BLOCKING WARNING AREA ===== -->
274
+ <p id="warn" class="warn"></p>
275
+
276
  <!-- ===== GENERATE ===== -->
277
  <div class="generate-wrap">
278
  <button id="generate" class="generate">Generate Prompt & Open Custom GPT</button>
 
285
  <button id="openGptBtn" class="open-gpt">Open EduAssess Pro GPT</button>
286
  </div>
287
 
288
+ <div class="footer">© EduAssess Pro — Mobile-friendly • Quick presets • No popups • Copy to clipboard • Auto-open Custom GPT</div>
289
  </div>
290
  </div>
291
 
292
+ <!-- ===== Config: Your Custom GPT URL ===== -->
293
  <script>
294
  const CUSTOM_GPT_URL = "https://chatgpt.com/g/g-68697e4c49508191b175d86830b34d85-eduassess-pro-smart-exam-paper-designer";
295
  </script>
296
 
297
+ <!-- ===== Inline App Logic ===== -->
298
  <script>
299
  (function(){
300
  // ---------- State ----------
 
326
  S[arrayKey] = [...set];
327
  }
328
 
329
+ // Non-blocking warning
330
+ function showWarn(msg){
331
+ const w = $('#warn');
332
+ w.textContent = '⚠️ ' + msg;
333
+ w.style.display = 'block';
334
+ clearTimeout(showWarn._t);
335
+ showWarn._t = setTimeout(()=>{ w.style.display='none'; w.textContent=''; }, 4000);
336
+ }
337
+
338
+ // Robust ready check
339
+ function missingFields(o){
340
+ const miss=[];
341
+ if(!o.grade) miss.push('Grade');
342
+ if(!o.subject) miss.push('Subject');
343
+ if(!o.board) miss.push('Board');
344
+ if(!o.testType) miss.push('Test Type');
345
+ if(!Array.isArray(o.questionTypes) || o.questionTypes.length===0) miss.push('Question Type');
346
+ if(!o.language) miss.push('Language');
347
+ return miss;
348
+ }
349
+
350
  // ---------- Label bar expand ----------
351
  $$('#labelBar .label-btn').forEach(btn=>{
352
  btn.addEventListener('click', ()=>{
 
397
  });
398
  $$('.opt[data-type="moral"]').forEach(b=>b.addEventListener('click',()=>singleSelect('moral', b)));
399
 
400
+ // ---------- Quick Presets (no popups) ----------
401
  const PRESETS = {
402
  formative10 : { testType:'Formative', mcqs:'10', duration:'30 minutes', bloomFollow:'no' },
403
  formative15 : { testType:'Formative', mcqs:'15', duration:'30 minutes', bloomFollow:'no' },
 
416
  if(!S.questionTypes.length) S.questionTypes = ['MCQs'];
417
  if(!S.topic) S.topic = 'Unit 1–3';
418
 
419
+ // Visual cue only
420
  $$('#quickPresets .label-btn').forEach(b=>b.classList.remove('active'));
421
  btn.classList.add('active');
 
422
  });
423
  });
424
 
 
429
  if(o.difficulty) p += " The difficulty level should be " + o.difficulty + ".";
430
  if(o.language) p += " The paper should be in " + o.language + ".";
431
 
 
432
  const f = [];
433
  if(o.topic) f.push("Topic/Unit: " + o.topic);
434
  if(o.mcqs) f.push("Number of MCQs: " + o.mcqs);
 
439
  return p;
440
  }
441
 
442
+ // ---------- Generate (no alerts; non-blocking warn) ----------
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
443
  $('#generate').addEventListener('click', async ()=>{
444
+ // Smart fallback to reduce friction
445
+ if((!S.questionTypes || S.questionTypes.length===0)) S.questionTypes = ['MCQs'];
446
+ if(!S.language) S.language = 'English';
447
+
448
+ const miss = missingFields(S);
449
+ if(miss.length){
450
+ showWarn('Please complete: ' + miss.join(', '));
451
  return;
452
  }
453
+
454
  const prompt = buildPrompt(S);
455
+ $('#promptOutput').value = prompt;
456
+ const resultBox = $('#result');
457
  resultBox.style.display = 'block';
458
  $('#ready-text').textContent = 'your prompt is Ready Now Paste it';
459
 
460
+ try{
461
+ if(navigator.clipboard && window.isSecureContext){ await navigator.clipboard.writeText(prompt); }
462
+ else{
463
+ const ta=document.createElement('textarea'); ta.value=prompt; document.body.appendChild(ta); ta.select();
464
+ document.execCommand('copy'); document.body.removeChild(ta);
465
+ }
466
+ }catch(e){ /* silent */ }
467
+
468
  const popup = window.open(CUSTOM_GPT_URL, '_blank', 'noopener,noreferrer');
469
+ if(!popup) $('#openGptBtn').style.display = 'block';
470
  });
471
 
472
  // Manual open fallback
473
+ $('#openGptBtn').addEventListener('click', ()=>{ window.open(CUSTOM_GPT_URL, '_blank', 'noopener,noreferrer'); });
474
  })();
475
  </script>
476
  </body>