/* Use Inter font */
body {
font-family: ‘Inter’, sans-serif;
}
/* Custom styles for a smooth transition */
.feedback-card {
transition: opacity 0.5s ease-in-out;
}

const scenarios = [
// 1. Understanding how GenAI works (Training Data)
{
text: “You’re playing an AI doodle game. You draw a ‘bride’ wearing a traditional red dress from your culture. The AI fails, guessing ‘woman in red dress’. What do you do?”,
choices: [
{ text: “Assume my drawing is bad. I’ll try drawing a simpler object, like a ‘house’, to see if the AI can guess that instead.”, isCorrect: false, feedback: “While testing other words is logical, this action avoids the core problem: the AI’s biased dataset. You’re changing your behavior to fit the AI’s limitations.” },
{ text: “Report the issue. I’ll use the game’s ‘feedback’ button to report that the AI’s concept of ‘bride’ seems to lack cultural diversity and is Eurocentric.”, isCorrect: true, feedback: “This is a great action. You’re providing feedback to help diversify the dataset, which is the only way to fix this kind of cultural bias.” },
{ text: “Give up on that word. I’ll just skip this drawing and hope the next word, like ‘tree’ or ‘car’, is something the AI can actually understand.”, isCorrect: false, feedback: “Skipping the word also avoids the problem. It accepts the AI’s biased worldview as a fact rather than challenging it or trying to improve it.” }
],
bestChoiceExplanation: “The best choice is B. This is an active step. Instead of just accepting the AI’s culturally-biased failure, you’re taking action to report it, which can help developers correct the dataset and make the AI more inclusive.”
},
// 2. Understanding how GenAI works (Pattern Recognition)
{
text: “Your music streaming service recommends a rock song you hate. Your friend, who just visited, loves rock. The AI keeps pushing this genre. What’s your next step?”,
choices: [
{ text: “Do nothing. I’ll just skip the songs I don’t like. The AI will eventually figure it out on its own if I just keep skipping.”, isCorrect: false, feedback: “This is passive. While skipping gives the AI *some* data, it’s a weak signal. The AI might think you’re just not in the mood for rock *right now*.” },
{ text: “Delete the app. This is so annoying and it clearly doesn’t understand me, so I’ll find a new service that works better.”, isCorrect: false, feedback: “This is an extreme reaction. All recommendation AIs make mistakes based on flawed associations. You’re giving up without trying to fix the problem.” },
{ text: “Take action. I’ll find the ‘Dislike’ or ‘Don’t recommend this’ button for the rock songs to actively re-train the algorithm about my preferences.”, isCorrect: true, feedback: “This is the most effective action. Using explicit ‘dislike’ or ‘less of this’ feedback is the fastest and clearest way to correct the AI’s flawed pattern recognition.” }
],
bestChoiceExplanation: “The best choice is C. This is an active step to correct the AI’s flawed pattern-matching. It’s grouping you with your friend (a ‘collaborative filtering’ error) and you need to provide explicit negative feedback to break that incorrect association.”
},
// 3. Recognising inequalities and biases (Cultural/Gender Bias)
{
text: “You’re creating a presentation and need a ‘doctor’ image. The AI only gives you men. You ask for a ‘nurse’ and only get women. What do you do?”,
choices: [
{ text: “Refine my prompt. I’ll ask for a ‘female doctor’ or ‘male nurse’ and will make a point to include a diverse set of images in my presentation.”, isCorrect: true, feedback: “This is the best action. You are consciously ‘prompt crafting’ to counteract the AI’s bias and taking responsibility for the content you are creating.” },
{ text: “Use the images anyway. It’s faster, and people understand that these are just common AI mistakes. It doesn’t really matter.”, isCorrect: false, feedback: “This is a harmful action. By using the biased images, you are passively reinforcing the exact stereotype the AI is showing. It *does* matter.” },
{ text: “Find a different AI tool. This one is clearly sexist, and I should find a ‘better’ one that doesn’t have any biases.”, isCorrect: false, feedback: “While some tools may be better, *all* large AI models have biases. Running away from the problem won’t solve it. The key is learning to work *against* the bias.” }
],
bestChoiceExplanation: “The best choice is A. This is a classic example of ‘engineered inequality.’ Instead of passively accepting the biased output, you are taking an active role in ‘prompt crafting’ to counteract the stereotype and ensure your own work is representative.”
},
// 4. Recognising inequalities and biases (Geopolitical Bias)
{
text: “You ask an AI for a ‘neutral’ summary of a geopolitical conflict. Its response clearly favors one side. How do you proceed with your research?”,
choices: [
{ text: “Treat the AI’s summary as *one* biased source. I will actively seek out sources and perspectives from the marginalized side to get a fuller picture.”, isCorrect: true, feedback: “This is the most critically literate action. You are recognizing the AI’s output is not ‘truth’ but a reflection of its dominant data (the ‘crescents’ are missing).” },
{ text: “Use the summary as my starting point. It seems well-written, and I can just ‘tweak’ the biased language a little bit myself to make it sound neutral.”, isCorrect: false, feedback: “This is risky. By ‘tweaking’ a biased summary, you are likely to keep the original biased framing. You’re cleaning the ‘surface’ without fixing the biased foundation.” },
{ text: “Try to ‘fix’ the AI. I will argue with the chatbot and tell it that its summary is biased, trying to convince it to write a truly neutral one.”, isCorrect: false, feedback: “While this *can* sometimes work, you’re arguing with a prediction machine. It’s more effective to treat the output as a biased source and do your own research.” }
],
bestChoiceExplanation: “The best choice is A. The AI isn’t neutral; it’s a ‘political technology.’ Acknowledging its output as one (dominant) perspective and actively seeking out marginalized perspectives (the ‘crescents’) is the core of critical literacy.”
},
// 5. Examining ethical issues (Data Privacy)
{
text: “A new AI app promises to ‘find your celebrity lookalike.’ To use it, you must grant access to your *entire* photo library and your contacts. What do you do?”,
choices: [
{ text: “Click ‘Agree’. My friends are all using it, and I want to see my lookalike. My data is probably already out there anyway.”, isCorrect: false, feedback: “This is a common but risky attitude. Your data (and your contacts’ data) has value and is being harvested. This is an unethical trade for a simple game.” },
{ text: “Click ‘Agree’, but I’ll be sure to go into my phone settings later to revoke the permission. It’s fine for just a few minutes.”, isCorrect: false, feedback: “This is still very risky. The app could have already uploaded your data in those few minutes. This is not a safe practice.” },
{ text: “Deny access. The app doesn’t need all my contacts and photos for this one task. This is a data-grab, likely to train their AI or sell my data.”, isCorrect: true, feedback: “This is the most critically literate action. You’re examining the ethics of the data exchange and correctly identifying that the app is asking for far more than it needs.” }
],
bestChoiceExplanation: “The best choice is C. A key part of AI ethics is data consent. You recognized the app’s request was an overreach (it doesn’t *need* your contacts for this) and you made an active choice to protect your (and your friends’) privacy.”
},
// 6. Examining ethical issues (Labor Ethics)
{
text: “You read that your favorite AI tool was ‘cleaned’ by low-paid workers who were exposed to traumatic content. How does this change your relationship with the tool?”,
choices: [
{ text: “I’ll continue to use the tool as before. It’s a useful product, and this is just how big tech companies operate. It’s not my problem.”, isCorrect: false, feedback: “This response accepts the exploitation. A critical perspective means questioning *who* pays the price for our ‘clean’ AI and not just ignoring it.” },
{ text: “I will share this information with my friends/colleagues who also use the tool, so we are all aware of the hidden human cost behind this ‘magic’ AI.”, isCorrect: true, feedback: “This is a great action. You are pulling back the curtain and making the ‘invisible’ human labor visible to others, which is a key part of critical literacy.” },
{ text: “I’ll stop using this tool and all other AI, as they are all clearly unethical and I don’t want to be part of this system.”, isCorrect: false, feedback: “While a valid personal choice, this isn’t the only option. A more literate action is to stay engaged and advocate for better practices, rather than just disengaging.” }
],
bestChoiceExplanation: “The best choice is B. Critical AI literacy means looking ‘under the hood.’ Instead of ignoring the problem or just disengaging, you are making the invisible, exploitative labor *visible* to your community, which is a powerful ethical action.”
},
// 7. Crafting effective prompts (Vague Prompt)
{
text: “You ask an AI, ‘Write me a story.’ It gives you a generic, boring story. You’re disappointed. What do you do next?”,
choices: [
{ text: “I’ll ‘craft’ a better prompt. I’ll try again, giving the AI a role (‘You are a pirate captain’), a context (‘writing in your logbook’), and a task.”, isCorrect: true, feedback: “This is ‘prompt crafting.’ By giving the AI a persona, context, and clear criteria, you are guiding it to produce a much more interesting and specific output.” },
{ text: “I’ll close the chatbot. This AI is clearly not creative and is a waste of time for anything other than simple facts.”, isCorrect: false, feedback: “This is a common mistake. The AI’s output is a reflection of your *input*. A vague prompt will always give a generic output. The tool isn’t useless.” },
{ text: “I’ll ask it again, but this time I’ll say ‘write me a *better* story.’ The AI should know what ‘better’ means.”, isCorrect: false, feedback: “The AI doesn’t understand ‘better.’ It’s not human. You need to provide specific, concrete details, not abstract concepts like ‘good’ or ‘better’.” }
],
bestChoiceExplanation: “The best choice is A. This moves from being a passive user to an active ‘prompt crafter.’ You are thoughtfully designing the prompt to get the creative output you want, treating the AI as a collaborator rather than a magic box.”
},
// 8. Crafting effective prompts (Refining Prompts)
{
text: “You ask an image AI for a ‘professional headshot’. It gives a generic stock photo. You want something more creative. What’s your next prompt?”,
choices: [
{ text: “I’ll just try the same prompt ‘professional headshot’ five more times, hoping to get a lucky, random result that looks better.”, isCorrect: false, feedback: “This is inefficient. While outputs vary, you’re not guiding the AI, so you’ll just get more generic, random outputs.” },
{ text: “I’ll just search for a good stock photo online instead. It’s clear this AI can’t create what I’m picturing in my head.”, isCorrect: false, feedback: “This gives up too easily. The AI can’t read your mind. You have to *tell* it what you’re picturing by using descriptive words.” },
{ text: “I’ll add specific, descriptive keywords. I’ll try ‘headshot, dramatic lighting, in a cozy library, smiling, looking off-camera.'”, isCorrect: true, feedback: “Excellent. Prompt crafting is an iterative process. Adding specific, descriptive details about lighting, setting, and pose is how you refine the output.” }
],
bestChoiceExplanation: “The best choice is C. Effective ‘prompt crafting’ is about iteration and specificity. You can’t expect the AI to read your mind. You have to learn its language, which is the language of descriptive detail.”
},
// 9. Assessing appropriate uses (“Botshit”)
{
text: “You need facts for a paper on a niche local historical figure. The AI gives a detailed biography with dates and quotes. What do you do with this info?”,
choices: [
{ text: “I’ll use it. I’ll copy the biography into my paper and add the AI as a source. The AI is confident, so it’s probably correct.”, isCorrect: false, feedback: “This is very dangerous. The AI is *not* a source and is *not* an expert. It’s a ‘confident bullshitter’ and this information is likely fabricated (‘botshit’).” },
{ text: “I’ll treat this as ‘botshit’. I will assume *every fact* is a hallucination until I can verify it with a real source, like from the local library or historical society.”, isCorrect: true, feedback: “This is the most critically literate action. AI hallucinates most on niche topics. You must assume it’s wrong until *proven* right by real, primary sources.” },
{ text: “I’ll do a quick Google search. If I see a website that mentions the same name, I’ll assume the AI’s details are correct and use them.”, isCorrect: false, feedback: “This is poor verification. A single, random website isn’t a reliable source. You need to verify the *specific dates and quotes* from a reputable source.” }
],
bestChoiceExplanation: “The best choice is B. A key skill is knowing when AI is likely to produce ‘botshit.’ For niche topics, the AI *will* confidently make up facts. You must assume it’s 100% false until you can verify every detail with real, primary sources.”
},
// 10. Assessing appropriate uses (Human vs. AI)
{
text: “A friend is clearly distressed and asks for advice on a serious personal problem. You’re busy and unsure what to say. What is your action?”,
choices: [
{ text: “I’ll put my phone down. I will make time to listen, even if I’m busy. This is a moment that needs real human empathy, not an AI.”, isCorrect: true, feedback: “This is the core of ‘assessing appropriate use.’ You correctly identified this as a situation requiring human empathy and connection, which AI cannot provide.” },
{ text: “I’ll ask an AI ‘how to help a friend in distress’ and then copy-paste its advice to my friend. The AI knows more about psychology than I do.”, isCorrect: false, feedback: “This is still using AI as a stand-in for your own engagement. Your friend needs *you* to listen, not a list of generic advice from an algorithm.” },
{ text: “I’ll send my friend a link to an AI therapy bot. It’s available 24/7 and is trained to handle these kinds of complex emotional problems.”, isCorrect: false, feedback: “This is a form of ‘technological solutionism’—applying a tech ‘solution’ to a human problem. This can feel cold and dismissive to someone in distress.” }
],
bestChoiceExplanation: “The best choice is A. Critical AI literacy isn’t just about spotting bias; it’s about discerning which problems are not ‘tech’ problems at all. A friend in distress needs human connection and empathy, not an algorithm. Recognizing when *not* to use AI is crucial.”
}
];

let currentScenarioIndex = 0;
let score = 0;

const gameTitle = document.getElementById(‘game-title’);
const gameSubtitle = document.getElementById(‘game-subtitle’);
const scenarioArea = document.getElementById(‘scenario-area’);
const scenarioCounter = document.getElementById(‘scenario-counter’);
const scenarioText = document.getElementById(‘scenario-text’);
const choicesContainer = document.getElementById(‘choices-container’);
const feedbackArea = document.getElementById(‘feedback-area’);
const feedbackCard = document.getElementById(‘feedback-card’);
const feedbackTitle = document.getElementById(‘feedback-title’);
const feedbackText = document.getElementById(‘feedback-text’);
const nextButton = document.getElementById(‘next-button’);
const finalScoreArea = document.getElementById(‘final-score-area’);
const finalScore = document.getElementById(‘final-score’);
const restartButton = document.getElementById(‘restart-button’);

function startGame() {
currentScenarioIndex = 0;
score = 0;
scenarioArea.style.display = ‘block’;
gameTitle.style.display = ‘block’;
gameSubtitle.style.display = ‘block’;
feedbackArea.style.display = ‘none’;
finalScoreArea.style.display = ‘none’;
showScenario(scenarios[currentScenarioIndex]);
}

function showScenario(scenario) {
scenarioCounter.textContent = `SCENARIO ${currentScenarioIndex + 1} / ${scenarios.length}`;
scenarioText.textContent = scenario.text;
choicesContainer.innerHTML = ”;

// Randomize choice order
const shuffledChoices = […scenario.choices].sort(() => Math.random() – 0.5);

shuffledChoices.forEach(choice => {
const button = document.createElement(‘button’);
button.innerHTML = choice.text;
button.className = “w-full text-left bg-gray-700 hover:bg-gray-600 text-gray-200 font-medium py-4 px-5 rounded-lg transition duration-300”;
button.onclick = () => selectChoice(choice, scenario.bestChoiceExplanation);
choicesContainer.appendChild(button);
});
}

function selectChoice(choice, bestChoiceExplanation) {
scenarioArea.style.display = ‘none’;
feedbackArea.style.display = ‘block’;
feedbackCard.style.opacity = 0;

if (choice.isCorrect) {
score++;
feedbackCard.className = ‘feedback-card p-6 rounded-lg bg-green-900 border border-green-700’;
feedbackTitle.textContent = ‘Correct!’;
feedbackTitle.className = ‘text-2xl font-bold mb-3 text-green-300’;
feedbackText.textContent = `That’s the best choice. ${choice.feedback}`;
} else {
feedbackCard.className = ‘feedback-card p-6 rounded-lg bg-red-900 border border-red-700’;
feedbackTitle.textContent = ‘Not Quite.’;
feedbackTitle.className = ‘text-2xl font-bold mb-3 text-red-300’;
feedbackText.innerHTML = `

${choice.feedback}

A better choice was:

${bestChoiceExplanation}

`;
}

// Fade in the feedback card
setTimeout(() => {
feedbackCard.style.opacity = 1;
}, 50); // Small delay to ensure CSS transition triggers

if (currentScenarioIndex === scenarios.length – 1) {
nextButton.textContent = ‘Finish Game’;
} else {
nextButton.textContent = ‘Next Scenario’;
}
}

function next() {
currentScenarioIndex++;
if (currentScenarioIndex < scenarios.length) {
feedbackArea.style.display = 'none';
scenarioArea.style.display = 'block';
showScenario(scenarios[currentScenarioIndex]);
} else {
showFinalScore();
}
}

function showFinalScore() {
feedbackArea.style.display = 'none';
scenarioArea.style.display = 'none';
gameTitle.style.display = 'none';
gameSubtitle.style.display = 'none';
finalScoreArea.style.display = 'block';
finalScore.textContent = score;
}

nextButton.onclick = next;
restartButton.onclick = startGame;

// Start the game on load
startGame();