<![CDATA[Line Symmetry Shading]]>
false
true
true
false
false
]]>
true
true
true
false
20
1
true
undefined
Var Table 1
true
false
VARIABLE_EDITOR
shaded
true
false
VARIABLE_EDITOR
shaded2
true
false
VARIABLE_EDITOR
xApi
true
false
undefined
init
true
false
[point[1], point[0]]);
} else if (selectedLine === "Diagonal (-)") {
// Reflection over y = -x + 6: (x, y) to (6 - y, 6 - x)
mirroredPolygon = plottedPolygon.map(point => [6 - point[1], 6 - point[0]]);
}
// Find the mirrored polygon in mirroredPolygonPositions
const mirroredIndex = findMirroredPolygonIndex(mirroredPolygon);
if (mirroredIndex === -1) {
console.log(`No mirrored polygon found for plotted polygon index ${i}`);
isValid = false;
break;
}
const mirroredSelected = mirroredPolygonSelected[mirroredIndex];
if (mirroredSelected !== plottedSelected) {
console.log(`Mismatch at polygon index ${i}: Plotted=${plottedSelected}, Mirrored=${mirroredSelected}`);
isValid = false;
break;
}
}
break;
default:
console.log("Invalid line selection.");
isValid = false;
break;
}
if (!pastAttemptsByScenario[pastAttemptsByScenario.length-1].completed) {
pastAttemptsByScenario[pastAttemptsByScenario.length-1].attemptsTakenToComplete += 1;
}
// Record this attempt's grid snapshot
var snapshot = getGridLinesSnapshot();
if (snapshot) {
var scenario = pastAttemptsByScenario[pastAttemptsByScenario.length-1];
if (!scenario.attempts) scenario.attempts = [];
scenario.attempts.push({
attemptNumber: scenario.attempts.length + 1,
originalLines: snapshot.originalLines,
studentLines: snapshot.studentLines,
isCorrect: isValid
});
}
if (isValid) {
if (!pastAttemptsByScenario[pastAttemptsByScenario.length-1].completed) {
pastAttemptsByScenario[pastAttemptsByScenario.length-1].completed = true;
pastAttemptsByScenario[pastAttemptsByScenario.length-1].timeTakenToComplete = `${Math.floor((new Date() - scenarioStartTime) / 1000 / 60)}m ${Math.floor((new Date() - scenarioStartTime) / 1000 % 60)}s`;
score += 1;
}
// alert("Success! The mirrored points match the original plotted points.");
_tools.showOkDialog("Success! The mirrored points match the original plotted points.");
} else {
// alert("Try again! The mirrored points do not match.");
_tools.showOkDialog("Try again! The mirrored points do not match.");
}
let completedCount = pastAttemptsByScenario.filter(item => item.completed).length;
let totalCount = pastAttemptsByScenario.length;
let feedback = `Configurations completed: ${completedCount}/${totalCount}
`;
pastAttemptsByScenario.forEach((item, index) => {
feedback += `${item.configuration} (Configuration ${index + 1})
` +
`Number of tries to complete: ${item.attemptsTakenToComplete}
` +
`Time taken to Complete: ${item.timeTakenToComplete}
`;
if (item.attempts && item.attempts.length > 0) {
// Show original grid once (from first attempt)
const firstAttempt = item.attempts[0];
feedback += `Grid data (1=selected,0=unselected)
`;
feedback += `Original grid (1=selected,0=unselected):
`;
firstAttempt.originalLines.forEach(line => {
feedback += `${line}
`;
});
feedback += `
`;
// Then show only student grids for each attempt, with tick/cross status
item.attempts.forEach((attempt, aIndex) => {
const statusIcon = attempt.isCorrect
? `✔`
: `✘`;
feedback += `Attempt ${aIndex + 1} ${statusIcon}
`;
feedback += `Student grid (1=selected,0=unselected):
`;
attempt.studentLines.forEach(line => {
feedback += `${line}
`;
});
feedback += `
`;
});
} else {
// Fallback: show current grid once if we have no per-attempt history
const single = generateGridFeedback();
if (single) {
feedback += `Grid data (1=selected,0=unselected)
`;
feedback += single + "
";
}
}
});
// Recompute score from all scenarios so it always matches completed configurations
let computedScore = pastAttemptsByScenario.filter(item => item.completed).length;
score = computedScore;
console.log(feedback)
console.log(score)
// Persist to localStorage so SLS iframe and any new-tab instances stay in sync
writePayload(score, feedback);
// Also push immediately from this window (iframe or new tab)
pushToXAPI(score, feedback);
initMirroredPoints();
return isValid;
}
/**
* Finds the index of the mirrored polygon in mirroredPolygonPositions that matches the given polygon.
*
* @param {Array} targetPolygon - The polygon to match [ [x1, y1], [x2, y2], ... ].
* @returns {number} - The index of the matching mirrored polygon, or -1 if not found.
*/
function findMirroredPolygonIndex(targetPolygon) {
for (let j = 0; j < mirroredPolygonPositions.length; j++) {
const currentMirroredPolygon = mirroredPolygonPositions[j];
if (arePolygonsEqual(targetPolygon, currentMirroredPolygon)) {
return j;
}
}
return -1;
}
/**
* Compares two polygons for equality, regardless of the order of their points.
*
* @param {Array} poly1 - First polygon's points [ [x1, y1], [x2, y2], ... ].
* @param {Array} poly2 - Second polygon's points [ [x1, y1], [x2, y2], ... ].
* @returns {boolean} - True if polygons are equal, else false.
*/
function arePolygonsEqual(poly1, poly2) {
if (poly1.length !== poly2.length) return false;
// Create copies to avoid mutating original polygons
const sortedPoly1 = [...poly1].map(point => point.join(",")).sort();
const sortedPoly2 = [...poly2].map(point => point.join(",")).sort();
for (let i = 0; i < sortedPoly1.length; i++) {
if (sortedPoly1[i] !== sortedPoly2[i]) return false;
}
return true;
}
]]>
CODE_EDITOR
getPlottedCellPositions
true
false
= xMin ? 1 : -1;
const yStep = yMax >= yMin ? 1 : -1;
// Calculate the number of cells along each axis
const xCount = Math.abs(xMax - xMin);
const yCount = Math.abs(yMax - yMin);
for (let y = 0; y < yCount; y++) {
// Calculate the current Y position based on direction
const currentY = yMin + y * yStep;
const centerY = currentY + (yStep === 1 ? cellSize / 2 : -cellSize / 2);
for (let x = 0; x < xCount; x++) {
// Calculate the current X position based on direction
const currentX = xMin + x * xStep;
const centerX = currentX + (xStep === 1 ? cellSize / 2 : -cellSize / 2);
positions.push([centerX, centerY]);
}
}
console.log("positions", positions);
return positions;
}
]]>
CODE_EDITOR
getGridWithDiagonalSplits
true
false
x;
} else if (diagonalType === "negative") {
// Diagonal (-): y = -x + 6
diagonal = (x) => -x + 6;
} else {
throw new Error("Invalid diagonal type. Use 'positive' or 'negative'.");
}
for (let y = yMin; y < yMax; y += cellSize) {
for (let x = xMin; x < xMax; x += cellSize) {
// Define cell corners
const topLeft = [x, y + cellSize];
const topRight = [x + cellSize, y + cellSize];
const bottomLeft = [x, y];
const bottomRight = [x + cellSize, y];
// Determine the cell's position relative to the diagonal
const above = (pt) => pt[1] > diagonal(pt[0]);
const below = (pt) => pt[1] < diagonal(pt[0]);
const corners = [topLeft, topRight, bottomRight, bottomLeft];
const cornerStatuses = corners.map((pt) => {
// If a corner is essentially on the line, label it 'on'
if (Math.abs(pt[1] - diagonal(pt[0])) < 1e-6) return "on";
return above(pt) ? "above" : "below";
});
const allAbove = cornerStatuses.every((s) => s === "above" || s === "on");
const allBelow = cornerStatuses.every((s) => s === "below" || s === "on");
if (allAbove) {
// Entire cell is above the diagonal
// **Use 4 corners total — do NOT repeat the first corner.**
plottedPolygonPositions.push([
topLeft,
topRight,
bottomRight,
bottomLeft
]);
} else if (allBelow) {
// Entire cell is below the diagonal
mirroredPolygonPositions.push([
topLeft,
topRight,
bottomRight,
bottomLeft
]);
} else {
// Cell is intersected by the diagonal; split into two polygons
if (diagonalType === "negative") {
// Diagonal (-): top-left to bottom-right
// Upper triangle (above)
plottedPolygonPositions.push([topLeft, topRight, bottomRight]);
// Lower triangle (below)
mirroredPolygonPositions.push([topLeft, bottomRight, bottomLeft]);
} else if (diagonalType === "positive") {
// Diagonal (+): bottom-left to top-right
// Upper triangle (above)
plottedPolygonPositions.push([bottomLeft, topLeft, topRight]);
// Lower triangle (below)
mirroredPolygonPositions.push([bottomLeft, topRight, bottomRight]);
}
}
}
}
return {
plottedPolygonPositions,
mirroredPolygonPositions
};
}
]]>
CODE_EDITOR
generateGridFeedback
true
false
= 0 && row < gridSize && col >= 0 && col < gridSize) {
grid[row][col] = selected[i] ? 1 : 0;
}
}
}
function fillGridFromPolygons(polygons, selected, grid) {
if (!polygons || !selected) return;
for (let i = 0; i < polygons.length; i++) {
const poly = polygons[i];
if (!poly || poly.length === 0) continue;
let sumX = 0;
let sumY = 0;
for (let j = 0; j < poly.length; j++) {
sumX += poly[j][0];
sumY += poly[j][1];
}
const cx = sumX / poly.length;
const cy = sumY / poly.length;
const col = Math.round(cx - 0.5);
const row = Math.round(cy - 0.5);
if (row >= 0 && row < gridSize && col >= 0 && col < gridSize) {
grid[row][col] = selected[i] ? 1 : 0;
}
}
}
// Prefer cell-based grids when available
if (displayCells && plottedCellPositions && mirroredCellPositions) {
console.log("getGridLinesSnapshot using cells", {
plottedCellPositions,
mirroredCellPositions,
plottedCellSelected,
mirroredCellSelected
});
fillGridFromCells(plottedCellPositions, plottedCellSelected, scenarioGrid);
fillGridFromCells(mirroredCellPositions, mirroredCellSelected, mirrorGrid);
}
// Fallback to polygon-based grids (diagonal cases)
else if (displayPolygons && plottedPolygonPositions && mirroredPolygonPositions) {
console.log("getGridLinesSnapshot using polygons", {
plottedPolygonPositions,
mirroredPolygonPositions,
plottedPolygonSelected,
mirroredPolygonSelected
});
fillGridFromPolygons(plottedPolygonPositions, plottedPolygonSelected, scenarioGrid);
fillGridFromPolygons(mirroredPolygonPositions, mirroredPolygonSelected, mirrorGrid);
} else {
console.log("getGridLinesSnapshot: no suitable data, returning null");
return null;
}
const originalLines = [];
const studentLines = [];
for (let row = gridSize - 1; row >= 0; row--) {
originalLines.push(scenarioGrid[row].join(","));
studentLines.push(mirrorGrid[row].join(","));
}
return { originalLines, studentLines };
} catch (e) {
console.error("Error computing grid snapshot", e);
return null;
}
}
function generateGridFeedback() {
const snapshot = getGridLinesSnapshot();
if (!snapshot) return "";
const originalLines = snapshot.originalLines;
const studentLines = snapshot.studentLines;
let text = "";
text += "Original grid (1=selected,0=unselected):
";
for (let i = 0; i < originalLines.length; i++) {
text += originalLines[i] + "
";
}
text += "Student grid (1=selected,0=unselected):
";
for (let i = 0; i < studentLines.length; i++) {
text += studentLines[i] + "
";
}
return text;
}
]]>
CODE_EDITOR
onPlottedElementClick
true
false
color === plottedColor ? plottedColorDisabled : color
);
plottedPolygonColor = plottedPolygonColor.map(color =>
color === plottedColor ? plottedColorDisabled : color
);
mirroredCellColor = Array(18).fill("White");
mirroredPolygonColor = Array(21).fill("White");
mirroredCellSelected = Array(18).fill(false);
mirroredPolygonSelected = Array(21).fill(false);
start = true;
}
]]>
CODE_EDITOR
xApi
false
false
{
if (!document.hidden) syncFromLocalToXAPI();
});
window.addEventListener("focus", syncFromLocalToXAPI);
window.addEventListener("storage", (e) => {
if (e.key === PAYLOAD_KEY && e.newValue) {
syncFromLocalToXAPI();
}
});
]]>
CODE_EDITOR
xAPINewTab
false
false
{
if (!document.hidden) syncFromLocalToXAPI();
});
window.addEventListener("focus", syncFromLocalToXAPI);
window.addEventListener("storage", (e) => {
if (e.key === PAYLOAD_KEY && e.newValue) {
syncFromLocalToXAPI();
}
});
]]>
CODE_EDITOR
xAPInewTablookang
true
false
0) {
console.warn('[xAPI] storeState: Cannot send to SLS server. Missing: ' + missing.join(', '));
return;
}
window.ADL.XAPIWrapper.sendState(params.activityId, params.agent, params.stateId, null, stateValue);
console.log('[xAPI] Submitted to SLS:', stateValue);
} catch (err) {
console.error('[xAPI] storeState error (handled):', err);
}
};
window.getState = function () {
try {
if (!window.ADL || !window.ADL.XAPIWrapper) return null;
var params = XAPIUtils.getParameters();
if (!params || !params.activityId || !params.agent || !params.endpoint) return null;
var result = window.ADL.XAPIWrapper.getState(params.activityId, params.agent, params.stateId);
console.log('[xAPI] Retrieved state:', result);
return result;
} catch (err) {
console.error('[xAPI] getState error (handled):', err);
return null;
}
};
window.updateStore = function () {
try {
var sInput = document.getElementById("score-input");
var fInput = document.getElementById("feedback-input");
if (sInput || fInput) {
window.storeState({
score: sInput ? sInput.value : 0,
feedback: fInput ? fInput.value : ""
});
}
} catch (e) { }
};
// Initial parse on load
XAPIUtils.getParameters();
// ===== SLS bridge: keep score/feedback in sync across iframe and new-tab =====
// Store latest score + feedback in localStorage
window.writePayload = function(score, feedback) {
try {
var obj = { score: score, feedback: feedback, t: Date.now() };
localStorage.setItem(PAYLOAD_KEY, JSON.stringify(obj));
} catch (e) {
// ignore storage errors
}
};
window.readPayload = function() {
try {
var raw = localStorage.getItem(PAYLOAD_KEY);
return raw ? JSON.parse(raw) : null;
} catch (e) {
return null;
}
};
// Wrapper around storeState so we have a single integration point to xAPI
window.pushToXAPI = function(score, feedback) {
try {
window.storeState({ score: score, feedback: feedback });
} catch (e) {
// ignore xAPI errors here; SLS will still keep running
}
};
// When this page (iframe or new tab) is active, ensure latest payload is pushed to xAPI
function syncFromLocalToXAPI() {
var payload = window.readPayload();
if (!payload) return;
window.pushToXAPI(payload.score, payload.feedback);
}
window.addEventListener("load", syncFromLocalToXAPI);
window.addEventListener("visibilitychange", function() {
if (!document.hidden) syncFromLocalToXAPI();
});
window.addEventListener("focus", syncFromLocalToXAPI);
window.addEventListener("storage", function(e) {
if (e.key === PAYLOAD_KEY && e.newValue) {
syncFromLocalToXAPI();
}
});
})();
]]>
CODE_EDITOR
timer
true
false
`;
pastAttemptsByScenario.forEach((item, index) => {
feedback += `${item.configuration} (Configuration ${index + 1})
` +
`Number of tries to complete: ${item.attemptsTakenToComplete}
` +
`Time taken to Complete: ${item.timeTakenToComplete}
`;
if (item.attempts && item.attempts.length > 0) {
// Show original grid once (from first attempt)
const firstAttempt = item.attempts[0];
feedback += `Grid data (1=selected,0=unselected)
`;
feedback += `Original grid (1=selected,0=unselected):
`;
firstAttempt.originalLines.forEach(line => {
feedback += `${line}
`;
});
feedback += `
`;
// Then show only student grids for each attempt, with tick/cross status
item.attempts.forEach((attempt, aIndex) => {
const statusIcon = attempt.isCorrect
? `✔`
: `✘`;
feedback += `Attempt ${aIndex + 1} ${statusIcon}
`;
feedback += `Student grid (1=selected,0=unselected):
`;
attempt.studentLines.forEach(line => {
feedback += `${line}
`;
});
feedback += `
`;
});
} else {
// Fallback: show current grid once if we have no per-attempt history
const single = generateGridFeedback();
if (single) {
feedback += `Grid data (1=selected,0=unselected)
`;
feedback += single + "
";
}
}
});
console.log(feedback)
console.log(score)
// Persist to localStorage so SLS iframe and any new-tab instances stay in sync
writePayload(score, feedback);
// Also push immediately from this window (iframe or new tab)
pushToXAPI(score, feedback);
initMirroredPoints();
]]>
true
Elements.PlottingPanel
Elements.ShapeSet2D
Elements.ShapeSet2D
Elements.PolygonSet2D
Elements.PolygonSet2D
Elements.Segment2D