IB DIGITAL SOCIETY
Topic 2.0 Concepts Defense • Author: Teacher Fara
Score:
0
Progress:
0 / 0
IB DP Digital Society • Assessment Prep
CONCEPT DEFENDER
Test your mastery of the 7 core Digital Society concepts: Change, Power, Space, Identity, Expression, Systems, Values and Ethics.
Mission Rules:
- Read the prompt/scenario displayed at the top.
- Aliens floating across space carry possible concept answers.
- No color or subtopic hints! All answer pods are styled identically. You must analyze the question carefully.
- Click/Tap the correct alien to shoot laser beams and claim points.
- Complete all questions to unlock your full Revision Breakdown report.
Curated by Teacher Fara • IB Diploma Programme
${this.text}
`;
const arenaWidth = shootingArena.clientWidth || 800;
const arenaHeight = shootingArena.clientHeight || 400;
// Position calculation for smooth distribution
const padding = 30;
const targetWidth = 220;
const targetHeight = 100;
// Segment arena horizontally or floating bounds
this.width = targetWidth;
this.height = targetHeight;
this.x = Math.random() * (arenaWidth – targetWidth – padding * 2) + padding;
this.y = Math.random() * (arenaHeight – targetHeight – padding * 2) + padding;
// Velocity for floating bounce
this.vx = (Math.random() – 0.5) * 1.8;
this.vy = (Math.random() – 0.5) * 1.8;
if (Math.abs(this.vx) < 0.5) this.vx = 0.8;
if (Math.abs(this.vy) handleAlienClick(this, e));
shootingArena.appendChild(this.element);
}
update(arenaWidth, arenaHeight) {
this.x += this.vx;
this.y += this.vy;
// Bounce off horizontal boundaries
if (this.x = arenaWidth – 10) {
this.vx *= -1;
this.x = Math.max(10, Math.min(this.x, arenaWidth – this.width – 10));
}
// Bounce off vertical boundaries
if (this.y = arenaHeight – 10) {
this.vy *= -1;
this.y = Math.max(10, Math.min(this.y, arenaHeight – this.height – 10));
}
this.element.style.left = `${this.x}px`;
this.element.style.top = `${this.y}px`;
}
destroy() {
if (this.element && this.element.parentNode) {
this.element.parentNode.removeChild(this.element);
}
}
}
function loadQuestion() {
clearAliens();
if (currentQuestionIndex >= QUESTIONS_DATABASE.length) {
endGame();
return;
}
const currentQ = QUESTIONS_DATABASE[currentQuestionIndex];
// Update HUD
questionTracker.innerText = `Question ${currentQuestionIndex + 1} of ${QUESTIONS_DATABASE.length}`;
questionText.innerText = currentQ.question;
progressDisplay.innerText = `${currentQuestionIndex + 1} / ${QUESTIONS_DATABASE.length}`;
// Create Aliens for Options
const arenaWidth = shootingArena.clientWidth;
const arenaHeight = shootingArena.clientHeight;
currentQ.options.forEach((opt, idx) => {
const alien = new AlienTarget(opt, idx, currentQ.options.length);
activeAliens.push(alien);
});
}
function clearAliens() {
activeAliens.forEach(alien => alien.destroy());
activeAliens = [];
}
function handleAlienClick(alien, event) {
sfx.init();
const rect = shootingArena.getBoundingClientRect();
const clickX = event.clientX – rect.left;
const clickY = event.clientY – rect.top;
// Cannon firing position (Bottom Center of Arena)
const cannonX = rect.width / 2;
const cannonY = rect.height;
const currentQ = QUESTIONS_DATABASE[currentQuestionIndex];
const isCorrect = (alien.text === currentQ.correct);
// Play Sound & Beam Animation
sfx.playLaser();
drawLaserBeam(cannonX, cannonY, clickX, clickY, isCorrect);
sfx.playHit(isCorrect);
// Record Answer for Review
userAnswers.push({
questionId: currentQ.id,
questionText: currentQ.question,
userChoice: alien.text,
correctChoice: currentQ.correct,
explanation: currentQ.explanation,
isCorrect: isCorrect
});
if (isCorrect) {
score += 100;
scoreDisplay.innerText = score;
showFeedback(true, “CORRECT! CONCEPT MATCHED”);
} else {
showFeedback(false, `INCORRECT! Correct Answer: ${currentQ.correct}`);
}
// Lock interaction briefly then advance
shootingArena.style.pointerEvents = ‘none’;
setTimeout(() => {
currentQuestionIndex++;
shootingArena.style.pointerEvents = ‘auto’;
loadQuestion();
}, 1200);
}
function showFeedback(isCorrect, message) {
feedbackBanner.innerText = message;
feedbackBanner.className = `absolute top-4 left-1/2 transform -translate-x-1/2 z-30 px-6 py-3 rounded-xl font-orbitron font-bold text-center text-sm transition-all duration-300 pointer-events-none shadow-2xl ${
isCorrect
? ‘bg-emerald-500/90 text-slate-950 border border-emerald-300 opacity-100 translate-y-2’
: ‘bg-rose-500/90 text-white border border-rose-300 opacity-100 translate-y-2’
}`;
setTimeout(() => {
feedbackBanner.classList.add(‘opacity-0’);
feedbackBanner.classList.remove(‘translate-y-2’);
}, 1000);
}
function gameLoop() {
const arenaWidth = shootingArena.clientWidth;
const arenaHeight = shootingArena.clientHeight;
// Update Alien Positions
activeAliens.forEach(alien => alien.update(arenaWidth, arenaHeight));
// Render Laser Beams
renderLaserEffects();
animationFrameId = requestAnimationFrame(gameLoop);
}
function endGame() {
cancelAnimationFrame(animationFrameId);
questionPanel.classList.add(‘hidden’);
clearAliens();
// Calculate Metrics
const totalQuestions = QUESTIONS_DATABASE.length;
const correctCount = userAnswers.filter(a => a.isCorrect).length;
const accuracy = Math.round((correctCount / totalQuestions) * 100);
// Calculate IB Grade (1 to 7 scale)
let ibGrade = 1;
if (accuracy >= 85) ibGrade = 7;
else if (accuracy >= 72) ibGrade = 6;
else if (accuracy >= 60) ibGrade = 5;
else if (accuracy >= 48) ibGrade = 4;
else if (accuracy >= 35) ibGrade = 3;
else if (accuracy >= 20) ibGrade = 2;
document.getElementById(‘final-score’).innerText = score;
document.getElementById(‘final-accuracy’).innerText = `${accuracy}% (${correctCount}/${totalQuestions})`;
document.getElementById(‘final-grade’).innerText = `Grade ${ibGrade}`;
// Generate Detailed Review Breakdown Card List
reviewList.innerHTML = ”;
userAnswers.forEach((item, index) => {
const card = document.createElement(‘div’);
card.className = `p-4 md:p-5 rounded-xl border text-sm space-y-2 transition ${
item.isCorrect
? ‘bg-slate-900/90 border-emerald-500/40’
: ‘bg-slate-900/90 border-rose-500/40’
}`;
card.innerHTML = `
Q${index + 1}. ${item.questionText}
${item.isCorrect ? ‘CORRECT’ : ‘INCORRECT’}
Your Selected Concept:
${item.userChoice}
Correct IB Concept:
${item.correctChoice}
Teacher Fara’s IB Analysis: ${item.explanation}
`;
reviewList.appendChild(card);
});
reviewScreen.classList.remove(‘hidden’);
}
function startMission() {
sfx.init();
currentQuestionIndex = 0;
score = 0;
userAnswers = [];
scoreDisplay.innerText = ‘0’;
startScreen.classList.add(‘hidden’);
reviewScreen.classList.add(‘hidden’);
questionPanel.classList.remove(‘hidden’);
resizeLaserCanvas();
loadQuestion();
gameLoop();
}
startBtn.addEventListener(‘click’, startMission);
restartBtn.addEventListener(‘click’, startMission);
// Audio Mute Toggle Listener
audioToggleBtn.addEventListener(‘click’, () => {
sfx.muted = !sfx.muted;
audioToggleBtn.classList.toggle(‘opacity-50’, sfx.muted);
});
// Responsive Resize Handler
window.addEventListener(‘resize’, () => {
resizeStarCanvas();
resizeLaserCanvas();
});
// Initialize Starfield Canvas on page load
window.onload = function() {
resizeStarCanvas();
renderStars();
};
JURNAL CIKGU FAJ 