Spaces:

Nuzwa
/

_EduAssessPro_Smart_Exam_Papper_Designer_

Running

App Files Files Community

Nuzwa commited on Sep 9, 2025

Commit

ad792a4

verified ·

1 Parent(s): 8de574d

Update index.html

Browse files

Files changed (1) hide show

index.html +429 -46

index.html CHANGED Viewed

@@ -1,48 +1,431 @@
 <!DOCTYPE html>
-<div id="question-type-options" class="edu-assess-pro-container">
-<button class="edu-assess-pro-button" data-type="questionType" data-value="MCQs">MCQs</button>
-<button class="edu-assess-pro-button" data-type="questionType" data-value="Short Questions">Short Questions</button>
-<button class="edu-assess-pro-button" data-type="questionType" data-value="Long Questions">Long Questions</button>
-<button class="edu-assess-pro-button" data-type="questionType" data-value="Practical / Diagram-based Questions">Practical/Diagram</button>
-<button class="edu-assess-pro-button" data-type="questionType" data-value="Moral / Ethical Questions">Moral/Ethical</button>
-<button class="edu-assess-pro-button" data-type="questionType" data-value="Islamic Questions">Islamic</button>
-</div>
-</div>
-<div class="options-group">
-<h4>6. Advanced Options</h4>
-<div id="advanced-options" class="edu-assess-pro-container">
-<div>
-<button class="edu-assess-pro-toggle-btn" data-type="bloom" data-value="no">Bloom's Levels: No</button>
-</div>
-<div>
-<button class="edu-assess-pro-button" data-type="difficulty" data-value="Easy">Easy</button>
-<button class="edu-assess-pro-button" data-type="difficulty" data-value="Moderate">Moderate</button>
-<button class="edu-assess-pro-button" data-type="difficulty" data-value="Hard">Hard</button>
-</div>
-<div>
-<button class="edu-assess-pro-button" data-type="language" data-value="English">English</button>
-<button class="edu-assess-pro-button" data-type="language" data-value="Urdu">Urdu</button>
-<button class="edu-assess-pro-button" data-type="language" data-value="Bilingual">Bilingual</button>
-</div>
-</div>
-</div>
-<button id="generatePromptBtn">Generate Prompt</button>
-<div id="result-container" style="display:none; text-align: center; margin-top: 20px;">
-<p id="ready-text">Your prompt is ready! Now paste it</p>
-<textarea id="promptOutput" readonly></textarea>
-<div style="margin-top:12px;">
-<button id="openGptBtn" class="edu-assess-pro-button" style="background:#8e44ad;">Open EduAssess Pro GPT</button>
-</div>
-</div>
-</div>
-<script>
-// Configure your Custom GPT link here (same value is also in assets/app.js).
-window.CUSTOM_GPT_URL = 'https://chatgpt.com/g/g-68697e4c49508191b175d86830b34d85-eduassess-pro-smart-exam-paper-designer';
-</script>
-<script src="assets/app.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>EduAssess Pro — Smart Exam Paper Designer</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!-- ====== Inline Styles (Colorful App UI) ====== -->
+  <style>
+    :root{
+      --bg: #0f172a;          /* slate-900 */
+      --panel: #0b1224;       /* deeper panel */
+      --muted:#94a3b8;        /* slate-400 */
+      --accent:#22d3ee;       /* cyan-400 */
+      --ring:#7c3aed;         /* violet-600 */
+      --ok:#10b981;           /* green-500 */
+      --warn:#f59e0b;         /* amber-500 */
+      --danger:#ef4444;       /* red-500 */
+      --white:#ffffff;
+      --shadow: 0 10px 30px rgba(0,0,0,.35);
+      --radius: 16px;
+    }
+    *{box-sizing:border-box}
+    html,body{height:100%}
+    body{
+      margin:0;
+      background:
+        radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.35), transparent 60%),
+        radial-gradient(1000px 700px at 110% 10%, rgba(34,211,238,.25), transparent 60%),
+        linear-gradient(180deg, #0b1022 0%, #0f172a 100%);
+      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
+      color:var(--white);
+    }
+    .wrap{
+      max-width:1100px;
+      margin:40px auto;
+      padding:24px;
+    }
+    .app{
+      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
+      border:1px solid rgba(148,163,184,.15);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      backdrop-filter: blur(6px);
+      overflow:hidden;
+    }
+    .app__header{
+      display:flex; align-items:center; justify-content:space-between;
+      padding:24px;
+      border-bottom:1px solid rgba(148,163,184,.15);
+      background:
+        radial-gradient(600px 200px at 0% 0%, rgba(124,58,237,.25), transparent 60%),
+        radial-gradient(600px 200px at 100% 0%, rgba(34,211,238,.2), transparent 60%);
+    }
+    .title{
+      margin:0;
+      font-weight:800;
+      letter-spacing:.3px;
+      line-height:1.1;
+      font-size: clamp(20px, 3vw, 28px);
+    }
+    .subtitle{
+      margin:6px 0 0 0;
+      color:var(--muted);
+      font-size:14px;
+    }
+    .badge{
+      border:1px dashed rgba(148,163,184,.35);
+      padding:8px 12px;
+      border-radius:12px;
+      color:var(--muted);
+      font-size:12px;
+    }
+    .grid{
+      display:grid;
+      gap:18px;
+      grid-template-columns: repeat(12, 1fr);
+      padding:24px;
+    }
+    @media (max-width: 980px){
+      .grid{grid-template-columns: repeat(6, 1fr);}
+    }
+    @media (max-width: 640px){
+      .grid{grid-template-columns: repeat(4, 1fr);}
+    }
+    .card{
+      grid-column: span 12;
+      background: rgba(2,6,23,.35);
+      border:1px solid rgba(148,163,184,.14);
+      border-radius:14px;
+      overflow:hidden;
+    }
+    .card__head{
+      padding:16px 16px 0 16px;
+    }
+    .card__title{
+      margin:0;
+      font-size:16px;
+      letter-spacing:.3px;
+      color:#cbd5e1;
+    }
+    .card__body{
+      padding:16px;
+      display:flex; flex-wrap:wrap; gap:10px;
+    }
+    /* ===== Pill Buttons (colorful) ===== */
+    .btn{
+      --btn-bg: #334155;
+      --btn-txt: #e2e8f0;
+      --btn-ring: transparent;
+      appearance:none; border:none; cursor:pointer;
+      padding:12px 16px; min-width:110px;
+      border-radius:999px;
+      background: var(--btn-bg);
+      color: var(--btn-txt);
+      font-weight:700; font-size:14px; letter-spacing:.2px;
+      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, outline-color .15s ease;
+      outline:2px solid transparent; outline-offset:2px;
+    }
+    .btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
+    .btn:active{ transform: translateY(0); }
+    .btn--active{
+      box-shadow: 0 8px 30px rgba(16,185,129,.35);
+      outline-color: rgba(34,211,238,.45);
+    }
+    /* category palettes */
+    .grade   .btn{ --btn-bg: linear-gradient(135deg,#2563eb,#22d3ee); }
+    .subject .btn{ --btn-bg: linear-gradient(135deg,#7c3aed,#ec4899); }
+    .board   .btn{ --btn-bg: linear-gradient(135deg,#22c55e,#84cc16); }
+    .test    .btn{ --btn-bg: linear-gradient(135deg,#f59e0b,#ef4444); }
+    .qtype   .btn{ --btn-bg: linear-gradient(135deg,#06b6d4,#6366f1); }
+    .adv     .btn{ --btn-bg: linear-gradient(135deg,#14b8a6,#8b5cf6); }
+    /* Generate button */
+    .generate{
+      width:100%;
+      padding:16px;
+      border-radius:14px;
+      background: linear-gradient(135deg, #10b981, #22d3ee);
+      color:#001923;
+      font-weight:900; font-size:16px; letter-spacing:.4px;
+      border:none; cursor:pointer;
+      box-shadow: 0 10px 28px rgba(34,211,238,.25);
+      transition: transform .15s ease, box-shadow .15s ease, filter .15s;
+    }
+    .generate:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(34,211,238,.35); }
+    .generate:active{ transform: translateY(0); }
+    /* Result box */
+    .result{
+      display:none;
+      margin-top:16px;
+      background: rgba(2,6,23,.6);
+      border:1px solid rgba(148,163,184,.2);
+      border-radius:14px; padding:16px;
+    }
+    .result p{
+      margin:0 0 10px 0; color:#e2e8f0; text-align:center; font-weight:700;
+    }
+    textarea{
+      width:100%; height:130px; resize:vertical;
+      background:#0b1224; color:#e2e8f0; border:1px solid rgba(148,163,184,.25);
+      border-radius:12px; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+      outline:none;
+    }
+    .open-gpt{
+      margin-top:12px; display:none;
+      width:100%; padding:12px 16px; border-radius:12px; border:none; cursor:pointer;
+      background: linear-gradient(135deg,#8b5cf6,#22d3ee);
+      color:#06121b; font-weight:900; letter-spacing:.3px;
+      box-shadow: 0 10px 28px rgba(139,92,246,.35);
+    }
+    .footer{
+      padding:0 24px 24px 24px; color:var(--muted); font-size:12px; text-align:center;
+    }
+    /* Layout spans */
+    .span-6{ grid-column: span 6; }
+    .span-12{ grid-column: span 12; }
+    @media (max-width: 980px){ .span-6{ grid-column: span 12; } }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="app" role="application" aria-label="EduAssess Pro — Smart Exam Paper Designer">
+      <div class="app__header">
+        <div>
+          <h1 class="title">EduAssess Pro — Smart Exam Paper Designer</h1>
+          <p class="subtitle">Pick options with colorful buttons, generate a prompt, and jump straight into your Custom GPT.</p>
+        </div>
+        <div class="badge">Static • Hugging Face Ready</div>
+      </div>
+      <div class="grid">
+        <!-- Grade -->
+        <section class="card span-6 grade" aria-labelledby="grade-h">
+          <div class="card__head"><h2 id="grade-h" class="card__title">1) Select Grade</h2></div>
+          <div class="card__body" id="grade-options">
+            <button class="btn" data-type="grade" data-value="Grade 1">Grade 1</button>
+            <button class="btn" data-type="grade" data-value="Grade 2">Grade 2</button>
+            <button class="btn" data-type="grade" data-value="Grade 3">Grade 3</button>
+            <button class="btn" data-type="grade" data-value="Grade 4">Grade 4</button>
+            <button class="btn" data-type="grade" data-value="Grade 5">Grade 5</button>
+            <button class="btn" data-type="grade" data-value="Grade 6">Grade 6</button>
+            <button class="btn" data-type="grade" data-value="Grade 7">Grade 7</button>
+            <button class="btn" data-type="grade" data-value="Grade 8">Grade 8</button>
+            <button class="btn" data-type="grade" data-value="Grade 9">Grade 9</button>
+            <button class="btn" data-type="grade" data-value="Grade 10">Grade 10</button>
+            <button class="btn" data-type="grade" data-value="Grade 11">Grade 11</button>
+            <button class="btn" data-type="grade" data-value="Grade 12">Grade 12</button>
+          </div>
+        </section>
+        <!-- Subject -->
+        <section class="card span-6 subject" aria-labelledby="subject-h">
+          <div class="card__head"><h2 id="subject-h" class="card__title">2) Select Subject</h2></div>
+          <div class="card__body" id="subject-options">
+            <button class="btn" data-type="subject" data-value="Mathematics">Mathematics</button>
+            <button class="btn" data-type="subject" data-value="Urdu">Urdu</button>
+            <button class="btn" data-type="subject" data-value="English">English</button>
+            <button class="btn" data-type="subject" data-value="Science">Science</button>
+            <button class="btn" data-type="subject" data-value="Physics">Physics</button>
+            <button class="btn" data-type="subject" data-value="Chemistry">Chemistry</button>
+            <button class="btn" data-type="subject" data-value="Biology">Biology</button>
+            <button class="btn" data-type="subject" data-value="Computer Science">Computer Science</button>
+            <button class="btn" data-type="subject" data-value="Islamiat">Islamiat</button>
+            <button class="btn" data-type="subject" data-value="Pakistan Studies">Pakistan Studies</button>
+          </div>
+        </section>
+        <!-- Board -->
+        <section class="card span-6 board" aria-labelledby="board-h">
+          <div class="card__head"><h2 id="board-h" class="card__title">3) Select Board</h2></div>
+          <div class="card__body" id="board-options">
+            <button class="btn" data-type="board" data-value="PCTB (Punjab)">PCTB (Punjab)</button>
+            <button class="btn" data-type="board" data-value="FBISE (Federal)">FBISE (Federal)</button>
+            <button class="btn" data-type="board" data-value="Sindh Board">Sindh Board</button>
+            <button class="btn" data-type="board" data-value="KPK Board">KPK Board</button>
+            <button class="btn" data-type="board" data-value="Balochistan Board">Balochistan Board</button>
+            <button class="btn" data-type="board" data-value="AKUEB">AKUEB</button>
+          </div>
+        </section>
+        <!-- Test Type -->
+        <section class="card span-6 test" aria-labelledby="test-h">
+          <div class="card__head"><h2 id="test-h" class="card__title">4) Select Test Type</h2></div>
+          <div class="card__body" id="test-type-options">
+            <button class="btn" data-type="testType" data-value="Summative">Summative</button>
+            <button class="btn" data-type="testType" data-value="Formative">Formative</button>
+            <button class="btn" data-type="testType" data-value="Diagnostic">Diagnostic</button>
+          </div>
+        </section>
+        <!-- Question Types -->
+        <section class="card span-12 qtype" aria-labelledby="qtype-h">
+          <div class="card__head"><h2 id="qtype-h" class="card__title">5) Select Question Types (Multi-select)</h2></div>
+          <div class="card__body" id="question-type-options">
+            <button class="btn" data-type="questionType" data-value="MCQs">MCQs</button>
+            <button class="btn" data-type="questionType" data-value="Short Questions">Short Questions</button>
+            <button class="btn" data-type="questionType" data-value="Long Questions">Long Questions</button>
+            <button class="btn" data-type="questionType" data-value="Practical / Diagram-based Questions">Practical / Diagram</button>
+            <button class="btn" data-type="questionType" data-value="Moral / Ethical Questions">Moral / Ethical</button>
+            <button class="btn" data-type="questionType" data-value="Islamic Questions">Islamic</button>
+          </div>
+        </section>
+        <!-- Advanced -->
+        <section class="card span-12 adv" aria-labelledby="adv-h">
+          <div class="card__head"><h2 id="adv-h" class="card__title">6) Advanced Options</h2></div>
+          <div class="card__body" id="advanced-options">
+            <button class="btn" id="bloom-toggle" data-type="bloom" data-value="no">Bloom's Levels: No</button>
+            <button class="btn" data-type="difficulty" data-value="Easy">Easy</button>
+            <button class="btn" data-type="difficulty" data-value="Moderate">Moderate</button>
+            <button class="btn" data-type="difficulty" data-value="Hard">Hard</button>
+            <button class="btn" data-type="language" data-value="English">English</button>
+            <button class="btn" data-type="language" data-value="Urdu">Urdu</button>
+            <button class="btn" data-type="language" data-value="Bilingual">Bilingual</button>
+          </div>
+        </section>
+        <!-- Generate -->
+        <section class="card span-12">
+          <div class="card__body">
+            <button id="generatePromptBtn" class="generate">Generate Prompt & Open Custom GPT</button>
+            <div id="result" class="result" role="region" aria-live="polite" aria-label="Prompt Result">
+              <p id="ready-text">your prompt is Ready Now Paste it</p>
+              <textarea id="promptOutput" readonly></textarea>
+              <button id="openGptBtn" class="open-gpt">Open EduAssess Pro GPT</button>
+            </div>
+          </div>
+        </section>
+      </div>
+      <div class="footer">© EduAssess Pro — Static Space • Beautiful colorful buttons • Copy to clipboard • Auto-open Custom GPT</div>
+    </div>
+  </div>
+  <!-- ====== Config: Your Custom GPT URL ====== -->
+  <script>
+    window.CUSTOM_GPT_URL = "https://chatgpt.com/g/g-68697e4c49508191b175d86830b34d85-eduassess-pro-smart-exam-paper-designer";
+  </script>
+  <!-- ====== Inline App Logic ====== -->
+  <script>
+    (function(){
+      const CUSTOM_GPT_URL = window.CUSTOM_GPT_URL;
+      const options = {
+        grade:null, subject:null, board:null, testType:null,
+        questionTypes:[], bloom:"no", difficulty:null, language:null
+      };
+      const $ = (s)=>document.querySelector(s);
+      const $$ = (s)=>document.querySelectorAll(s);
+      function setActive(groupSelector, btn){
+        $$(groupSelector+' .btn[data-type="'+btn.dataset.type+'"]').forEach(b=>b.classList.remove('btn--active'));
+        btn.classList.add('btn--active');
+      }
+      function toggleActive(btn){ btn.classList.toggle('btn--active'); }
+      function handleClick(btn){
+        const type = btn.dataset.type, value = btn.dataset.value;
+        if(type !== 'questionType' && type !== 'bloom'){
+          setActive('.card__body', btn);
+          options[type] = value;
+        } else if(type === 'questionType'){
+          toggleActive(btn);
+          if(options.questionTypes.includes(value)){
+            options.questionTypes = options.questionTypes.filter(v => v !== value);
+          } else { options.questionTypes.push(value); }
+        }
+      }
+      // Attach to all option buttons except bloom (handled separately)
+      $$('.btn[data-type]').forEach(btn=>{
+        if(btn.id === 'bloom-toggle') return;
+        btn.addEventListener('click', ()=>handleClick(btn));
+      });
+      // Bloom toggle
+      const bloomToggle = $('#bloom-toggle');
+      bloomToggle.addEventListener('click', ()=>{
+        bloomToggle.classList.toggle('btn--active');
+        const on = bloomToggle.classList.contains('btn--active');
+        bloomToggle.textContent = on ? "Bloom's Levels: Yes" : "Bloom's Levels: No";
+        bloomToggle.dataset.value = on ? 'yes' : 'no';
+        options.bloom = on ? 'yes' : 'no';
+      });
+      function buildPrompt(o){
+        let p = `I need a paper for ${o.grade}, on the subject of ${o.subject}, aligned with the ${o.board}. The test type is ${o.testType}. Please include the following question types: ${o.questionTypes.join(', ')}.`;
+        if(o.bloom === 'yes') p += " The questions should be based on Bloom's Taxonomy.";
+        if(o.difficulty) p += ` The difficulty level should be ${o.difficulty}.`;
+        if(o.language) p += ` The paper should be in ${o.language}.`;
+        return p;
+      }
+      function ready(o){
+        return !!(o.grade && o.subject && o.board && o.testType && o.questionTypes.length>0 && o.language);
+      }
+      async function copy(text){
+        try{
+          if(navigator.clipboard && window.isSecureContext){ await navigator.clipboard.writeText(text); return; }
+          const ta=document.createElement('textarea'); ta.value=text; document.body.appendChild(ta); ta.select();
+          document.execCommand('copy'); document.body.removeChild(ta);
+        }catch(e){}
+      }
+      const resultBox = $('#result');
+      const promptOutput = $('#promptOutput');
+      const openBtn = $('#openGptBtn');
+      const generateBtn = $('#generatePromptBtn');
+      // Difficulty & Language single-select grouping
+      function exclusiveClickSetup(attr){
+        $(`.adv`).querySelectorAll(`.btn[data-type="${attr}"]`).forEach(b=>{
+          b.addEventListener('click', ()=>{
+            // remove active from siblings of same type
+            $(`.adv`).querySelectorAll(`.btn[data-type="${attr}"]`).forEach(x=>x.classList.remove('btn--active'));
+            b.classList.add('btn--active');
+            options[attr] = b.dataset.value;
+          });
+        });
+      }
+      exclusiveClickSetup('difficulty');
+      exclusiveClickSetup('language');
+      // Board/Grade/Subject/Test single-select grouping
+      ['grade','subject','board','testType'].forEach(attr=>{
+        document.querySelectorAll(`.btn[data-type="${attr}"]`).forEach(b=>{
+          b.addEventListener('click', ()=>{
+            document.querySelectorAll(`.btn[data-type="${attr}"]`).forEach(x=>x.classList.remove('btn--active'));
+            b.classList.add('btn--active');
+            options[attr] = b.dataset.value;
+          });
+        });
+      });
+      openBtn.addEventListener('click', ()=>{
+        window.open(CUSTOM_GPT_URL, '_blank', 'noopener,noreferrer');
+      });
+      generateBtn.addEventListener('click', async ()=>{
+        if(!ready(options)){
+          alert('Please select all required options: Grade, Subject, Board, Test Type, Question Types, and Language.');
+          return;
+        }
+        const prompt = buildPrompt(options);
+        promptOutput.value = prompt;
+        resultBox.style.display = 'block';
+        document.getElementById('ready-text').textContent = 'your prompt is Ready Now Paste it';
+        await copy(prompt);
+        const popup = window.open(CUSTOM_GPT_URL, '_blank', 'noopener,noreferrer');
+        if(!popup){ openBtn.style.display = 'block'; }
+      });
+    })();
+  </script>
 </body>
+</html>