Upload 4 files

Apache License.txt

@@ -0,0 +1,17 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   Copyright 2025 Shift Mind AI Labs
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,102 @@
+---
+title: "🛡️ EthicsGuard Pro – AI Education Ethics Assessment Platform"
+emoji: "🛡️"
+colorFrom: "blue"
+colorTo: "purple"
+sdk: "static"
+sdk_version: "0.1.0"
+app_file: "index.html"
+pinned: false
+---
+
+# 🛡️ EthicsGuard Pro – AI Education Ethics Assessment Platform  
+**Developed by Shift Mind AI Labs**
+
+EthicsGuard Pro is an open-source, privacy-first assessment platform that generates personalized, multilingual quizzes on **AI ethics in education**. Instantly create, take, and receive feedback on 10-question MCQ tests—aligned to the latest responsible AI, data privacy, and digital citizenship standards. All language processing is local and privacy-protected.
+
+---
+
+## 🚀 Features
+
+- **Personalized AI Ethics Quizzes:**  
+  Instantly generate and take 10-question MCQ tests on AI and ethics in education.
+- **Immediate, Actionable Feedback:**  
+  Receive automated scoring and detailed, question-by-question feedback after submission.
+- **Multilingual Support:**  
+  UI and assessments available in 80+ languages (OpenAI API required; 100% in-browser).
+- **Modern, Accessible UI:**  
+  Mobile responsive, RTL/LTR support, accessible color palette, progress indicators, and cache control.
+- **Data Privacy:**  
+  API keys and all content **never leave your browser**.
+
+---
+
+## 🛠 How to Use
+
+1. **Open the tool** in your browser (local file or Hugging Face Space).
+2. **Select your language** and enter your OpenAI API key (never leaves your device).
+3. **Generate Test:**  
+   - Click “🧠 Generate Test” to create a new AI ethics quiz.
+4. **Take the Test:**  
+   - Answer the 10 questions and submit.
+5. **Review Feedback:**  
+   - Instantly see your score and detailed feedback for every question.
+6. **Repeat as Needed:**  
+   - Click “Generate New Test” to try another randomized quiz or practice in a new language.
+
+---
+
+## 👩‍🏫 For Teachers
+
+- **Professional Development:**  
+  Assess your own or colleagues’ understanding of AI ethics, bias, privacy, and responsible use in education.
+- **Classroom Use:**  
+  Assign as a formative or summative quiz for students in digital citizenship, computer science, or ethics modules.
+- **Discussion Starter:**  
+  Use feedback explanations as prompts for class debates or group projects on AI ethics.
+- **Multilingual Assessment:**  
+  Instantly provide assessments in native languages for diverse or international classes.
+
+---
+
+## 👨‍🎓 For Students
+
+- **Knowledge Check:**  
+  Practice and test your understanding of ethical AI, bias, consent, and safe tech use in school.
+- **Revision:**  
+  Use as self-paced quizzes to prep for assessments or projects.
+- **Peer Learning:**  
+  Challenge classmates or work in teams—compare results and discuss ethical dilemmas.
+
+---
+
+## 🔐 Data Privacy
+
+- Your OpenAI API key, responses, and test data **never leave your browser**.
+- No data is transmitted to Shift Mind AI Labs, Hugging Face, or third parties.
+
+---
+
+## 📄 License
+
+Licensed under the [Apache License 2.0](./LICENSE).
+
+---
+
+## 🧠 About Shift Mind AI Labs
+
+Shift Mind AI Labs builds open-source, ethical AI tools for global education and responsible technology use.
+
+🌐 https://www.shiftmind.io  
+✉️ info@shiftmind.io
+
+---
+
+## 🙌 Contributing
+
+Pull requests, suggestions, and partnerships are welcome!  
+For training, research pilots, or district/school rollouts: **info@shiftmind.io**
+
+---
+
+*Empowering educators and students everywhere to understand and practice ethical AI in education—securely, equitably, and with real impact.*

index.html

