The Smart Explorer - Learning Game
by MagicBear68294 lines10.1 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Smart Explorer - Learning Game</title>
<style>
/* تصميم مخصص لمعايير صعوبات التعلم وعسر القراءة */
@import url('https://googleapis.com');
body {
font-family: 'Comic Neue', sans-serif;
background-color: #F4ECD8; /* خلفية دافئة تمنع انعكاس الضوء القوي والإجهاد البصري */
color: #2C3E50;
margin: 0;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
user-select: none;
letter-spacing: 0.12em; /* زيادة المسافات بين الحروف */
word-spacing: 0.25em;
}
#game-container {
background-color: #FFFFFF;
border-radius: 24px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
max-width: 700px;
width: 100%;
text-align: center;
border: 4px solid #AED6F1;
margin-top: 10px;
box-sizing: border-box;
}
h1 {
color: #2E86C1;
font-size: 2.2rem;
margin: 0 0 5px 0;
}
.planet-banner {
background-color: #EBF5FB;
padding: 10px;
border-radius: 12px;
font-weight: bold;
color: #2980B9;
margin-bottom: 20px;
font-size: 1.1rem;
border: 1px solid #AED6F1;
}
#instruction-btn {
background-color: #5DADE2;
color: white;
border: none;
padding: 12px 30px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
font-family: inherit;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(93, 173, 226, 0.3);
transition: transform 0.2s, background-color 0.2s;
}
#instruction-btn:hover {
background-color: #3498DB;
transform: scale(1.02);
}
/* حاويات العرض للأسئلة */
.display-area {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
min-height: 80px;
align-items: center;
flex-wrap: wrap;
}
.slot {
width: 65px;
height: 65px;
border: 3px dashed #BDC3C7;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: bold;
background-color: #FAFAFA;
cursor: pointer;
transition: background-color 0.2s;
}
.slot.filled {
border-style: solid;
border-color: #2E86C1;
background-color: #EBF5FB;
}
/* خيارات الإجابة */
.options-area {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 25px;
min-height: 80px;
flex-wrap: wrap;
}
.option-card {
padding: 15px 25px;
min-width: 40px;
height: 40px;
background-color: #5499C7;
color: white;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: bold;
cursor: pointer;
box-shadow: 0 6px 0 #2980B9;
transition: transform 0.1s, box-shadow 0.1s;
}
.option-card:active {
transform: translateY(4px);
box-shadow: 0 2px 0 #2980B9;
}
/* ذكاء اصطناعي: إضاءة الحروف الصحيحة عند تعثر الطفل */
.option-card.ai-highlight {
background-color: #F4D03F !important;
box-shadow: 0 6px 0 #D4AC0D !important;
animation: pulse 1.5s infinite;
color: #2C3E50 !important;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
#feedback-message {
font-size: 1.3rem;
font-weight: bold;
min-height: 35px;
margin-bottom: 15px;
}
.progress-bar-container {
background-color: #EAEDED;
border-radius: 50px;
height: 20px;
width: 100%;
margin-bottom: 10px;
overflow: hidden;
}
.progress-bar-fill {
background-color: #2ECC71;
height: 100%;
width: 0%;
transition: width 0.5s ease;
}
/* لوحة تحكم المعلم وولي الأمر */
#teacher-dashboard {
background-color: #34495E;
color: #ECF0F1;
border-radius: 16px;
padding: 15px;
margin-top: 20px;
max-width: 700px;
width: 100%;
text-align: left;
box-sizing: border-box;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
#teacher-dashboard h3 {
margin: 0 0 10px 0;
color: #F1C40F;
border-bottom: 1px solid #5D6D7E;
padding-bottom: 5px;
}
.log-item {
font-family: monospace;
margin: 4px 0;
color: #BDC3C7;
}
.hidden { display: none !important; }
</style>
</head>
<body>
<div id="game-container">
<h1>🚀 The Smart Explorer</h1>
<div id="planet-info" class="planet-banner">Loading Planet...</div>
<button id="instruction-btn" onclick="speakInstruction()">🔊 Listen to Task</button>
<div id="task-prompt" style="font-size: 1.5rem; font-weight: bold; margin-bottom: 20px;"></div>
<div id="main-display" class="display-area"></div>
<div id="options-pool" class="options-area"></div>
<div id="feedback-message"></div>
<div class="progress-bar-container">
<div id="progress-fill" class="progress-bar-fill"></div>
</div>
<div id="status-text" style="font-weight: bold; color: #7F8C8D;">Spaceship Fixed: 0%</div>
</div>
<!-- لوحة رصد المعلم وأولياء الأمور -->
<div id="teacher-dashboard">
<h3>📊 Parent & Teacher Insights (AI Diagnostic Log)</h3>
<div id="ai-logs">
<div class="log-item">[System] Game initialized. Tracking cognitive engagement...</div>
</div>
</div>
<script>
// قاعدة البيانات التي تحتوي على 3 كواكب تعليمية مختلفة (لغة، حساب، أشكال)
const gameLevels = [
// الكوكب الأول: القراءة والتهجئة لدعم الديسليكسيا
{ planet: "🪐 Planet 1: Language & Spelling", type: "spelling", prompt: "Spell the word:", target: "SUN", choices: ["S", "U", "N", "B", "M"] },
{ planet: "🪐 Planet 1: Language & Spelling", type: "spelling", prompt: "Spell the word:", target: "STAR", choices: ["S", "T", "A", "R", "P", "K"] },
// الكوكب الثاني: الرياضيات الميسرة لدعم الديسكالكوليا
{ planet: "⚡ Planet 2: Cosmic Mathematics", type: "math", prompt: "Solve: 3 + 2 = ?", target: "5", choices: ["4", "5", "6", "2"] },
{ planet: "⚡ Planet 2: Cosmic Mathematics", type: "math", prompt: "Solve: 4 + 4 = ?", target: "8", choices: ["6", "7", "8", "9"] },
// الكوكب الثالث: تمييز الأشكال والأنماط البصرية لدعم التركيز
{ planet: "🔺 Planet 3: Shape Matrix", type: "shapes", prompt: "Find the Triangle:", target: "🔺", choices: ["🟩", "🔺", "🟡", "⭐"] },
{ planet: "🔺 Planet 3: Shape Matrix", type: "shapes", prompt: "Find the Star:", target: "⭐", choices: ["🟡", "🟩", "🔷", "⭐"] }
];
let currentLevelIndex = 0;
let incorrectAttempts = 0;
let userAnswers = [];
let aiAssistanceTriggered = false;
function logDiagnostic(message) {
const logsContainer = document.getElementById("ai-logs");
const log = document.createElement("div");
log.className = "log-item";
log.innerText = `[${new Date().toLocaleTimeString()}] ${message}`;
logsContainer.appendChild(log);
}
function initLevel() {
const level = gameLevels[currentLevelIndex];
incorrectAttempts = 0;
aiAssistanceTriggered = false;
document.getElementById("feedback-message").innerText = "";
document.getElementById("planet-info").innerText = level.planet;
document.getElementById("task-prompt").innerText = level.prompt;
const displayArea = document.getElementById("main-display");
displayArea.innerHTML = "";
if (level.type === "spelling") {
userAnswers = new Array(level.target.length).fill("");
for (let i = 0; i < level.target.length; i++) {
const slot = document.createElement("div");
slot.className = "slot";
slot.dataset.index = i;
slot.onclick = () => removeLetter(i);
displayArea.appendChild(slot);
}
} else {
userAnswers = [""];
const slot = document.createElement("div");
slot.className = "slot";
slot.dataset.index = 0;
slot.onclick = () => removeLetter(0);
displayArea.appendChild(slot);
}
Game Source: The Smart Explorer - Learning Game
Creator: MagicBear68
Libraries: none
Complexity: complex (294 lines, 10.1 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: the-smart-explorer-learning-game-magicbear68" to link back to the original. Then publish at arcadelab.ai/publish.