/* tb-quiz.jsx — Interactive quiz page variations */
const { useState, useCallback, useRef, useEffect, useMemo } = React;
const {
TB_CODE, REF_COLORS, HEAP_ADDRS, syntaxHL, renderDesc,
TBCodePanel, secLabelStyle,
} = window;
/* ═══ Shuffle utility ═══ */
function shuffleArr(arr) {
const a = [...arr];
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
/* ═══ Shared: Drag & Drop primitives ═══ */
function DragChip({ value, label, color, used, onReturn }) {
return (
{ e.dataTransfer.setData('text/plain', value); e.dataTransfer.effectAllowed = 'move'; }}
style={{
display: 'inline-flex', alignItems: 'center', gap: 3,
fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
fontWeight: 600, padding: '3px 9px', borderRadius: 4,
cursor: used ? 'default' : 'grab', userSelect: 'none',
background: used ? '#f1f3f7' : (color || '#fff'),
border: `1.5px solid ${used ? '#e2e6ee' : '#cbd5e1'}`,
color: used ? '#c1c8d4' : '#1e293b',
opacity: used ? 0.45 : 1,
transition: 'all 0.2s',
textDecoration: used ? 'line-through' : 'none',
}}
>
{label || value}
);
}
function DropSlot({ slotId, placed, correct, checked, onDrop, onClear, label }) {
const [over, setOver] = useState(false);
const isCorrect = checked && placed != null && placed === correct;
const isWrong = checked && placed != null && placed !== correct;
const isEmpty = placed == null;
let bg = '#fff', border = '1.5px dashed #cbd5e1';
if (over) { bg = '#eff6ff'; border = '1.5px solid #60a5fa'; }
else if (isCorrect) { bg = '#f0fdf4'; border = '1.5px solid #4ade80'; }
else if (isWrong) { bg = '#fef2f2'; border = '1.5px solid #f87171'; }
else if (!isEmpty) { bg = '#f8fafc'; border = '1.5px solid #94a3b8'; }
return (
{ e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setOver(true); }}
onDragLeave={() => setOver(false)}
onDrop={e => { e.preventDefault(); setOver(false); onDrop(slotId, e.dataTransfer.getData('text/plain')); }}
onClick={() => { if (placed != null) onClear(slotId); }}
title={placed != null ? 'Click to remove' : 'Drag a value here'}
style={{
minWidth: 50, minHeight: 24, padding: '2px 8px',
borderRadius: 4, background: bg, border,
fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
fontWeight: 600, color: '#1e293b',
display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: placed != null ? 'pointer' : 'default',
transition: 'all 0.15s',
position: 'relative',
}}
>
{isEmpty ? (
{label || '?'}
) : (
{placed}
)}
{isWrong && (
✗
)}
{isCorrect && (
✓
)}
);
}
/* ═══ Shared: Nav & Chrome ═══ */
const quizNavStyle = {
height: 42, display: 'flex', alignItems: 'center', padding: '0 20px',
borderBottom: '1px solid #e2e6ee', background: '#fff', flexShrink: 0,
fontFamily: "'Source Sans 3', sans-serif", gap: 10,
};
function QuizNav({ title }) {
return (
Unit 2
›
Chapter 4
›
{title}
Quiz
);
}
const footBtnStyle = {
fontFamily: "'Source Sans 3', sans-serif", fontSize: 12, fontWeight: 600,
padding: '5px 16px', borderRadius: 5, cursor: 'pointer', border: 'none',
};
/* ═══ Quiz A: Predict the State ═══ */
const QUIZ_A_ANSWERS = {
'sa': '10', 'sb': '15', 'smsg': '0x3A8F', 'sarr': '0x7C12',
'hh1': '"Hi"', 'hh2': '[1, 15, 3]',
};
const QUIZ_A_BANK = [
'10', '15', '0x3A8F', '0x7C12', '"Hi"', '[1, 15, 3]',
'20', '[1, 2, 3]', '"Hello"', '0xFFFF', '5',
];
function QuizPredictState() {
const [placed, setPlaced] = useState({});
const [checked, setChecked] = useState(false);
const usedValues = Object.values(placed);
const handleDrop = useCallback((slotId, value) => {
setChecked(false);
setPlaced(p => {
const next = { ...p };
// Remove value from any existing slot
for (const k in next) { if (next[k] === value) delete next[k]; }
next[slotId] = value;
return next;
});
}, []);
const handleClear = useCallback((slotId) => {
setChecked(false);
setPlaced(p => { const next = { ...p }; delete next[slotId]; return next; });
}, []);
const allFilled = Object.keys(QUIZ_A_ANSWERS).every(k => placed[k] != null);
const score = checked ? Object.keys(QUIZ_A_ANSWERS).filter(k => placed[k] === QUIZ_A_ANSWERS[k]).length : 0;
const total = Object.keys(QUIZ_A_ANSWERS).length;
const stackRows = useMemo(() => shuffleArr([
{ name: 'a', type: 'int', slot: 'sa' },
{ name: 'b', type: 'int', slot: 'sb' },
{ name: 'msg', type: 'string', slot: 'smsg' },
{ name: 'arr', type: 'int[]', slot: 'sarr' },
]), []);
const heapRows = useMemo(() => shuffleArr([
{ addr: '0x3A8F', type: 'String', slot: 'hh1' },
{ addr: '0x7C12', type: 'Int32[]', slot: 'hh2' },
]), []);
const bankA = useMemo(() => shuffleArr(QUIZ_A_BANK), []);
const colHdr = { fontSize: 8, fontWeight: 600, color: '#c1c8d4', textTransform: 'uppercase', letterSpacing: '0.08em', fontFamily: "'Source Sans 3', sans-serif" };
return (
{/* Question */}
After all 5 lines execute, drag values into the correct memory slots.
(Click a placed value to remove it)
{/* Main area */}
{/* Code */}
{/* Memory slots */}
{/* Stack */}
Stack Frame
NameTypeValue
{stackRows.map((r, i) => (
0 ? '1px solid #f1f3f7' : 'none',
}}>
{r.name}
{r.type}
))}
{/* Heap */}
Heap
{heapRows.map(r => (
{r.addr}
{r.type}
))}
{/* Console */}
Console
stdout
(no output at this point)
{/* Bank + Controls */}
Values
{bankA.map((v, i) => (
))}
{checked && (
{score}/{total} correct
{score === total && ' — Perfect!'}
{score < total && ' — Try again'}
)}
);
}
/* ═══ Quiz B: What Gets Printed? ═══ */
const QUIZ_B_CODE = [
'int a = 10;',
'int b = a + 5;',
'string msg = "Hi";',
'int[] arr = {1, 2, 3};',
'arr[1] = b;',
'Console.WriteLine(msg);',
'Console.WriteLine(b);',
];
const QUIZ_B_ANSWERS = { 'c0': 'Hi', 'c1': '15' };
const QUIZ_B_BANK = ['Hi', '15', '10', 'Hello', '0x3A8F', '[1, 15, 3]', 'msg', 'b'];
function QuizWhatPrints() {
const [placed, setPlaced] = useState({});
const [checked, setChecked] = useState(false);
const bankB = useMemo(() => shuffleArr(QUIZ_B_BANK), []);
const usedValues = Object.values(placed);
const handleDrop = useCallback((slotId, value) => {
setChecked(false);
setPlaced(p => {
const next = { ...p };
for (const k in next) { if (next[k] === value) delete next[k]; }
next[slotId] = value;
return next;
});
}, []);
const handleClear = useCallback((slotId) => {
setChecked(false);
setPlaced(p => { const next = { ...p }; delete next[slotId]; return next; });
}, []);
const allFilled = Object.keys(QUIZ_B_ANSWERS).every(k => placed[k] != null);
const score = checked ? Object.keys(QUIZ_B_ANSWERS).filter(k => placed[k] === QUIZ_B_ANSWERS[k]).length : 0;
const total = Object.keys(QUIZ_B_ANSWERS).length;
return (
Read the code and predict what appears in the console. Drag values to the output lines.
{/* Code */}
Program.cs
{QUIZ_B_CODE.map((line, i) => (
{i + 1}
))}
{/* Console output slots */}
What appears in the console after the program runs?
stdout
{['c0', 'c1'].map((slot, i) => (
{i + 1}.
))}
{/* Bank + Controls */}
Values
{bankB.map((v, i) => (
))}
{checked && (
{score}/{total} correct{score === total ? ' — Perfect!' : ' — Try again'}
)}
);
}
Object.assign(window, {
QuizPredictState, QuizWhatPrints,
shuffleArr, DragChip, DropSlot, QuizNav, footBtnStyle,
});