@@ -0,0 +1,2016 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EthicsGuard Pro - AI Education Ethics Assessment Platform</title>
+    <style>
+        :root {
+            --primary: #1e40af;
+            --secondary: #7c3aed;
+            --accent: #3b82f6;
+            --background: #f8fafc;
+            --surface: #ffffff;
+            --text: #1e293b;
+            --text-secondary: #64748b;
+            --border: #e2e8f0;
+            --success: #059669;
+            --warning: #ea580c;
+            --error: #dc2626;
+            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+            color: var(--text);
+            line-height: 1.6;
+            min-height: 100vh;
+            padding: 15px;
+            transition: all 0.3s ease;
+        }
+
+        /* RTL Support */
+        [dir="rtl"] {
+            text-align: right;
+        }
+
+        [dir="rtl"] .container {
+            direction: rtl;
+        }
+
+        [dir="rtl"] .api-key-section {
+            margin: 15px 15px 15px auto;
+        }
+
+        [dir="rtl"] .language-switcher {
+            right: auto;
+            left: 15px;
+        }
+
+        /* Language Selection Landing */
+        .language-landing {
+            display: block;
+            max-width: 600px;
+            margin: 50px auto;
+            background: var(--surface);
+            border-radius: 16px;
+            box-shadow: var(--shadow-lg);
+            padding: 40px;
+            text-align: center;
+        }
+
+        .language-landing h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 15px;
+        }
+
+        .language-landing p {
+            font-size: 1.1rem;
+            color: var(--text-secondary);
+            margin-bottom: 30px;
+        }
+
+        .language-selector {
+            margin-bottom: 25px;
+        }
+
+        .language-selector label {
+            display: block;
+            margin-bottom: 10px;
+            font-weight: 600;
+            color: var(--text);
+            font-size: 1.1rem;
+        }
+
+        .language-selector select {
+            width: 100%;
+            padding: 15px 20px;
+            border: 2px solid var(--border);
+            border-radius: 12px;
+            font-size: 1.1rem;
+            font-family: inherit;
+            background: var(--surface);
+            transition: all 0.2s ease;
+            margin-bottom: 20px;
+        }
+
+        .language-selector select:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
+        }
+
+        .api-key-landing {
+            margin-bottom: 25px;
+        }
+
+        .api-key-landing label {
+            display: block;
+            margin-bottom: 10px;
+            font-weight: 600;
+            color: var(--text);
+            font-size: 1.1rem;
+        }
+
+        .api-key-landing input {
+            width: 100%;
+            padding: 15px 20px;
+            border: 2px solid var(--border);
+            border-radius: 12px;
+            font-size: 1.1rem;
+            background: var(--surface);
+            transition: all 0.2s ease;
+            font-family: 'Courier New', monospace;
+        }
+
+        .api-key-landing input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
+        }
+
+        .start-btn {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            color: white;
+            padding: 18px 40px;
+            border: none;
+            border-radius: 12px;
+            font-size: 1.2rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            width: 100%;
+        }
+
+        .start-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 24px -8px rgba(30, 64, 175, 0.4);
+        }
+
+        .start-btn:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        /* Cache Management Section */
+        .cache-management {
+            background: rgba(30, 64, 175, 0.05);
+            border: 1px solid rgba(30, 64, 175, 0.1);
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 25px;
+            text-align: center;
+        }
+
+        .cache-management h3 {
+            color: var(--primary);
+            margin-bottom: 15px;
+            font-size: 1.1rem;
+            font-weight: 600;
+        }
+
+        .cache-status-display {
+            background: rgba(5, 150, 105, 0.1);
+            border: 1px solid rgba(5, 150, 105, 0.2);
+            color: var(--success);
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+
+        .cache-status-display.no-cache {
+            background: rgba(100, 116, 139, 0.1);
+            border-color: rgba(100, 116, 139, 0.2);
+            color: var(--text-secondary);
+        }
+
+        .clear-cache-btn {
+            background: linear-gradient(135deg, var(--warning) 0%, #f59e0b 100%);
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .clear-cache-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 12px -4px rgba(234, 88, 12, 0.4);
+        }
+
+        .clear-cache-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        /* Cache Status Indicator */
+        .cache-status {
+            background: rgba(5, 150, 105, 0.1);
+            border: 1px solid rgba(5, 150, 105, 0.2);
+            color: var(--success);
+            padding: 8px 12px;
+            border-radius: 6px;
+            margin-bottom: 15px;
+            font-size: 0.85rem;
+            text-align: center;
+            font-weight: 500;
+            display: none;
+        }
+
+        .cache-status.cached {
+            display: block;
+        }
+
+        .cache-status.translating {
+            background: rgba(30, 64, 175, 0.1);
+            border-color: rgba(30, 64, 175, 0.2);
+            color: var(--primary);
+        }
+
+        /* Translation Loading Overlay */
+        .translation-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(30, 64, 175, 0.9);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 10000;
+            color: white;
+            text-align: center;
+        }
+
+        .translation-content {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 40px;
+            border-radius: 16px;
+            backdrop-filter: blur(10px);
+        }
+
+        .translation-spinner {
+            width: 50px;
+            height: 50px;
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+            margin: 0 auto 20px;
+        }
+
+        /* Main Application (Hidden Initially) */
+        .main-app {
+            display: none;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: var(--surface);
+            border-radius: 16px;
+            box-shadow: var(--shadow-lg);
+            overflow: hidden;
+            position: relative;
+        }
+
+        /* API Key Section - Static Position Top Left */
+        .api-key-section {
+            background: rgba(30, 64, 175, 0.05);
+            border: 1px solid rgba(30, 64, 175, 0.1);
+            border-radius: 8px;
+            padding: 12px;
+            margin: 15px;
+            max-width: 280px;
+        }
+
+        .api-key-section label {
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--primary);
+            margin-bottom: 6px;
+            display: block;
+        }
+
+        .api-key-section input {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            font-size: 14px;
+            background: var(--surface);
+            transition: all 0.2s ease;
+            font-family: 'Courier New', monospace;
+        }
+
+        .api-key-section input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
+        }
+
+        /* Language Switcher in Main App */
+        .language-switcher {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .language-switch-btn {
+            background: rgba(30, 64, 175, 0.05);
+            border: 1px solid rgba(30, 64, 175, 0.1);
+            border-radius: 8px;
+            padding: 8px 12px;
+            font-size: 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            color: var(--primary);
+            font-weight: 500;
+        }
+
+        .language-switch-btn:hover {
+            background: rgba(30, 64, 175, 0.1);
+        }
+
+        .mini-clear-cache {
+            background: rgba(234, 88, 12, 0.1);
+            border: 1px solid rgba(234, 88, 12, 0.2);
+            color: var(--warning);
+            padding: 6px 10px;
+            border-radius: 6px;
+            font-size: 11px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-weight: 500;
+        }
+
+        .mini-clear-cache:hover {
+            background: rgba(234, 88, 12, 0.2);
+        }
+
+        /* Main Content */
+        .main-content {
+            padding: 20px 30px 30px;
+        }
+
+        /* Header */
+        .header {
+            text-align: center;
+            margin-bottom: 25px;
+            padding-bottom: 20px;
+            border-bottom: 2px solid var(--border);
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 8px;
+        }
+
+        .header .subtitle {
+            font-size: 1.1rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .header .description {
+            font-size: 1rem;
+            color: var(--text-secondary);
+            margin-top: 12px;
+            max-width: 700px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        /* Progress Bar */
+        .progress-container {
+            background: rgba(30, 64, 175, 0.05);
+            border: 1px solid rgba(30, 64, 175, 0.1);
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 25px;
+        }
+
+        .progress-label {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: var(--primary);
+        }
+
+        .progress-bar-track {
+            width: 100%;
+            height: 8px;
+            background: var(--border);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .progress-bar-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            border-radius: 4px;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+
+        /* Section Containers */
+        .section {
+            background: var(--surface);
+            border-radius: 16px;
+            padding: 30px;
+            box-shadow: var(--shadow);
+            margin-bottom: 25px;
+            transition: all 0.3s ease;
+        }
+
+        .section:hover {
+            box-shadow: var(--shadow-lg);
+        }
+
+        .section-title {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary);
+            margin-bottom: 20px;
+            text-align: center;
+        }
+
+        /* Generate Button */
+        .generate-button {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            color: white;
+            padding: 18px 40px;
+            border: none;
+            border-radius: 12px;
+            font-size: 1.2rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: block;
+            margin: 30px auto;
+            min-width: 320px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .generate-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 24px -8px rgba(30, 64, 175, 0.4);
+        }
+
+        .generate-button:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        /* Loading Spinner */
+        .loading-spinner {
+            display: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+            margin-right: 8px;
+        }
+
+        [dir="rtl"] .loading-spinner {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Question Cards */
+        .questions-container {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .question-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 25px;
+            box-shadow: var(--shadow);
+            transition: all 0.3s ease;
+        }
+
+        .question-card:hover {
+            box-shadow: var(--shadow-lg);
+            border-color: var(--accent);
+        }
+
+        .question-number {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            color: white;
+            border-radius: 50%;
+            font-weight: 600;
+            font-size: 0.875rem;
+            margin-bottom: 15px;
+        }
+
+        .question-text {
+            font-size: 1.125rem;
+            font-weight: 500;
+            color: var(--text);
+            margin-bottom: 20px;
+            line-height: 1.5;
+        }
+
+        .options-container {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .option-item {
+            position: relative;
+        }
+
+        .option-input {
+            position: absolute;
+            opacity: 0;
+            cursor: pointer;
+        }
+
+        .option-label {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            background: var(--background);
+            font-weight: 500;
+        }
+
+        .option-label:hover {
+            border-color: var(--accent);
+            background: var(--surface);
+            box-shadow: var(--shadow);
+        }
+
+        .option-input:checked + .option-label {
+            border-color: var(--primary);
+            background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(124, 58, 237, 0.1));
+            box-shadow: var(--shadow);
+        }
+
+        .option-indicator {
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--border);
+            border-radius: 50%;
+            margin-right: 15px;
+            transition: all 0.2s ease;
+            position: relative;
+        }
+
+        [dir="rtl"] .option-indicator {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+
+        .option-input:checked + .option-label .option-indicator {
+            border-color: var(--primary);
+            background: var(--primary);
+        }
+
+        .option-input:checked + .option-label .option-indicator::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 8px;
+            height: 8px;
+            background: white;
+            border-radius: 50%;
+        }
+
+        .option-text {
+            flex: 1;
+            color: var(--text);
+        }
+
+        /* Action Buttons */
+        .action-buttons {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            margin-top: 30px;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 15px 30px;
+            font-size: 1rem;
+            font-weight: 600;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+        }
+
+        .btn-primary {
+            color: white;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            box-shadow: var(--shadow);
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .btn-secondary {
+            color: var(--primary);
+            background: var(--surface);
+            border: 2px solid var(--primary);
+        }
+
+        .btn-secondary:hover {
+            background: var(--primary);
+            color: white;
+        }
+
+        /* Results Section */
+        .results-container {
+            text-align: center;
+        }
+
+        .score-display {
+            background: linear-gradient(135deg, var(--success), #10b981);
+            color: white;
+            padding: 40px;
+            border-radius: 16px;
+            margin-bottom: 30px;
+            box-shadow: var(--shadow-lg);
+        }
+
+        .score-number {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+        }
+
+        .score-label {
+            font-size: 1.25rem;
+            opacity: 0.9;
+        }
+
+        .feedback-container {
+            text-align: left;
+            background: var(--background);
+            border-radius: 12px;
+            padding: 25px;
+            margin-bottom: 25px;
+        }
+
+        .feedback-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--text);
+            margin-bottom: 20px;
+        }
+
+        .feedback-item {
+            padding: 20px;
+            border-left: 4px solid var(--border);
+            margin-bottom: 20px;
+            background: var(--surface);
+            border-radius: 0 8px 8px 0;
+        }
+
+        [dir="rtl"] .feedback-item {
+            border-left: none;
+            border-right: 4px solid var(--border);
+            border-radius: 8px 0 0 8px;
+        }
+
+        .feedback-item.correct {
+            border-left-color: var(--success);
+        }
+
+        .feedback-item.incorrect {
+            border-left-color: var(--error);
+        }
+
+        [dir="rtl"] .feedback-item.correct {
+            border-right-color: var(--success);
+        }
+
+        [dir="rtl"] .feedback-item.incorrect {
+            border-right-color: var(--error);
+        }
+
+        .feedback-question {
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .feedback-answers {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            margin-bottom: 8px;
+        }
+
+        .feedback-explanation {
+            color: var(--text);
+            line-height: 1.5;
+        }
+
+        /* Error Messages */
+        .error-message {
+            background: rgba(220, 38, 38, 0.1);
+            border: 1px solid rgba(220, 38, 38, 0.2);
+            color: var(--error);
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin: 10px 0;
+            font-size: 0.9rem;
+            display: none;
+        }
+
+        /* Status Messages */
+        .status-message {
+            background: rgba(30, 64, 175, 0.1);
+            border: 1px solid rgba(30, 64, 175, 0.2);
+            color: var(--primary);
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin: 10px 0;
+            font-size: 0.9rem;
+            text-align: center;
+            font-weight: 500;
+            display: none;
+        }
+
+        /* Hidden sections */
+        .hidden {
+            display: none !important;
+        }
+
+        /* Footer */
+        .footer {
+            text-align: center;
+            padding: 20px;
+            background: rgba(30, 64, 175, 0.05);
+            border-top: 1px solid var(--border);
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+
+            .language-landing {
+                margin: 20px auto;
+                padding: 30px 20px;
+            }
+
+            .api-key-section {
+                margin: 10px;
+                max-width: none;
+            }
+
+            .language-switcher {
+                position: relative;
+                top: auto;
+                right: auto;
+                margin-bottom: 15px;
+                justify-content: center;
+            }
+
+            .main-content {
+                padding: 15px 20px 20px;
+            }
+
+            .header h1 {
+                font-size: 2rem;
+            }
+
+            .section {
+                padding: 20px 15px;
+            }
+
+            .action-buttons {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .generate-button {
+                width: 100%;
+                margin: 25px 0;
+                padding: 16px 32px;
+                font-size: 1.1rem;
+            }
+
+            .score-number {
+                font-size: 2.5rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .language-landing h1 {
+                font-size: 2rem;
+            }
+
+            .header h1 {
+                font-size: 1.8rem;
+            }
+        }
+
+        /* Dark mode support */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background: #0f172a;
+                --surface: #1e293b;
+                --text: #f1f5f9;
+                --text-secondary: #94a3b8;
+                --border: #334155;
+            }
+
+            body {
+                background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Translation Loading Overlay -->
+    <div class="translation-overlay" id="translationOverlay">
+        <div class="translation-content">
+            <div class="translation-spinner"></div>
+            <h2 id="translationTitle">Translating Interface...</h2>
+            <p id="translationMessage">Please wait while we translate the interface to your selected language.</p>
+        </div>
+    </div>
+
+    <!-- Language Selection Landing Page -->
+    <div class="language-landing" id="languageLanding">
+        <h1 data-translate="app_title">EthicsGuard Pro</h1>
+        <p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started with AI ethics assessment.</p>
+        
+        <!-- Cache Status Indicator -->
+        <div class="cache-status" id="cacheStatus">
+            💾 Translations cached - instant loading!
+        </div>
+
+        <!-- Cache Management Section -->
+        <div class="cache-management" id="cacheManagement">
+            <h3 data-translate="cache_management_title">🗂️ Translation Cache Management</h3>
+            <div class="cache-status-display" id="cacheStatusDisplay">
+                <span data-translate="cache_status_checking">Checking cache status...</span>
+            </div>
+            <button class="clear-cache-btn" id="clearCacheBtn" data-translate="clear_cache_button">
+                🗑️ Clear All Cached Translations
+            </button>
+        </div>
+        
+        <div class="language-selector">
+            <label for="languageSelect" data-translate="select_language">🌐 Select Language</label>
+            <select id="languageSelect">
+                <option value="en">🇺🇸 English</option>
+                <option value="es">🇪🇸 Español (Spanish)</option>
+                <option value="fr">🇫🇷 Français (French)</option>
+                <option value="de">🇩🇪 Deutsch (German)</option>
+                <option value="zh">🇨🇳 中文 (Chinese)</option>
+                <option value="ja">🇯🇵 日本語 (Japanese)</option>
+                <option value="ko">🇰🇷 한국어 (Korean)</option>
+                <option value="pt">🇵🇹 Português (Portuguese)</option>
+                <option value="it">🇮🇹 Italiano (Italian)</option>
+                <option value="ar">🇸🇦 العربية (Arabic)</option>
+                <option value="ru">🇷🇺 Русский (Russian)</option>
+                <option value="hi">🇮🇳 हिन्दी (Hindi)</option>
+                <option value="bn">🇧🇩 বাংলা (Bengali)</option>
+                <option value="ur">🇵🇰 اردو (Urdu)</option>
+                <option value="tr">🇹🇷 Türkçe (Turkish)</option>
+                <option value="pl">🇵🇱 Polski (Polish)</option>
+                <option value="nl">🇳🇱 Nederlands (Dutch)</option>
+                <option value="sv">🇸🇪 Svenska (Swedish)</option>
+                <option value="da">🇩🇰 Dansk (Danish)</option>
+                <option value="no">🇳🇴 Norsk (Norwegian)</option>
+                <option value="fi">🇫🇮 Suomi (Finnish)</option>
+                <option value="is">🇮🇸 Íslenska (Icelandic)</option>
+                <option value="cs">🇨🇿 Čeština (Czech)</option>
+                <option value="sk">🇸🇰 Slovenčina (Slovak)</option>
+                <option value="hu">🇭🇺 Magyar (Hungarian)</option>
+                <option value="ro">🇷🇴 Română (Romanian)</option>
+                <option value="bg">🇧🇬 Български (Bulgarian)</option>
+                <option value="hr">🇭🇷 Hrvatski (Croatian)</option>
+                <option value="sr">🇷🇸 Српски (Serbian)</option>
+                <option value="sl">🇸🇮 Slovenščina (Slovenian)</option>
+                <option value="mk">🇲🇰 Македонски (Macedonian)</option>
+                <option value="sq">🇦🇱 Shqip (Albanian)</option>
+                <option value="lv">🇱🇻 Latviešu (Latvian)</option>
+                <option value="lt">🇱🇹 Lietuvių (Lithuanian)</option>
+                <option value="et">🇪🇪 Eesti (Estonian)</option>
+                <option value="mt">🇲🇹 Malti (Maltese)</option>
+                <option value="ga">🇮🇪 Gaeilge (Irish)</option>
+                <option value="cy">🏴󠁧󠁢󠁷󠁬󠁳󠁿 Cymraeg (Welsh)</option>
+                <option value="eu">🏴󠁥󠁳󠁰󠁶󠁿 Euskera (Basque)</option>
+                <option value="ca">🏴󠁥󠁳󠁣󠁴󠁿 Català (Catalan)</option>
+                <option value="gl">🏴󠁥󠁳󠁧󠁡󠁿 Galego (Galician)</option>
+                <option value="el">🇬🇷 Ελληνικά (Greek)</option>
+                <option value="he">🇮🇱 עברית (Hebrew)</option>
+                <option value="fa">🇮🇷 فارسی (Persian)</option>
+                <option value="ps">🇦🇫 پښتو (Pashto)</option>
+                <option value="ku">🏴󠁩󠁱󠁫󠁲󠁿 کوردی (Kurdish)</option>
+                <option value="az">🇦🇿 Azərbaycan (Azerbaijani)</option>
+                <option value="kk">🇰🇿 Қазақша (Kazakh)</option>
+                <option value="ky">🇰🇬 Кыргызча (Kyrgyz)</option>
+                <option value="uz">🇺🇿 O'zbek (Uzbek)</option>
+                <option value="tk">🇹🇲 Türkmen (Turkmen)</option>
+                <option value="tg">🇹🇯 Тоҷикӣ (Tajik)</option>
+                <option value="mn">🇲🇳 Монгол (Mongolian)</option>
+                <option value="ka">🇬🇪 ��ართული (Georgian)</option>
+                <option value="hy">🇦🇲 Հայերեն (Armenian)</option>
+                <option value="th">🇹🇭 ไทย (Thai)</option>
+                <option value="vi">🇻🇳 Tiếng Việt (Vietnamese)</option>
+                <option value="lo">🇱🇦 ລາວ (Lao)</option>
+                <option value="km">🇰🇭 ខ្មែរ (Khmer)</option>
+                <option value="my">🇲🇲 မြန်မာ (Myanmar)</option>
+                <option value="si">🇱🇰 සිංහල (Sinhala)</option>
+                <option value="ta">🇱🇰 தமிழ் (Tamil)</option>
+                <option value="te">🇮🇳 తెలుగు (Telugu)</option>
+                <option value="kn">🇮🇳 ಕನ್ನಡ (Kannada)</option>
+                <option value="ml">🇮🇳 മലയാളം (Malayalam)</option>
+                <option value="gu">🇮🇳 ગુજરાતી (Gujarati)</option>
+                <option value="pa">🇮🇳 ਪੰਜਾਬੀ (Punjabi)</option>
+                <option value="or">🇮🇳 ଓଡ଼ିଆ (Odia)</option>
+                <option value="as">🇮🇳 অসমীয়া (Assamese)</option>
+                <option value="ne">🇳🇵 नेपाली (Nepali)</option>
+                <option value="dz">🇧🇹 རྫོང་ཁ (Dzongkha)</option>
+                <option value="bo">🏔️ བོད་ཡིག (Tibetan)</option>
+                <option value="id">🇮🇩 Bahasa Indonesia</option>
+                <option value="ms">🇲🇾 Bahasa Melayu (Malay)</option>
+                <option value="tl">🇵🇭 Filipino (Tagalog)</option>
+                <option value="ceb">🇵🇭 Cebuano</option>
+                <option value="haw">🏝️ ʻŌlelo Hawaiʻi (Hawaiian)</option>
+                <option value="mi">🇳🇿 Te Reo Māori (Maori)</option>
+                <option value="sm">🇼🇸 Gagana Samoa (Samoan)</option>
+                <option value="to">🇹🇴 Lea Fakatonga (Tongan)</option>
+                <option value="fj">🇫🇯 Na Vosa Vakaviti (Fijian)</option>
+                <option value="mg">🇲🇬 Malagasy</option>
+                <option value="sw">🇰🇪 Kiswahili (Swahili)</option>
+                <option value="zu">🇿🇦 isiZulu (Zulu)</option>
+                <option value="xh">🇿🇦 isiXhosa (Xhosa)</option>
+                <option value="af">🇿🇦 Afrikaans</option>
+                <option value="st">🇱🇸 Sesotho (Southern Sotho)</option>
+                <option value="tn">🇧🇼 Setswana (Tswana)</option>
+                <option value="ss">🇸🇿 siSwati (Swati)</option>
+                <option value="ve">🇿🇦 Tshivenḓa (Venda)</option>
+                <option value="ts">🇿🇦 Xitsonga (Tsonga)</option>
+                <option value="nr">🇿🇦 isiNdebele (Southern Ndebele)</option>
+                <option value="am">🇪🇹 አማርኛ (Amharic)</option>
+                <option value="ti">🇪🇷 ትግርኛ (Tigrinya)</option>
+                <option value="om">🇪🇹 Afaan Oromoo (Oromo)</option>
+                <option value="so">🇸🇴 Soomaali (Somali)</option>
+                <option value="ha">🇳🇬 Hausa</option>
+                <option value="yo">🇳🇬 Yorùbá (Yoruba)</option>
+                <option value="ig">🇳🇬 Igbo</option>
+                <option value="ff">🇸🇳 Fulfulde (Fulani)</option>
+                <option value="wo">🇸🇳 Wolof</option>
+                <option value="bm">🇲🇱 Bamanankan (Bambara)</option>
+                <option value="rn">🇧🇮 Kirundi (Rundi)</option>
+                <option value="rw">🇷🇼 Kinyarwanda (Rwanda)</option>
+                <option value="lg">🇺🇬 Luganda</option>
+                <option value="ny">🇲🇼 Chichewa (Nyanja)</option>
+                <option value="sn">🇿🇼 chiShona (Shona)</option>
+                <option value="nd">🇿🇼 isiNdebele (Northern Ndebele)</option>
+            </select>
+        </div>
+
+        <div class="api-key-landing">
+            <label for="apiKeyLanding" data-translate="api_key_label">🔑 OpenAI API Key</label>
+            <input type="password" id="apiKeyLanding" placeholder="Enter your OpenAI API key" data-translate-placeholder="api_key_placeholder">
+        </div>
+
+        <button class="start-btn" id="startBtn" data-translate="start_button">🚀 Start Ethics Assessment</button>
+    </div>
+
+    <!-- Main Application -->
+    <div class="main-app" id="mainApp">
+        <div class="container">
+            <!-- Language Switcher -->
+            <div class="language-switcher" id="languageSwitcher">
+                <div class="language-switch-btn" onclick="showLanguageLanding()">
+                    <span data-translate="change_language">🌐 Change Language</span>
+                </div>
+                <div class="mini-clear-cache" onclick="clearAllTranslationCache()" title="Clear translation cache">
+                    <span data-translate="clear_cache_mini">🗑️ Clear Cache</span>
+                </div>
+            </div>
+
+            <!-- API Key Section - Static Position Top Left -->
+            <div class="api-key-section">
+                <label for="apiKey" data-translate="api_key_short">🔑 API Key</label>
+                <input type="password" id="apiKey" data-translate-placeholder="api_key_placeholder" autocomplete="off">
+            </div>
+
+            <div class="main-content">
+                <!-- Header -->
+                <div class="header">
+                    <h1 data-translate="app_title">EthicsGuard Pro</h1>
+                    <p class="subtitle" data-translate="app_subtitle">AI Education Ethics Assessment Platform</p>
+                    <p class="description" data-translate="app_description">Test your knowledge of ethical considerations when using AI in educational settings with personalized assessments and detailed feedback</p>
+                </div>
+
+                <!-- Progress Bar -->
+                <div class="progress-container">
+                    <div class="progress-label">
+                        <span data-translate="test_progress">Test Progress</span>
+                        <span id="progressText">0%</span>
+                    </div>
+                    <div class="progress-bar-track">
+                        <div class="progress-bar-fill" id="progressBar"></div>
+                    </div>
+                </div>
+
+                <!-- Section: Test Setup -->
+                <section id="testSetup" class="section">
+                    <h2 class="section-title" data-translate="generate_test_title">Generate Your Ethics Test</h2>
+                    <p style="margin-bottom: 2rem; color: var(--text-secondary); text-align: center;" data-translate="generate_test_description">
+                        Click the button below to generate a personalized 10-question multiple-choice test on AI in Education Ethics.
+                    </p>
+                    <button id="generateTestBtn" class="generate-button">
+                        <span class="loading-spinner" id="loadingSpinner"></span>
+                        <span class="button-text" data-translate="generate_test_button">🧠 Generate Test</span>
+                    </button>
+                </section>
+
+                <!-- Section: Test Questions -->
+                <section id="testSection" class="section hidden">
+                    <h2 class="section-title" data-translate="test_questions_title">Test Questions</h2>
+                    <form id="testForm">
+                        <div id="questionsContainer" class="questions-container"></div>
+                        <div class="action-buttons">
+                            <button type="submit" class="btn btn-primary" data-translate="submit_test_button">📝 Submit Test</button>
+                            <button type="button" id="newTestBtn" class="btn btn-secondary" data-translate="new_test_button">🔄 New Test</button>
+                        </div>
+                    </form>
+                </section>
+
+                <!-- Section: Test Results -->
+                <section id="resultsSection" class="section hidden">
+                    <h2 class="section-title" data-translate="test_results_title">Test Results</h2>
+                    <div class="results-container">
+                        <div class="score-display">
+                            <div class="score-number" id="scoreNumber">0</div>
+                            <div class="score-label" data-translate="score_label">out of 10 questions correct</div>
+                        </div>
+                        
+                        <div class="feedback-container">
+                            <h3 class="feedback-title" data-translate="feedback_title">📋 Detailed Feedback</h3>
+                            <div id="feedbackContent"></div>
+                        </div>
+                        
+                        <div class="action-buttons">
+                            <button id="newTestBtn2" class="btn btn-primary" data-translate="generate_new_test_button">🔄 Generate New Test</button>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Error and Status Messages -->
+                <div class="error-message" id="errorMessage"></div>
+                <div class="status-message" id="statusMessage"></div>
+            </div>
+
+            <!-- Footer -->
+            <div class="footer">
+                Created by Shift Mind AI Labs
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // RTL languages list
+        const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'ku'];
+
+        // Current language and API key
+        let currentLanguage = 'en';
+        let currentApiKey = '';
+
+        // Language names mapping
+        const languageNames = {
+            en: 'English', es: 'Spanish', fr: 'French', de: 'German', zh: 'Chinese',
+            ja: 'Japanese', ko: 'Korean', pt: 'Portuguese', it: 'Italian', ar: 'Arabic',
+            ru: 'Russian', hi: 'Hindi', bn: 'Bengali', ur: 'Urdu', tr: 'Turkish',
+            pl: 'Polish', nl: 'Dutch', sv: 'Swedish', da: 'Danish', no: 'Norwegian',
+            fi: 'Finnish', is: 'Icelandic', cs: 'Czech', sk: 'Slovak', hu: 'Hungarian',
+            ro: 'Romanian', bg: 'Bulgarian', hr: 'Croatian', sr: 'Serbian', sl: 'Slovenian',
+            mk: 'Macedonian', sq: 'Albanian', lv: 'Latvian', lt: 'Lithuanian', et: 'Estonian',
+            mt: 'Maltese', ga: 'Irish', cy: 'Welsh', eu: 'Basque', ca: 'Catalan',
+            gl: 'Galician', el: 'Greek', he: 'Hebrew', fa: 'Persian', ps: 'Pashto',
+            ku: 'Kurdish', az: 'Azerbaijani', kk: 'Kazakh', ky: 'Kyrgyz', uz: 'Uzbek',
+            tk: 'Turkmen', tg: 'Tajik', mn: 'Mongolian', ka: 'Georgian', hy: 'Armenian',
+            th: 'Thai', vi: 'Vietnamese', lo: 'Lao', km: 'Khmer', my: 'Myanmar',
+            si: 'Sinhala', ta: 'Tamil', te: 'Telugu', kn: 'Kannada', ml: 'Malayalam',
+            gu: 'Gujarati', pa: 'Punjabi', or: 'Odia', as: 'Assamese', ne: 'Nepali',
+            dz: 'Dzongkha', bo: 'Tibetan', id: 'Indonesian', ms: 'Malay', tl: 'Filipino',
+            ceb: 'Cebuano', haw: 'Hawaiian', mi: 'Maori', sm: 'Samoan', to: 'Tongan',
+            fj: 'Fijian', mg: 'Malagasy', sw: 'Swahili', zu: 'Zulu', xh: 'Xhosa',
+            af: 'Afrikaans', st: 'Southern Sotho', tn: 'Tswana', ss: 'Swati', ve: 'Venda',
+            ts: 'Tsonga', nr: 'Southern Ndebele', am: 'Amharic', ti: 'Tigrinya', om: 'Oromo',
+            so: 'Somali', ha: 'Hausa', yo: 'Yoruba', ig: 'Igbo', ff: 'Fulani',
+            wo: 'Wolof', bm: 'Bambara', rn: 'Rundi', rw: 'Rwanda', lg: 'Luganda',
+            ny: 'Chichewa', sn: 'Shona', nd: 'Northern Ndebele'
+        };
+
+        // Translation cache management
+        const CACHE_PREFIX = 'ethicsguard_translations_';
+        const CACHE_VERSION = '1.0';
+
+        // App Configuration
+        const AppConfig = {
+            API_BASE_URL: 'https://api.openai.com/v1/chat/completions',
+            MODEL: 'gpt-4o-mini',
+            MAX_TOKENS: 1500,
+            TEMPERATURE: 0.5
+        };
+
+        // App State Management
+        const AppState = {
+            testData: null,
+            isLoading: false,
+            currentSection: 'setup',
+
+            setLoading(loading) {
+                this.isLoading = loading;
+                UIController.updateLoadingState(loading);
+            }
+        };
+
+        // Check if translations are cached for a language
+        function isLanguageCached(language) {
+            const cacheKey = CACHE_PREFIX + language;
+            const cached = localStorage.getItem(cacheKey);
+            return cached !== null;
+        }
+
+        // Save translations to cache
+        function saveTranslationsToCache(language, translations) {
+            const cacheKey = CACHE_PREFIX + language;
+            const cacheData = {
+                version: CACHE_VERSION,
+                timestamp: Date.now(),
+                translations: translations
+            };
+            localStorage.setItem(cacheKey, JSON.stringify(cacheData));
+            console.log(`Translations cached for ${language}`);
+        }
+
+        // Load translations from cache
+        function loadTranslationsFromCache(language) {
+            const cacheKey = CACHE_PREFIX + language;
+            const cached = localStorage.getItem(cacheKey);
+            
+            if (cached) {
+                try {
+                    const cacheData = JSON.parse(cached);
+                    if (cacheData.version === CACHE_VERSION) {
+                        console.log(`Translations loaded from cache for ${language}`);
+                        return cacheData.translations;
+                    }
+                } catch (error) {
+                    console.error('Error parsing cached translations:', error);
+                }
+            }
+            return null;
+        }
+
+        // Get all cached languages
+        function getCachedLanguages() {
+            const cachedLanguages = [];
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                if (key && key.startsWith(CACHE_PREFIX)) {
+                    const language = key.replace(CACHE_PREFIX, '');
+                    cachedLanguages.push(language);
+                }
+            }
+            return cachedLanguages;
+        }
+
+        // Clear all translation cache
+        function clearAllTranslationCache() {
+            const cachedLanguages = getCachedLanguages();
+            
+            if (cachedLanguages.length === 0) {
+                alert('No cached translations to clear.');
+                return;
+            }
+
+            const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', ');
+            const confirmMessage = `Are you sure you want to clear all cached translations?\n\nCached languages: ${languageList}\n\nThis will require re-downloading translations when switching languages.`;
+            
+            if (confirm(confirmMessage)) {
+                // Clear all translation caches
+                cachedLanguages.forEach(language => {
+                    const cacheKey = CACHE_PREFIX + language;
+                    localStorage.removeItem(cacheKey);
+                });
+                
+                // Update cache status
+                updateCacheStatus(currentLanguage);
+                updateCacheStatusDisplay();
+                
+                alert(`Cache cleared successfully!\n\n${cachedLanguages.length} language(s) removed from cache.`);
+                
+                // Ask if user wants to reload current language translations
+                if (currentLanguage !== 'en' && cachedLanguages.includes(currentLanguage)) {
+                    if (confirm('Would you like to reload the current language translations?')) {
+                        applyLanguage(currentLanguage);
+                    }
+                }
+            }
+        }
+
+        // Update cache status indicator
+        function updateCacheStatus(language) {
+            const cacheStatus = document.getElementById('cacheStatus');
+            const isCached = isLanguageCached(language);
+            
+            if (language === 'en') {
+                cacheStatus.classList.remove('cached', 'translating');
+                return;
+            }
+            
+            if (isCached) {
+                cacheStatus.textContent = '💾 Translations cached - instant loading!';
+                cacheStatus.classList.add('cached');
+                cacheStatus.classList.remove('translating');
+            } else {
+                cacheStatus.textContent = '🔄 First time translation - will be cached for future use';
+                cacheStatus.classList.add('translating');
+                cacheStatus.classList.remove('cached');
+            }
+        }
+
+        // Update cache status display in management section
+        function updateCacheStatusDisplay() {
+            const cacheStatusDisplay = document.getElementById('cacheStatusDisplay');
+            const clearCacheBtn = document.getElementById('clearCacheBtn');
+            const cachedLanguages = getCachedLanguages();
+            
+            if (cachedLanguages.length === 0) {
+                cacheStatusDisplay.textContent = '📭 No cached translations';
+                cacheStatusDisplay.className = 'cache-status-display no-cache';
+                clearCacheBtn.disabled = true;
+            } else {
+                const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', ');
+                cacheStatusDisplay.textContent = `💾 ${cachedLanguages.length} language(s) cached: ${languageList}`;
+                cacheStatusDisplay.className = 'cache-status-display';
+                clearCacheBtn.disabled = false;
+            }
+        }
+
+        // Initialize the application
+        function initializeApp() {
+            // Load saved language and API key
+            const savedLanguage = localStorage.getItem('ethicsguard_language') || 'en';
+            const savedApiKey = localStorage.getItem('ethicsguard_api_key') || '';
+            
+            currentLanguage = savedLanguage;
+            currentApiKey = savedApiKey;
+            
+            // Set language selector
+            document.getElementById('languageSelect').value = currentLanguage;
+            document.getElementById('apiKeyLanding').value = currentApiKey;
+            
+            // Apply direction for current language
+            applyDirection(currentLanguage);
+            
+            // Update cache status
+            updateCacheStatus(currentLanguage);
+            updateCacheStatusDisplay();
+            
+            // Show appropriate screen
+            if (currentApiKey && currentLanguage) {
+                showMainApp();
+            } else {
+                showLanguageLanding();
+            }
+        }
+
+        // Apply language direction
+        function applyDirection(language) {
+            currentLanguage = language;
+            
+            // Set document language and direction
+            document.documentElement.lang = language;
+            document.documentElement.dir = rtlLanguages.includes(language) ? 'rtl' : 'ltr';
+            
+            // Save language preference
+            localStorage.setItem('ethicsguard_language', language);
+            
+            // Update cache status
+            updateCacheStatus(language);
+        }
+
+        // API call function for translation
+        async function translateText(text, targetLanguage) {
+            if (!currentApiKey) {
+                throw new Error('API key is required for translation');
+            }
+
+            const languageName = languageNames[targetLanguage] || 'English';
+            
+            const prompt = `Translate the following text to ${languageName}. Provide ONLY the exact translation without any explanations, additional information, or formatting:
+
+"${text}"`;
+
+            const payload = {
+                model: "gpt-4o-mini",
+                messages: [{ role: "user", content: prompt }],
+                max_tokens: 500,
+                temperature: 0.1
+            };
+
+            const response = await fetch("https://api.openai.com/v1/chat/completions", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${currentApiKey}`
+                },
+                body: JSON.stringify(payload)
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error?.message || "Translation API request failed");
+            }
+
+            const data = await response.json();
+            return data.choices[0].message.content.trim();
+        }
+
+        // Apply cached translations to UI
+        function applyCachedTranslations(translations) {
+            // Apply text translations
+            Object.keys(translations.texts).forEach(originalText => {
+                const translation = translations.texts[originalText];
+                const elements = document.querySelectorAll(`[data-translate]`);
+                
+                elements.forEach(element => {
+                    const originalElementText = element.getAttribute('data-original-text') || element.textContent;
+                    if (originalElementText === originalText) {
+                        element.textContent = translation;
+                    }
+                });
+            });
+
+            // Apply placeholder translations
+            Object.keys(translations.placeholders).forEach(originalPlaceholder => {
+                const translation = translations.placeholders[originalPlaceholder];
+                const elements = document.querySelectorAll(`[data-translate-placeholder]`);
+                
+                elements.forEach(element => {
+                    const originalElementPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder;
+                    if (originalElementPlaceholder === originalPlaceholder) {
+                        element.placeholder = translation;
+                    }
+                });
+            });
+        }
+
+        // Translate all UI elements
+        async function translateInterface(targetLanguage) {
+            if (targetLanguage === 'en') {
+                return;
+            }
+
+            // Check if translations are cached
+            const cachedTranslations = loadTranslationsFromCache(targetLanguage);
+            if (cachedTranslations) {
+                console.log('Using cached translations for', targetLanguage);
+                applyCachedTranslations(cachedTranslations);
+                return;
+            }
+
+            // Need to translate via API
+            showTranslationOverlay();
+
+            try {
+                // Get all elements with data-translate attribute
+                const elements = document.querySelectorAll('[data-translate]');
+                const placeholderElements = document.querySelectorAll('[data-translate-placeholder]');
+                
+                // Collect all texts to translate
+                const textsToTranslate = [];
+                const placeholdersToTranslate = [];
+                const elementMap = new Map();
+                
+                elements.forEach(element => {
+                    const originalText = element.getAttribute('data-original-text') || element.textContent;
+                    if (!element.getAttribute('data-original-text')) {
+                        element.setAttribute('data-original-text', originalText);
+                    }
+                    textsToTranslate.push(originalText);
+                    elementMap.set(originalText, element);
+                });
+
+                placeholderElements.forEach(element => {
+                    const originalPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder;
+                    if (!element.getAttribute('data-original-placeholder')) {
+                        element.setAttribute('data-original-placeholder', originalPlaceholder);
+                    }
+                    placeholdersToTranslate.push(originalPlaceholder);
+                    elementMap.set(originalPlaceholder, element);
+                });
+
+                // Prepare cache structure
+                const translationsCache = {
+                    texts: {},
+                    placeholders: {}
+                };
+
+                // Translate texts in batches
+                const batchSize = 10;
+                const allTexts = [...textsToTranslate, ...placeholdersToTranslate];
+                
+                for (let i = 0; i < allTexts.length; i += batchSize) {
+                    const batch = allTexts.slice(i, i + batchSize);
+                    
+                    // Update progress
+                    updateTranslationProgress(i, allTexts.length);
+                    
+                    // Translate batch
+                    const translations = await Promise.all(
+                        batch.map(text => translateText(text, targetLanguage))
+                    );
+                    
+                    // Apply translations and cache them
+                    batch.forEach((originalText, index) => {
+                        const element = elementMap.get(originalText);
+                        const translation = translations[index];
+                        
+                        if (element.hasAttribute('data-translate')) {
+                            element.textContent = translation;
+                            translationsCache.texts[originalText] = translation;
+                        } else if (element.hasAttribute('data-translate-placeholder')) {
+                            element.placeholder = translation;
+                            translationsCache.placeholders[originalText] = translation;
+                        }
+                    });
+                }
+
+                // Save translations to cache
+                saveTranslationsToCache(targetLanguage, translationsCache);
+                
+                // Update cache status
+                updateCacheStatus(targetLanguage);
+                updateCacheStatusDisplay();
+
+            } catch (error) {
+                console.error('Translation error:', error);
+                showError('Translation failed: ' + error.message);
+            } finally {
+                hideTranslationOverlay();
+            }
+        }
+
+        // Show translation overlay
+        function showTranslationOverlay() {
+            document.getElementById('translationOverlay').style.display = 'flex';
+        }
+
+        // Hide translation overlay
+        function hideTranslationOverlay() {
+            document.getElementById('translationOverlay').style.display = 'none';
+        }
+
+        // Update translation progress
+        function updateTranslationProgress(current, total) {
+            const percentage = Math.round((current / total) * 100);
+            document.getElementById('translationMessage').textContent = 
+                `Translating interface... ${percentage}% complete (will be cached for future use)`;
+        }
+
+        // Apply language with API translation or cache
+        async function applyLanguage(language) {
+            applyDirection(language);
+            
+            if (language !== 'en') {
+                await translateInterface(language);
+            }
+        }
+
+        // Show language landing page
+        function showLanguageLanding() {
+            document.getElementById('languageLanding').style.display = 'block';
+            document.getElementById('mainApp').style.display = 'none';
+        }
+
+        // Show main application
+        function showMainApp() {
+            document.getElementById('languageLanding').style.display = 'none';
+            document.getElementById('mainApp').style.display = 'block';
+            
+            // Set API key in main app
+            document.getElementById('apiKey').value = currentApiKey;
+        }
+
+        // Show error message
+        function showError(message) {
+            const errorDiv = document.getElementById('errorMessage');
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
+            setTimeout(() => {
+                errorDiv.style.display = 'none';
+            }, 5000);
+        }
+
+        // API Service Module
+        const APIService = {
+            async callOpenAI(prompt, apiKey) {
+                const languageName = languageNames[currentLanguage] || 'English';
+                
+                // Modify prompt to include language instruction
+                const languagePrompt = currentLanguage !== 'en' 
+                    ? `\n\nIMPORTANT: Generate all content (questions, options, feedback) in ${languageName} language.`
+                    : '';
+
+                const payload = {
+                    model: AppConfig.MODEL,
+                    messages: [{ role: 'system', content: prompt + languagePrompt }],
+                    max_tokens: AppConfig.MAX_TOKENS,
+                    temperature: AppConfig.TEMPERATURE
+                };
+
+                const response = await fetch(AppConfig.API_BASE_URL, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${apiKey}`
+                    },
+                    body: JSON.stringify(payload)
+                });
+
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error?.message || `HTTP ${response.status}: ${response.statusText}`);
+                }
+
+                const data = await response.json();
+                return data.choices[0].message.content;
+            }
+        };
+
+        // Utility Functions
+        const Utils = {
+            extractJSON(rawText, startMarker, endMarker) {
+                const startIndex = rawText.indexOf(startMarker);
+                const endIndex = rawText.indexOf(endMarker, startIndex);
+                if (startIndex !== -1 && endIndex !== -1) {
+                    return rawText.substring(startIndex + startMarker.length, endIndex).trim();
+                }
+                return rawText;
+            },
+
+            updateProgress(percent) {
+                const progressBar = document.getElementById('progressBar');
+                const progressText = document.getElementById('progressText');
+                progressBar.style.width = percent + '%';
+                progressText.textContent = percent + '%';
+            }
+        };
+
+        // UI Controller Module
+        const UIController = {
+            elements: {},
+
+            init() {
+                this.elements = {
+                    apiKeyInput: document.getElementById('apiKey'),
+                    generateBtn: document.getElementById('generateTestBtn'),
+                    loadingSpinner: document.getElementById('loadingSpinner'),
+                    buttonText: document.querySelector('.button-text'),
+                    testSetup: document.getElementById('testSetup'),
+                    testSection: document.getElementById('testSection'),
+                    resultsSection: document.getElementById('resultsSection'),
+                    questionsContainer: document.getElementById('questionsContainer'),
+                    testForm: document.getElementById('testForm'),
+                    scoreNumber: document.getElementById('scoreNumber'),
+                    feedbackContent: document.getElementById('feedbackContent'),
+                    newTestBtn: document.getElementById('newTestBtn'),
+                    newTestBtn2: document.getElementById('newTestBtn2')
+                };
+
+                this.setupEventListeners();
+            },
+
+            setupEventListeners() {
+                this.elements.generateBtn.addEventListener('click', () => {
+                    App.generateTest();
+                });
+
+                this.elements.testForm.addEventListener('submit', (e) => {
+                    e.preventDefault();
+                    App.submitTest();
+                });
+
+                this.elements.newTestBtn.addEventListener('click', () => {
+                    App.resetToSetup();
+                });
+
+                this.elements.newTestBtn2.addEventListener('click', () => {
+                    App.resetToSetup();
+                });
+            },
+
+            updateLoadingState(isLoading) {
+                if (isLoading) {
+                    this.elements.generateBtn.disabled = true;
+                    this.elements.buttonText.style.opacity = '0';
+                    this.elements.loadingSpinner.style.display = 'block';
+                } else {
+                    this.elements.generateBtn.disabled = false;
+                    this.elements.buttonText.style.opacity = '1';
+                    this.elements.loadingSpinner.style.display = 'none';
+                }
+            },
+
+            showSection(sectionName) {
+                // Hide all sections
+                this.elements.testSetup.classList.add('hidden');
+                this.elements.testSection.classList.add('hidden');
+                this.elements.resultsSection.classList.add('hidden');
+
+                // Show target section
+                switch (sectionName) {
+                    case 'setup':
+                        this.elements.testSetup.classList.remove('hidden');
+                        break;
+                    case 'test':
+                        this.elements.testSection.classList.remove('hidden');
+                        break;
+                    case 'results':
+                        this.elements.resultsSection.classList.remove('hidden');
+                        break;
+                }
+
+                AppState.currentSection = sectionName;
+            },
+
+            displayTest(testData) {
+                this.elements.questionsContainer.innerHTML = '';
+                
+                testData.questions.forEach((question, index) => {
+                    const questionNumber = index + 1;
+                    const questionCard = this.createQuestionCard(question, questionNumber);
+                    this.elements.questionsContainer.appendChild(questionCard);
+                });
+
+                this.showSection('test');
+                Utils.updateProgress(100);
+            },
+
+            createQuestionCard(question, questionNumber) {
+                const card = document.createElement('div');
+                card.className = 'question-card';
+                
+                card.innerHTML = `
+                    <div class="question-number">${questionNumber}</div>
+                    <div class="question-text">${question.question}</div>
+                    <div class="options-container">
+                        ${Object.entries(question.options).map(([key, value]) => `
+                            <div class="option-item">
+                                <input type="radio" id="q${questionNumber}_${key}" name="question${questionNumber}" value="${key}" class="option-input">
+                                <label for="q${questionNumber}_${key}" class="option-label">
+                                    <div class="option-indicator"></div>
+                                    <div class="option-text"><strong>${key}.</strong> ${value}</div>
+                                </label>
+                            </div>
+                        `).join('')}
+                    </div>
+                `;
+
+                return card;
+            },
+
+            displayResults(gradingResult) {
+                this.elements.scoreNumber.textContent = gradingResult.score;
+                
+                let feedbackHTML = '';
+                gradingResult.results.forEach(item => {
+                    const isCorrect = item.userAnswer === item.correctAnswer;
+                    feedbackHTML += `
+                        <div class="feedback-item ${isCorrect ? 'correct' : 'incorrect'}">
+                            <div class="feedback-question">Question ${item.questionNumber}</div>
+                            <div class="feedback-answers">
+                                Your answer: <strong>${item.userAnswer || 'Not answered'}</strong> | 
+                                Correct answer: <strong>${item.correctAnswer}</strong>
+                            </div>
+                            <div class="feedback-explanation">${item.feedback}</div>
+                        </div>
+                    `;
+                });
+                
+                this.elements.feedbackContent.innerHTML = feedbackHTML;
+                this.showSection('results');
+            },
+
+            showError(message) {
+                const errorDiv = document.getElementById('errorMessage');
+                errorDiv.textContent = message;
+                errorDiv.style.display = 'block';
+                setTimeout(() => {
+                    errorDiv.style.display = 'none';
+                }, 5000);
+            }
+        };
+
+        // Error Handler Module
+        const ErrorHandler = {
+            handleError(error) {
+                console.error('Application error:', error);
+                
+                let userMessage = 'An unexpected error occurred. Please try again.';
+                
+                if (error.message.includes('API key')) {
+                    userMessage = 'Invalid API key. Please check your OpenAI API key and try again.';
+                } else if (error.message.includes('network') || error.message.includes('fetch')) {
+                    userMessage = 'Network error. Please check your internet connection and try again.';
+                } else if (error.message.includes('rate limit')) {
+                    userMessage = 'Rate limit exceeded. Please wait a moment before trying again.';
+                } else if (error.message.includes('quota')) {
+                    userMessage = 'API quota exceeded. Please check your OpenAI account usage.';
+                }
+                
+                UIController.showError(userMessage);
+            }
+        };
+
+        // Input Validator Module
+        const InputValidator = {
+            validateApiKey(apiKey) {
+                if (!apiKey || apiKey.length < 10) {
+                    throw new Error('Please enter a valid OpenAI API key.');
+                }
+                
+                if (!apiKey.startsWith('sk-')) {
+                    throw new Error('OpenAI API key should start with "sk-".');
+                }
+                
+                return true;
+            }
+        };
+
+        // Main App Module
+        const App = {
+            init() {
+                UIController.init();
+                Utils.updateProgress(0);
+                console.log('EthicsGuard Pro initialized');
+            },
+
+            async generateTest() {
+                if (AppState.isLoading) return;
+                
+                try {
+                    const apiKey = currentApiKey;
+                    
+                    // Validate API key
+                    InputValidator.validateApiKey(apiKey);
+                    
+                    // Update state
+                    AppState.setLoading(true);
+                    Utils.updateProgress(10);
+                    
+                    // Build prompt for test generation
+                    const prompt = `
+Generate a multiple-choice test on AI in Education Ethics. Provide exactly 10 questions.
+For each question, provide 4 answer choices labeled A, B, C, and D.
+Also provide an answer key that maps question numbers (1 to 10) to the correct option letter.
+Output exactly valid JSON in the following format with no extra commentary:
+<<<BEGIN TEST>>>
+{
+  "questions": [
+    {
+      "question": "Question text here",
+      "options": {
+         "A": "Option A text",
+         "B": "Option B text",
+         "C": "Option C text",
+         "D": "Option D text"
+      }
+    },
+    ... (10 questions total)
+  ],
+  "answerKey": {
+      "1": "B",
+      "2": "D",
+      ... (for all 10 questions)
+  }
+}
+<<<END TEST>>>
+                    `;
+                    
+                    Utils.updateProgress(30);
+                    
+                    // Call API
+                    const result = await APIService.callOpenAI(prompt, apiKey);
+                    
+                    Utils.updateProgress(70);
+                    
+                    // Parse result
+                    const testJsonString = Utils.extractJSON(result, "<<<BEGIN TEST>>>", "<<<END TEST>>>");
+                    AppState.testData = JSON.parse(testJsonString);
+                    
+                    Utils.updateProgress(90);
+                    
+                    // Display test
+                    UIController.displayTest(AppState.testData);
+                    
+                } catch (error) {
+                    ErrorHandler.handleError(error);
+                    Utils.updateProgress(0);
+                } finally {
+                    AppState.setLoading(false);
+                }
+            },
+
+            async submitTest() {
+                try {
+                    // Collect user answers
+                    const userAnswers = {};
+                    AppState.testData.questions.forEach((q, index) => {
+                        const questionNumber = index + 1;
+                        const radios = document.getElementsByName(`question${questionNumber}`);
+                        for (let radio of radios) {
+                            if (radio.checked) {
+                                userAnswers[questionNumber] = radio.value;
+                                break;
+                            }
+                        }
+                        if (!userAnswers[questionNumber]) {
+                            userAnswers[questionNumber] = "";
+                        }
+                    });
+
+                    // Build grading prompt
+                    const prompt = `
+You are an expert test grader. Given the following answer key and user answers for a 10-question multiple-choice test, calculate the score (number of correct answers) and provide a detailed feedback report.
+
+Answer Key:
+<<<BEGIN KEY>>>
+${JSON.stringify(AppState.testData.answerKey, null, 2)}
+<<<END KEY>>>
+
+User Answers:
+<<<BEGIN ANSWERS>>>
+${JSON.stringify(userAnswers, null, 2)}
+<<<END ANSWERS>>>
+
+Output exactly valid JSON in the following format with no extra commentary:
+{
+  "score": <number>,
+  "results": [
+    {
+      "questionNumber": <number>,
+      "userAnswer": "<letter>",
+      "correctAnswer": "<letter>",
+      "feedback": "<explanation>"
+    },
+    ... (for each question)
+  ]
+}
+                    `;
+
+                    // Call API for grading
+                    const result = await APIService.callOpenAI(prompt, currentApiKey);
+                    const gradingResult = JSON.parse(result);
+                    
+                    // Display results
+                    UIController.displayResults(gradingResult);
+                    
+                } catch (error) {
+                    ErrorHandler.handleError(error);
+                }
+            },
+
+            resetToSetup() {
+                AppState.testData = null;
+                UIController.elements.questionsContainer.innerHTML = "";
+                UIController.showSection('setup');
+                Utils.updateProgress(0);
+            }
+        };
+
+        // Start button click handler
+        document.getElementById('startBtn').addEventListener('click', async function() {
+            const selectedLanguage = document.getElementById('languageSelect').value;
+            const apiKey = document.getElementById('apiKeyLanding').value.trim();
+            
+            if (!apiKey) {
+                alert('Please enter your OpenAI API key');
+                return;
+            }
+            
+            currentLanguage = selectedLanguage;
+            currentApiKey = apiKey;
+            
+            // Save API key
+            localStorage.setItem('ethicsguard_api_key', apiKey);
+            
+            // Apply language with translation (cached or API)
+            await applyLanguage(selectedLanguage);
+            
+            // Show main app
+            showMainApp();
+        });
+
+        // Language selector change handler
+        document.getElementById('languageSelect').addEventListener('change', async function() {
+            const selectedLanguage = this.value;
+            updateCacheStatus(selectedLanguage);
+            
+            if (currentApiKey) {
+                await applyLanguage(selectedLanguage);
+            } else {
+                applyDirection(selectedLanguage);
+            }
+        });
+
+        // Clear cache button handler
+        document.getElementById('clearCacheBtn').addEventListener('click', clearAllTranslationCache);
+
+        // API key sync between landing and main app
+        document.getElementById('apiKeyLanding').addEventListener('input', function() {
+            currentApiKey = this.value;
+            localStorage.setItem('ethicsguard_api_key', this.value);
+            document.getElementById('apiKey').value = this.value;
+        });
+
+        document.getElementById('apiKey').addEventListener('input', function() {
+            currentApiKey = this.value;
+            localStorage.setItem('ethicsguard_api_key', this.value);
+            document.getElementById('apiKeyLanding').value = this.value;
+        });
+
+        // Initialize the application when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeApp();
+            App.init();
+        });
+    </script>
+</body>
+</html>
+

