Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BDSM Exploration Game</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #8e24aa; | |
| --secondary-color: #e91e63; | |
| --accent-color: #ff5722; | |
| --background-color: #121212; | |
| --text-color: #e0e0e0; | |
| --card-bg: #1e1e1e; | |
| --shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |
| --border-radius: 12px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--background-color); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| padding: 1rem; | |
| text-align: center; | |
| position: relative; | |
| box-shadow: var(--shadow); | |
| } | |
| .header h1 { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .header p { | |
| font-size: 1rem; | |
| opacity: 0.9; | |
| } | |
| .anycoder-link { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| color: white; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| padding: 0.3rem 0.6rem; | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .anycoder-link:hover { | |
| background-color: rgba(255, 255, 255, 0.3); | |
| } | |
| .game-container { | |
| display: flex; | |
| flex-direction: column; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 1rem; | |
| gap: 1rem; | |
| } | |
| .game-map { | |
| background-color: var(--card-bg); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| overflow: hidden; | |
| min-height: 400px; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23333" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>'); | |
| } | |
| .map-title { | |
| text-align: center; | |
| margin-bottom: 1rem; | |
| color: var(--accent-color); | |
| font-size: 1.5rem; | |
| } | |
| .habitat { | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| z-index: 2; | |
| } | |
| .habitat:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); | |
| } | |
| .habitat i { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| color: white; | |
| } | |
| .habitat span { | |
| font-size: 0.9rem; | |
| font-weight: bold; | |
| color: white; | |
| text-align: center; | |
| } | |
| .bondage { | |
| background-color: #e91e63; | |
| top: 20%; | |
| left: 15%; | |
| } | |
| .sensory { | |
| background-color: #9c27b0; | |
| top: 30%; | |
| right: 15%; | |
| } | |
| .impact { | |
| background-color: #ff5722; | |
| bottom: 20%; | |
| left: 25%; | |
| } | |
| .roleplay { | |
| background-color: #673ab7; | |
| bottom: 25%; | |
| right: 20%; | |
| } | |
| .aftercare { | |
| background-color: #4caf50; | |
| top: 50%; | |
| left: 45%; | |
| } | |
| .activity-card { | |
| display: none; | |
| background-color: var(--card-bg); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| margin-top: 1rem; | |
| position: relative; | |
| animation: slideIn 0.5s ease; | |
| border: 1px solid var(--primary-color); | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .activity-card.active { | |
| display: block; | |
| } | |
| .activity-card h3 { | |
| color: var(--accent-color); | |
| margin-bottom: 1rem; | |
| text-align: center; | |
| } | |
| .activity-image { | |
| width: 100%; | |
| max-width: 300px; | |
| height: 200px; | |
| object-fit: cover; | |
| border-radius: var(--border-radius); | |
| margin: 0 auto 1rem; | |
| display: block; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .activity-info { | |
| margin-bottom: 1rem; | |
| } | |
| .activity-info p { | |
| margin-bottom: 0.5rem; | |
| } | |
| .safety-info { | |
| background-color: #ffeb3b; | |
| color: #111; | |
| padding: 0.8rem; | |
| border-radius: 8px; | |
| margin-top: 1rem; | |
| border-left: 4px solid #ffc107; | |
| } | |
| .close-btn { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: #757575; | |
| transition: color 0.3s ease; | |
| } | |
| .close-btn:hover { | |
| color: #fff; | |
| } | |
| .badge-section { | |
| background-color: var(--card-bg); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .badge-section h3 { | |
| color: var(--accent-color); | |
| margin-bottom: 1rem; | |
| text-align: center; | |
| } | |
| .badges { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| justify-content: center; | |
| } | |
| .badge { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: #333; | |
| color: #757575; | |
| font-size: 0.8rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| border: 2px solid #555; | |
| } | |
| .badge.earned { | |
| background: linear-gradient(135deg, var(--accent-color), var(--primary-color)); | |
| color: white; | |
| transform: scale(1.05); | |
| border-color: var(--accent-color); | |
| } | |
| .badge i { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.3rem; | |
| } | |
| .quiz-section { | |
| background-color: var(--card-bg); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .quiz-section h3 { | |
| color: var(--accent-color); | |
| margin-bottom: 1rem; | |
| text-align: center; | |
| } | |
| .quiz-question { | |
| margin-bottom: 1.5rem; | |
| } | |
| .quiz-options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.8rem; | |
| } | |
| .quiz-option { | |
| background-color: #333; | |
| padding: 0.8rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: 2px solid transparent; | |
| } | |
| .quiz-option:hover { | |
| background-color: #444; | |
| } | |
| .quiz-option.correct { | |
| background-color: #388e3c; | |
| border-color: #4caf50; | |
| } | |
| .quiz-option.incorrect { | |
| background-color: #d32f2f; | |
| border-color: #f44336; | |
| } | |
| .quiz-result { | |
| text-align: center; | |
| margin-top: 1rem; | |
| font-weight: bold; | |
| min-height: 2rem; | |
| } | |
| .progress-container { | |
| background-color: #333; | |
| height: 8px; | |
| border-radius: 4px; | |
| margin-top: 1rem; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| } | |
| .controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .btn { | |
| padding: 0.6rem 1.2rem; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #6a1b9a; | |
| } | |
| .btn-secondary { | |
| background-color: var(--secondary-color); | |
| color: white; | |
| } | |
| .btn-secondary:hover { | |
| background-color: #c2185b; | |
| } | |
| .btn-disabled { | |
| background-color: #333; | |
| color: #757575; | |
| cursor: not-allowed; | |
| } | |
| .sound-toggle { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| z-index: 100; | |
| } | |
| .sound-toggle:hover { | |
| transform: scale(1.1); | |
| } | |
| .sound-toggle.off { | |
| background-color: #555; | |
| } | |
| .disclaimer { | |
| background-color: #ffeb3b; | |
| color: #111; | |
| padding: 1rem; | |
| border-radius: var(--border-radius); | |
| margin: 1rem 0; | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| @media (max-width: 768px) { | |
| .game-container { | |
| padding: 0.5rem; | |
| } | |
| .game-map { | |
| min-height: 300px; | |
| padding: 1rem; | |
| } | |
| .habitat { | |
| width: 80px; | |
| height: 80px; | |
| } | |
| .habitat i { | |
| font-size: 1.5rem; | |
| } | |
| .habitat span { | |
| font-size: 0.7rem; | |
| } | |
| .activity-image { | |
| height: 150px; | |
| } | |
| .badges { | |
| gap: 0.5rem; | |
| } | |
| .badge { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .header h1 { | |
| font-size: 1.5rem; | |
| } | |
| .header p { | |
| font-size: 0.9rem; | |
| } | |
| .game-map { | |
| min-height: 250px; | |
| } | |
| .habitat { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .habitat i { | |
| font-size: 1.2rem; | |
| } | |
| .habitat span { | |
| font-size: 0.6rem; | |
| } | |
| .activity-card { | |
| padding: 1rem; | |
| } | |
| .activity-image { | |
| height: 120px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with | |
| anycoder</a> | |
| <h1>🔞 BDSM Exploration Game 🔥</h1> | |
| <p>Explore different BDSM activities and learn about safe, consensual practices</p> | |
| </div> | |
| <div class="disclaimer"> | |
| ⚠️ This game is for educational purposes only and intended for adults 18+. Always practice safe, sane, and consensual activities. | |
| </div> | |
| <div class="game-container"> | |
| <div class="game-map"> | |
| <h2 class="map-title">BDSM Activity Map</h2> | |
| <p style="text-align: center; margin-bottom: 1rem; color: #aaa;">Click on an activity to learn more!</p> | |
| <div class="habitat bondage" data-activity="bondage"> | |
| <i class="fas fa-link"></i> | |
| <span>Bondage</span> | |
| </div> | |
| <div class="habitat sensory" data-activity="sensory"> | |
| <i class="fas fa-eye"></i> | |
| <span>Sensory Play</span> | |
| </div> | |
| <div class="habitat impact" data-activity="impact"> | |
| <i class="fas fa-hand-paper"></i> | |
| <span>Impact Play</span> | |
| </div> | |
| <div class="habitat roleplay" data-activity="roleplay"> | |
| <i class="fas fa-theater-masks"></i> | |
| <span>Roleplay</span> | |
| </div> | |
| <div class="habitat aftercare" data-activity="aftercare"> | |
| <i class="fas fa-heart"></i> | |
| <span>Aftercare</span> | |
| </div> | |
| </div> | |
| <div class="activity-card" id="activityCard"> | |
| <button class="close-btn" id="closeActivityCard">×</button> | |
| <h3 id="activityName">Activity Name</h3> | |
| <img src="" alt="Activity" class="activity-image" id="activityImage"> | |
| <div class="activity-info"> | |
| <p><strong>Category:</strong> <span id="activityCategory">Category</span></p> | |
| <p><strong>Intensity:</strong> <span id="activityIntensity">Intensity Level</span></p> | |
| <p><strong>Common Tools:</strong> <span id="activityTools">Tools Used</span></p> | |
| </div> | |
| <div class="safety-info"> | |
| <strong>Safety Information:</strong> <span id="activitySafety">Safety tips and considerations</span> | |
| </div> | |
| </div> | |
| <div class="badge-section"> | |
| <h3>🏆 My BDSM Badges</h3> | |
| <div class="badges"> | |
| <div class="badge" id="bondageBadge" data-badge="bondage"> | |
| <i class="fas fa-link"></i> | |
| <span>Bondage Expert</span> | |
| </div> | |
| <div class="badge" id="sensoryBadge" data-badge="sensory"> | |
| <i class="fas fa-eye"></i> | |
| <span>Sensory Master</span> | |
| </div> | |
| <div class="badge" id="impactBadge" data-badge="impact"> | |
| <i class="fas fa-hand-paper"></i> | |
| <span>Impact Specialist</span> | |
| </div> | |
| <div class="badge" id="roleplayBadge" data-badge="roleplay"> | |
| <i class="fas fa-theater-masks"></i> | |
| <span>Roleplay Pro</span> | |
| </div> | |
| <div class="badge" id="aftercareBadge" data-badge="aftercare"> | |
| <i class="fas fa-heart"></i> | |
| <span>Aftercare Angel</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quiz-section"> | |
| <h3>🎯 BDSM Knowledge Quiz</h3> | |
| <div id="quizContainer"> | |
| <div class="quiz-question" id="quizQuestion">Question will appear here</div> | |
| <div class="quiz-options" id="quizOptions"> | |
| <!-- Options will be added by JavaScript --> | |
| </div> | |
| <div class="quiz-result" id="quizResult"></div> | |
| <div class="progress-container"> | |
| <div class="progress-bar" id="progressBar"></div> | |
| </div> | |
| <div class="controls"> | |
| <button class="btn btn-secondary" id="prevQuestion" disabled>Previous</button> | |
| <button class="btn btn-primary" id="nextQuestion">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="sound-toggle" id="soundToggle"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <script> | |
| // Activity data | |
| const activities = { | |
| bondage: { | |
| name: "Rope Bondage", | |
| image: "https://images.unsplash.com/photo-1573135753799-69f98e95e20f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", | |
| category: "Restriction", | |
| intensity: "Medium", | |
| tools: "Rope, cuffs, spreader bars", | |
| safety: "Always have safety shears nearby. Avoid binding joints directly. Check circulation frequently. Use safe words." | |
| }, | |
| sensory: { | |
| name: "Sensory Deprivation", | |
| image: "https://images.unsplash.com/photo-1557050543-4d5f4e07d79b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", | |
| category: "Sensory Play", | |
| intensity: "Low-Medium", | |
| tools: "Blindfolds, earplugs, hoods", | |
| safety: "Establish clear communication methods before starting. Have a safe word or signal. Start with short durations." | |
| }, | |
| impact: { | |
| name: "Spanking", | |
| image: "https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", | |
| category: "Impact Play", | |
| intensity: "Low-High", | |
| tools: "Hands, paddles, canes, floggers", | |
| safety: "Avoid sensitive areas (kidneys, spine, joints). Warm up gradually. Check skin condition regularly. Use proper technique." | |
| }, | |
| roleplay: { | |
| name: "Power Exchange", | |
| image: "https://images.unsplash.com/photo-1559827260-dc66d52bef19?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", | |
| category: "Psychological", | |
| intensity: "Varies", | |
| tools: "Costumes, contracts, titles", | |
| safety: "Establish clear boundaries and expectations. Discuss limits beforehand. Maintain aftercare protocols." | |
| }, | |
| aftercare: { | |
| name: "Aftercare", | |
| image: "https://images.unsplash.com/photo-1573135753799-69f98e95e20f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", | |
| category: "Essential", | |
| intensity: "N/A", | |
| tools: "Blankets, water, snacks, cuddles", | |
| safety: "Always provide aftercare. Check in emotionally and physically. Rehydrate and comfort your partner." | |
| } | |
| }; | |
| // Quiz questions | |
| const quizQuestions = [ | |
| { | |
| question: "What is the most important aspect of BDSM activities?", | |
| options: ["Intensity", "Consent", "Tools", "Duration"], | |
| correctAnswer: "Consent", | |
| activity: "bondage" | |
| }, | |
| { | |
| question: "Which of these should you avoid when doing impact play?", | |
| options: ["Back", "Buttocks", "Kidneys", "Thighs"], | |
| correctAnswer: "Kidneys", | |
| activity: "impact" | |
| }, | |
| { | |
| question: "What is the purpose of aftercare?", | |
| options: ["To extend the scene", "To provide comfort and safety", "To negotiate the next scene", "To clean up toys"], | |
| correctAnswer: "To provide comfort and safety", | |
| activity: "aftercare" | |
| }, | |
| { | |
| question: "Which of these is NOT typically used in sensory deprivation?", | |
| options: ["Blindfold", "Earplugs", "Vibrator", "Hood"], | |
| correctAnswer: "Vibrator", | |
| activity: "sensory" | |
| }, | |
| { | |
| question: "What should you always have nearby during bondage?", | |
| options: ["Lubricant", "Safety shears", "Camera", "Music"], | |
| correctAnswer: "Safety shears", | |
| activity: "bondage" | |
| } | |
| ]; | |
| // Game state | |
| let earnedBadges = new Set(); | |
| let currentQuizQuestion = 0; | |
| let quizScore = 0; | |
| let soundOn = true; | |
| // DOM elements | |
| const activityCard = document.getElementById('activityCard'); | |
| const closeActivityCard = document.getElementById('closeActivityCard'); | |
| const activityName = document.getElementById('activityName'); | |
| const activityImage = document.getElementById('activityImage'); | |
| const activityCategory = document.getElementById('activityCategory'); | |
| const activityIntensity = document.getElementById('activityIntensity'); | |
| const activityTools = document.getElementById('activityTools'); | |
| const activitySafety = document.getElementById('activitySafety'); | |
| const activityElements = document.querySelectorAll('.habitat'); | |
| const badgeElements = document.querySelectorAll('.badge'); | |
| const quizContainer = document.getElementById('quizContainer'); | |
| const quizQuestion = document.getElementById('quizQuestion'); | |
| const quizOptions = document.getElementById('quizOptions'); | |
| const quizResult = document.getElementById('quizResult'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const prevQuestion = document.getElementById('prevQuestion'); | |
| const nextQuestion = document.getElementById('nextQuestion'); | |
| const soundToggle = document.getElementById('soundToggle'); | |
| // Initialize the game | |
| function initGame() { | |
| // Set up activity click events | |
| activityElements.forEach(activity => { | |
| activity.addEventListener('click', () => { | |
| const activityType = activity.getAttribute('data-activity'); | |
| showActivityCard(activityType); | |
| // Earn badge if not already earned | |
| if (!earnedBadges.has(activityType)) { | |
| earnedBadges.add(activityType); | |
| updateBadges(); | |
| playSound('success'); | |
| } | |
| }); | |
| }); | |
| // Set up close button | |
| closeActivityCard.addEventListener('click', () => { | |
| activityCard.classList.remove('active'); | |
| playSound('click'); | |
| }); | |
| // Set up sound toggle | |
| soundToggle.addEventListener('click', toggleSound); | |
| // Initialize quiz | |
| initQuiz(); | |
| } | |
| // Show activity card | |
| function showActivityCard(activityType) { | |
| const activity = activities[activityType]; | |
| activityName.textContent = activity.name; | |
| activityImage.src = activity.image; | |
| activityCategory.textContent = activity.category; | |
| activityIntensity.textContent = activity.intensity; | |
| activityTools.textContent = activity.tools; | |
| activitySafety.textContent = activity.safety; | |
| activityCard.classList.add('active'); | |
| playSound('activity'); | |
| } | |
| // Update badges display | |
| function updateBadges() { | |
| badgeElements.forEach(badge => { | |
| const badgeType = badge.getAttribute('data-badge'); | |
| if (earnedBadges.has(badgeType)) { | |
| badge.classList.add('earned'); | |
| } else { | |
| badge.classList.remove('earned'); | |
| } | |
| }); | |
| } | |
| // Initialize quiz | |
| function initQuiz() { | |
| showQuizQuestion(currentQuizQuestion); | |
| updateQuizControls(); | |
| } | |
| // Show quiz question | |
| function showQuizQuestion(index) { | |
| const question = quizQuestions[index]; | |
| quizQuestion.textContent = question.question; | |
| quizOptions.innerHTML = ''; | |
| question.options.forEach((option, i) => { | |
| const optionElement = document.createElement('div'); | |
| optionElement.className = 'quiz-option'; | |
| optionElement.textContent = option; | |
| optionElement.addEventListener('click', () => selectOption(option, question.correctAnswer)); | |
| quizOptions.appendChild(optionElement); | |
| }); | |
| quizResult.textContent = ''; | |
| updateProgressBar(); | |
| } | |
| // Select quiz option | |
| function selectOption(selectedOption, correctAnswer) { | |
| const options = document.querySelectorAll('.quiz-option'); | |
| options.forEach(option => { | |
| option.classList.remove('correct', 'incorrect'); | |
| if (option.textContent === correctAnswer) { | |
| option.classList.add('correct'); | |
| } else if (option.textContent === selectedOption && selectedOption !== correctAnswer) { | |
| option.classList.add('incorrect'); | |
| } | |
| }); | |
| if (selectedOption === correctAnswer) { | |
| quizResult.textContent = "Correct! 🎉"; | |
| quizResult.style.color = "#4CAF50"; | |
| quizScore++; | |
| playSound('correct'); | |
| } else { | |
| quizResult.textContent = `Incorrect. The correct answer is: ${correctAnswer}`; | |
| quizResult.style.color = "#F44336"; | |
| playSound('incorrect'); | |
| } | |
| // Check if all questions answered | |
| if (currentQuizQuestion === quizQuestions.length - 1) { | |
| nextQuestion.textContent = "Finish Quiz"; | |
| } | |
| } | |
| // Update quiz controls | |
| function updateQuizControls() { | |
| prevQuestion.disabled = currentQuizQuestion === 0; | |
| nextQuestion.disabled = false; | |
| if (currentQuizQuestion === 0) { | |
| prevQuestion.classList.add('btn-disabled'); | |
| } else { | |
| prevQuestion.classList.remove('btn-disabled'); | |
| } | |
| } | |
| // Update progress bar | |
| function updateProgressBar() { | |
| const progress = ((currentQuizQuestion) / quizQuestions.length) * 100; | |
| progressBar.style.width = `${progress}%`; | |
| } | |
| // Next question | |
| nextQuestion.addEventListener('click', () => { | |
| if (currentQuizQuestion < quizQuestions.length - 1) { | |
| currentQuizQuestion++; | |
| showQuizQuestion(currentQuizQuestion); | |
| updateQuizControls(); | |
| playSound('click'); | |
| } else { | |
| // Quiz completed | |
| const percentage = Math.round((quizScore / quizQuestions.length) * 100); | |
| quizResult.innerHTML = `Quiz completed! Your score: ${quizScore}/${quizQuestions.length} (${percentage}%) 🎉`; | |
| // Reset quiz | |
| currentQuizQuestion = 0; | |
| quizScore = 0; | |
| nextQuestion.textContent = "Next"; | |
| // Show first question again | |
| showQuizQuestion(currentQuizQuestion); | |
| updateQuizControls(); | |
| } | |
| }); | |
| // Previous question | |
| prevQuestion.addEventListener('click', () => { | |
| if (currentQuizQuestion > 0) { | |
| currentQuizQuestion--; | |
| showQuizQuestion(currentQuizQuestion); | |
| updateQuizControls(); | |
| playSound('click'); | |
| } | |
| }); | |
| // Toggle sound | |
| function toggleSound() { | |
| soundOn = !soundOn; | |
| const icon = soundToggle.querySelector('i'); | |
| if (soundOn) { | |
| icon.className = "fas fa-volume-up"; | |
| soundToggle.classList.remove('off'); | |
| } else { | |
| icon.className = "fas fa-volume-mute"; | |
| soundToggle.classList.add('off'); | |
| } | |
| } | |
| // Play sound | |
| function playSound(type) { | |
| if (!soundOn) return; | |
| let soundUrl = ''; | |
| switch(type) { | |
| case 'click': | |
| soundUrl = 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3'; | |
| break; | |
| case 'success': | |
| soundUrl = 'https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3'; | |
| break; | |
| case 'activity': | |
| soundUrl = 'https://assets.mixkit.co/sfx/preview/mixkit-happy-bells-notification-937.mp3'; | |
| break; | |
| case 'correct': | |
| soundUrl = 'https://assets.mixkit.co/sfx/preview/mixkit-correct-answer-tone-2870.mp3'; | |
| break; | |
| case 'incorrect': | |
| soundUrl = 'https://assets.mixkit.co/sfx/preview/mixkit-losing-bleeps-2026.mp3'; | |
| break; | |
| default: | |
| return; | |
| } | |
| const audio = new Audio(soundUrl); | |
| audio.play().catch(e => console.log("Audio play failed:", e)); | |
| } | |
| // Initialize the game when the page loads | |
| window.addEventListener('load', initGame); | |
| </script> | |
| </body> | |
| </html> |