Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"/> | |
| <title>Teaching Colloquium - AI Tools and Grading</title> | |
| <style> | |
| :root { --fg:#1a1a1a; --muted:#666; --card:#fff; --line:#e6e6e6; --accent:#1E4D2B; --btn:#1a1a1a; } | |
| * { box-sizing: border-box; } | |
| body { margin: 20px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--fg); line-height: 1.45; } | |
| h1 { font-size: 1.6rem; margin: 0 0 10px; } | |
| h2 { margin: 16px 0 8px; } | |
| p { margin: 0 0 10px; color: var(--muted); } | |
| .band { background: var(--accent); color: #fff; border-radius: 12px; padding: 18px 16px; margin-bottom: 16px; } | |
| .kicker { font-size: 0.9rem; letter-spacing: 0.02em; opacity: 0.95; } | |
| .section { margin: 18px 0 8px; } | |
| .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 8px; } | |
| .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } | |
| a.button { display: inline-block; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--btn); border-radius: 8px; text-decoration: none; color: var(--btn); } | |
| table { border-collapse: collapse; width: 100%; margin-top: 8px; } | |
| th, td { border: 1px solid var(--line); padding: 6px; text-align: left; font-size: 0.95rem; } | |
| th { background: #f6f6f6; } | |
| .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9rem; } | |
| .note { color: var(--muted); font-size: 0.9rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="band"> | |
| <div class="kicker">Colorado State University - HES 419</div> | |
| <h1>AI-Created Learning Tools and AI Grading Assistance</h1> | |
| </div> | |
| <!-- Section 1: AI-Created Learning Tools --> | |
| <div class="section" id="learning-tools"> | |
| <h2>1) AI-Created Learning Tools</h2> | |
| <p><small>One-page preview of the interactive tool used in class.</small></p> | |
| <div class="grid"> | |
| <div class="card"> | |
| <h3>Interactive Tool (PDF)</h3> | |
| <p>Quick tour of the student-facing activity (tolerance, dependence, SUD criteria, withdrawal).</p> | |
| <a class="button" href="./interactive_tool.pdf" target="_blank" rel="noopener">Open PDF</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Section 2: AI Grading Assistance --> | |
| <div class="section" id="grading"> | |
| <h2>2) AI Grading Assistance</h2> | |
| <p><small>See the rubric formatted for autograding and an example of the graded output.</small></p> | |
| <div class="grid"> | |
| <div class="card"> | |
| <h3>Autograder-Friendly Rubric</h3> | |
| <p>Criteria and weights aligned to learning objectives; PDF format.</p> | |
| <a class="button" href="./autograder_friendly_rubric.pdf" target="_blank" rel="noopener">Open Rubric (PDF)</a> | |
| </div> | |
| <div class="card"> | |
| <h3>Grading Output (CSV)</h3> | |
| <p>Example of AI-assisted scoring output with itemized feedback.</p> | |
| <p class="mono"><a class="button" href="./autograding_example.csv" target="_blank" rel="noopener">Download CSV</a></p> | |
| <div id="csv-preview"> | |
| <small>Inline preview:</small> | |
| <div id="csv-table">Loading...</div> | |
| </div> | |
| <p class="note">If the preview does not load on your device, use the Download CSV button above.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="note" style="margin-top:20px"> | |
| Questions? Ask about reliability evidence, Canvas flows, and auto-download certificates. | |
| </p> | |
| <script> | |
| // Simple CSV parser for comma-separated rows with optional quotes. | |
| function parseCSV(text) { | |
| const rows = []; | |
| let i = 0, field = '', row = [], inQuotes = false; | |
| while (i < text.length) { | |
| const c = text[i]; | |
| if (inQuotes) { | |
| if (c === '"') { | |
| if (text[i+1] === '"') { field += '"'; i++; } else { inQuotes = false; } | |
| } else { field += c; } | |
| } else { | |
| if (c === ',') { row.push(field); field = ''; } | |
| else if (c === '\n' || c === '\r') { | |
| if (c === '\n') { row.push(field); rows.push(row); row = []; field = ''; } | |
| } else if (c === '"') { inQuotes = true; } | |
| else { field += c; } | |
| } | |
| i++; | |
| } | |
| if (field.length || row.length) { row.push(field); rows.push(row); } | |
| return rows.filter(r => r.length && r.some(cell => cell.trim().length)); | |
| } | |
| async function loadCSV() { | |
| try { | |
| const res = await fetch('./autograding_example.csv', { cache: 'no-store' }); | |
| if (!res.ok) throw new Error('Fetch failed'); | |
| const text = await res.text(); | |
| const normalized = text.replace(/\r\n/g, '\n'); | |
| const rows = parseCSV(normalized); | |
| if (!rows.length) throw new Error('No rows'); | |
| const header = rows[0]; | |
| const body = rows.slice(1); | |
| const table = document.createElement('table'); | |
| const thead = document.createElement('thead'); | |
| const trh = document.createElement('tr'); | |
| header.forEach(h => { const th = document.createElement('th'); th.textContent = h; trh.appendChild(th); }); | |
| thead.appendChild(trh); | |
| table.appendChild(thead); | |
| const tbody = document.createElement('tbody'); | |
| body.forEach(r => { | |
| const tr = document.createElement('tr'); | |
| header.forEach((_, idx) => { | |
| const td = document.createElement('td'); | |
| td.textContent = (r[idx] ?? '').trim(); | |
| tr.appendChild(td); | |
| }); | |
| tbody.appendChild(tr); | |
| }); | |
| table.appendChild(tbody); | |
| const mount = document.getElementById('csv-table'); | |
| mount.innerHTML = ''; | |
| mount.appendChild(table); | |
| } catch (e) { | |
| const mount = document.getElementById('csv-table'); | |
| mount.textContent = 'Preview unavailable (file missing or blocked). You can still use the Download CSV button above.'; | |
| } | |
| } | |
| loadCSV(); | |
| </script> | |
| </body> | |
| </html> | |