📘 Teacher & Student Guide EthicsGu.txt

@@ -0,0 +1,84 @@
+📘 Teacher & Student Guide: EthicsGuard Pro
+1. Purpose & Impact
+EthicsGuard Pro helps educators and students build, test, and deepen their knowledge of AI ethics and responsible technology use in schools—through instant, interactive, and multilingual quizzes with actionable feedback.
+
+2. Step-by-Step Instructions
+A. Teacher Workflow
+Setup & Access
+
+Open the HTML file or Hugging Face Space.
+
+Select your preferred language and enter your OpenAI API key (never leaves your device).
+
+Quiz Generation
+
+Click “🧠 Generate Test” to create a fresh, randomized ethics quiz.
+
+Each quiz contains 10 multiple-choice questions focused on AI in education, privacy, bias, and responsible use.
+
+Delivery Options
+
+Project the quiz for the whole class or share individual devices.
+
+Have students take the quiz independently, in pairs, or as groups.
+
+Feedback & Discussion
+
+Review instant results and detailed, question-by-question feedback.
+
+Use feedback explanations as discussion starters or prompts for further research.
+
+Assessment & Reflection
+
+Assign repeated quizzes over time to measure growth.
+
+Encourage students to reflect on missed questions and research correct answers.
+
+Multilingual Support
+
+Instantly switch the quiz and feedback to any supported language—ideal for international classes or ELLs.
+
+B. Student Workflow
+Getting Started
+
+Join the quiz as assigned by your teacher, or launch it yourself for practice.
+
+Select your language and enter the provided OpenAI API key (if using a shared device).
+
+Taking the Quiz
+
+Read each question carefully and select the best answer.
+
+Submit your answers when finished.
+
+Reviewing Results
+
+Instantly see your total score (out of 10) and get feedback on each question.
+
+For incorrect answers, review the provided explanation to learn what to do differently next time.
+
+Reattempt & Improve
+
+Take new quizzes to keep improving your understanding of AI ethics in education.
+
+Challenge classmates to see who can get the highest score.
+
+3. Classroom Best Practices
+Use Case	How to Integrate
+Formative Assessment	Use before or after a unit on AI ethics to gauge knowledge.
+Class Discussions	Use feedback explanations as debate or discussion starters.
+Project-Based Learning	Assign as research prompts—students explain ethical dilemmas.
+Multilingual/ELL Support	Switch languages for native-language assessment.
+Professional Development	Teachers/staff self-assess or run group sessions.
+
+4. Tips & Troubleshooting
+Be patient if translation is slow (first use only—then cached for next time).
+
+For privacy: All quiz data and API keys stay local.
+
+If questions feel generic: Regenerate for new sets; coverage is broad and random.
+
+Technical issues? Contact info@shiftmind.io or visit www.shiftmind.io.
+
+EthicsGuard Pro enables every educator and learner to confidently practice, assess, and grow their understanding of responsible AI in education—anytime, anywhere, in any language.
+