Adolfo Reyna
82 lines
3.0 KiB
JavaScript
82 lines
3.0 KiB
JavaScript
import { isCorrectTotal, isCorrectEquation, hasReasoningEvidence } from './src/session.mjs';
|
|
|
|
const groups = document.querySelector('#groups');
|
|
const addPair = document.querySelector('#add-pair');
|
|
const buildFeedback = document.querySelector('#build-feedback');
|
|
const totalRow = document.querySelector('#total-row');
|
|
const total = document.querySelector('#total');
|
|
const totalFeedback = document.querySelector('#total-feedback');
|
|
const activity2 = document.querySelector('#activity-2');
|
|
const activity3 = document.querySelector('#activity-3');
|
|
const equation = document.querySelector('#equation');
|
|
const equationFeedback = document.querySelector('#equation-feedback');
|
|
const reasoning = document.querySelector('#reasoning');
|
|
const reasoningFeedback = document.querySelector('#reasoning-feedback');
|
|
|
|
let pairsAdded = 0;
|
|
|
|
function feedback(element, message, kind = '') {
|
|
element.textContent = message;
|
|
element.className = `feedback ${kind}`;
|
|
}
|
|
|
|
function renderGroups() {
|
|
groups.innerHTML = '';
|
|
for (let i = 1; i <= 7; i += 1) {
|
|
const group = document.createElement('div');
|
|
group.className = 'group';
|
|
group.innerHTML = `<span>Person ${i}</span><div class="shoes">${i <= pairsAdded ? '👟 👟' : '· ·'}</div>`;
|
|
groups.append(group);
|
|
}
|
|
}
|
|
|
|
function reveal(activity, progressId) {
|
|
activity.hidden = false;
|
|
document.querySelector(progressId).classList.add('active');
|
|
activity.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
renderGroups();
|
|
|
|
addPair.addEventListener('click', () => {
|
|
if (pairsAdded < 7) pairsAdded += 1;
|
|
renderGroups();
|
|
if (pairsAdded === 7) {
|
|
addPair.disabled = true;
|
|
addPair.textContent = 'All 7 pairs are built';
|
|
feedback(buildFeedback, 'Nice work. You built 7 equal groups of 2 shoes.', 'good');
|
|
totalRow.hidden = false;
|
|
total.focus();
|
|
} else {
|
|
feedback(buildFeedback, `${pairsAdded} of 7 pairs built. Keep going.`);
|
|
}
|
|
});
|
|
|
|
document.querySelector('#check-total').addEventListener('click', () => {
|
|
if (isCorrectTotal(total.value)) {
|
|
feedback(totalFeedback, 'Yes—7 groups of 2 make 14 shoes.', 'good');
|
|
reveal(activity2, '#progress-2');
|
|
equation.focus();
|
|
} else {
|
|
feedback(totalFeedback, 'Try counting by twos: 2, 4, 6…', 'bad');
|
|
}
|
|
});
|
|
|
|
document.querySelector('#check-equation').addEventListener('click', () => {
|
|
if (isCorrectEquation(equation.value)) {
|
|
feedback(equationFeedback, 'Correct. Multiplication is a quick way to name equal groups.', 'good');
|
|
reveal(activity3, '#progress-3');
|
|
reasoning.focus();
|
|
} else {
|
|
feedback(equationFeedback, 'Use the numbers 7, 2, and 14. Either order for the factors works.', 'bad');
|
|
}
|
|
});
|
|
|
|
document.querySelector('#check-reasoning').addEventListener('click', () => {
|
|
if (hasReasoningEvidence(reasoning.value)) {
|
|
feedback(reasoningFeedback, 'Session complete! You used equal groups and multiplication to explain your answer.', 'good');
|
|
} else {
|
|
feedback(reasoningFeedback, 'Add how many groups there were, how many were in each group, and the total of 14.', 'bad');
|
|
}
|
|
});
|