Spaces:
Running
Running
File size: 6,150 Bytes
c23e66e 5be130f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<!doctype html>
<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>
|