Spaces:

eaglelandsonce
/

Teacher_Eval_Project_Fact_or_Fiction

Running

App Files Files Community

eaglelandsonce commited on 8 days ago

Commit

f49bbee

verified ·

1 Parent(s): 51d3500

Update index.html

Browse files

Files changed (1) hide show

index.html +237 -18

index.html CHANGED Viewed

@@ -1,19 +1,238 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Teacher_Eval_Fact_or_Fiction (MERIT)</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --bg1:#c9e8ff; --bg2:#fde2ff; --ink:#222; --ink-sub:#555;
+      --brand:#2563eb; --brand-2:#22c55e; --good:#16a34a; --bad:#dc2626;
+      --card:#ffffffcc;
+    }
+    body {
+      font-family: 'Poppins', sans-serif;
+      background: radial-gradient(1200px 600px at 20% 0%, var(--bg1), transparent 60%),
+                  radial-gradient(1200px 600px at 80% 0%, var(--bg2), transparent 60%),
+                  #f6f7fb;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 2rem 1rem;
+      color: var(--ink);
+    }
+    h1 { text-align: center; margin-bottom: .25rem; font-weight: 600; font-size: 2.2rem; }
+    #subtitle { text-align:center; margin-bottom:1rem; color: var(--ink-sub); }
+    #source-link { text-align: center; margin-bottom: 1.25rem; font-size: .95rem; }
+    #source-link a { color: var(--ink); text-decoration: underline; }
+    #game-container {
+      background: var(--card);
+      width: 100%; max-width: 820px;
+      padding: 2rem; border-radius: 16px;
+      box-shadow: 0 10px 24px rgba(0,0,0,.15);
+      display: flex; flex-direction: column; align-items: center;
+    }
+    .progress-container {
+      width: 100%; background:#ececec; border-radius: 999px; overflow: hidden; margin-bottom: 1rem;
+    }
+    .progress-bar { height: 14px; width:0%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); transition: width .3s ease; }
+    #statement {
+      font-size: 1.25rem; line-height: 1.5; text-align: center; color: #333;
+      min-height: 90px; margin: .75rem 0 1rem;
+    }
+    .btn-group { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin: .25rem 0 1rem; }
+    button {
+      padding: .75rem 1.25rem; border: none; border-radius: 999px; cursor: pointer;
+      background: var(--brand); color: #fff; font-weight: 600; letter-spacing:.2px;
+      transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
+    }
+    button.secondary { background:#111827; }
+    button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }
+    #result {
+      margin-top: .5rem; padding: .75rem 1rem; border-radius: 10px; font-weight: 700; text-align: center; display:none;
+    }
+    #result.correct { display:block; background:#dcfce7; color:#14532d; }
+    #result.incorrect { display:block; background:#fee2e2; color:#7f1d1d; }
+    #explanation {
+      margin-top: .75rem; padding: 1rem; background:#f9fafb; color:#374151; border-radius:12px; display:none;
+    }
+    #score { margin-top: .75rem; font-weight: 700; }
+    #controls { display:flex; gap:.5rem; margin-top:.5rem; }
+    #controls button { background:#0f766e; }
+    #restart-btn { background:#6b21a8; }
+  </style>
+</head>
+<body>
+  <h1>Teacher_Eval_Fact_or_Fiction</h1>
+  <div id="subtitle">Test your knowledge of MERIT’s growth-oriented Teaching & Course Evaluation vision</div>
+  <div id="source-link">
+    Source: <a href="https://docs.google.com/document/d/1QenVtPPz8VRllxyBPqNoCYiLjDl2z77zWbgDHnxn6N4/edit?tab=t.0" target="_blank" rel="noopener">
+      MERIT Teaching & Course Evaluation (Google Doc)
+    </a>
+  </div>
+  <div id="game-container" role="region" aria-label="Fact or Fiction game">
+    <div class="progress-container" aria-hidden="true"><div class="progress-bar" id="progress-bar"></div></div>
+    <div id="statement" aria-live="polite">Loading statement...</div>
+    <div class="btn-group">
+      <button onclick="guess(true)" aria-label="Choose Fact">Fact</button>
+      <button class="secondary" onclick="guess(false)" aria-label="Choose Fiction">Fiction</button>
+    </div>
+    <div id="result" role="status" aria-live="polite"></div>
+    <div id="explanation"></div>
+    <div id="controls">
+      <button id="next-btn" style="display:none;" onclick="nextStatement()">Next</button>
+      <button id="restart-btn" style="display:none;" onclick="startGame()">Restart</button>
+    </div>
+    <div id="score" aria-live="polite"></div>
+  </div>
+  <script>
+    // 12 statements (6 Fact, 6 Fiction) derived from the provided MERIT material
+    const statements = [
+      // ===== FACTS (6) =====
+      {
+        text: "MERIT reframes course evaluations around growth, collaboration, and transparency rather than punitive judgment.",
+        isFact: true,
+        explanation: "MERIT’s vision emphasizes improvement and shared responsibility over punishment."
+      },
+      {
+        text: "MERIT promotes “same-side pedagogy,” making faculty, students, and administrators partners in improving teaching.",
+        isFact: true,
+        explanation: "The vision explicitly calls for allies working together on teaching quality."
+      },
+      {
+        text: "MERIT integrates student voice, instructor reflection, course design, and peer input into a structured review.",
+        isFact: true,
+        explanation: "The core idea is a comprehensive review that blends these multiple perspectives."
+      },
+      {
+        text: "A core design challenge for MERIT is making the process so clearly non-punitive that misuse for discipline would be unthinkable.",
+        isFact: true,
+        explanation: "Non-punitive design is a stated goal to prevent disciplinary misuse."
+      },
+      {
+        text: "Stakeholders include instructors, students, department chairs/program leads (as partners), the MERIT team, CELT consultants, and college leadership.",
+        isFact: true,
+        explanation: "All of these are named stakeholders in the material."
+      },
+      {
+        text: "Measures of success include high faculty and student satisfaction and positive recognition from chairs and administrators.",
+        isFact: true,
+        explanation: "Satisfaction and recognition are explicitly listed as success measures."
+      },
+      // ===== FICTIONS (6) =====
+      {
+        text: "MERIT is primarily intended to discipline underperforming instructors through evaluative penalties.",
+        isFact: false,
+        explanation: "Fiction. MERIT is explicitly non-punitive and growth-oriented."
+      },
+      {
+        text: "Students are not considered feedback providers in MERIT.",
+        isFact: false,
+        explanation: "Fiction. Student voice is a central input to the review."
+      },
+      {
+        text: "Department chairs and program leads act as enforcers rather than partners within MERIT.",
+        isFact: false,
+        explanation: "Fiction. Chairs/program leads are described as partners, not enforcers."
+      },
+      {
+        text: "MERIT replaces CELT entirely and removes the role of consultants in the process.",
+        isFact: false,
+        explanation: "Fiction. CELT consultants are listed among the stakeholders."
+      },
+      {
+        text: "MERIT deliverables exclude prototypes and focus only on final policies.",
+        isFact: false,
+        explanation: "Fiction. Deliverables include prototypes like interview guides and templates."
+      },
+      {
+        text: "Success in MERIT is measured by how effectively it identifies and penalizes low-performing instructors.",
+        isFact: false,
+        explanation: "Fiction. Success focuses on satisfaction, recognition, design principles, and practical tools—not penalties."
+      }
+    ];
+    // Game logic (shuffle, progress, scoring)
+    let currentIndex = 0, score = 0, answered = false;
+    function shuffle(arr) {
+      for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+      }
+    }
+    function startGame() {
+      shuffle(statements);
+      currentIndex = 0; score = 0; answered = false;
+      document.getElementById('restart-btn').style.display = 'none';
+      loadStatement(); updateScore();
+    }
+    function loadStatement() {
+      if (currentIndex >= statements.length) return endGame();
+      const s = statements[currentIndex];
+      document.getElementById('statement').textContent = s.text;
+      const resultEl = document.getElementById('result');
+      resultEl.style.display = 'none';
+      resultEl.textContent = '';
+      resultEl.className = '';
+      document.getElementById('explanation').style.display = 'none';
+      document.getElementById('next-btn').style.display = 'none';
+      answered = false; updateProgress();
+    }
+    function guess(isFactGuess) {
+      if (answered) return;
+      answered = true;
+      const correct = statements[currentIndex].isFact;
+      const resultEl = document.getElementById('result');
+      if (isFactGuess === correct) {
+        resultEl.textContent = 'Correct!';
+        resultEl.className = 'correct';
+        score++;
+      } else {
+        resultEl.textContent = 'Incorrect!';
+        resultEl.className = 'incorrect';
+      }
+      resultEl.style.display = 'block';
+      const expEl = document.getElementById('explanation');
+      expEl.textContent = statements[currentIndex].explanation + " (See source link above.)";
+      expEl.style.display = 'block';
+      document.getElementById('next-btn').style.display = 'inline-block';
+      updateScore();
+    }
+    function nextStatement() {
+      currentIndex++;
+      if (currentIndex < statements.length) loadStatement();
+      else endGame();
+    }
+    function updateScore() {
+      document.getElementById('score').textContent = `Score: ${score} / ${statements.length}`;
+    }
+    function updateProgress() {
+      const pct = Math.round((currentIndex / statements.length) * 100);
+      document.getElementById('progress-bar').style.width = pct + '%';
+    }
+    function endGame() {
+      const pct = Math.round((score / statements.length) * 100);
+      document.getElementById('statement').textContent =
+        `Game Over! You scored ${score} of ${statements.length} (${pct}%).`;
+      document.getElementById('result').style.display = 'none';
+      document.getElementById('explanation').style.display = 'none';
+      document.getElementById('next-btn').style.display = 'none';
+      document.getElementById('restart-btn').style.display = 'inline-block';
+      document.getElementById('progress-bar').style.width = '100%';
+    }
+    startGame();
+  </script>
+</body>
 </html>