StillHammer
838c8289b8
Enhance Fill The Blank to work with both predefined exercises and auto-generated blanks from phrases: - Add dual content mode support (predefined fill-in-blanks + auto-generated from phrases) - Implement smart blank generation with max 20% word blanking and max 2 blanks per phrase - Prefer vocabulary words for auto-blanking with intelligent word selection - Add comprehensive JSDoc comments explaining both modes - Improve compatibility scoring to prioritize predefined exercises - Simplify input handling with data attributes for answers - Fix WhackAMole and WhackAMoleHard games to use entire hole as clickable area - Add pronunciation support for correct answers - Improve error handling and user feedback Games updated: - FillTheBlank.js - Dual-mode content system with smart blank generation - GrammarDiscovery.js - Code cleanup and consistency improvements - WhackAMole.js - Entire hole clickable, not just text label - WhackAMoleHard.js - Entire hole clickable, not just text label 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
956 lines
30 KiB
JavaScript
956 lines
30 KiB
JavaScript
import Module from '../core/Module.js';
|
|
|
|
/**
|
|
* Fill the Blank Game
|
|
*
|
|
* Works with 2 modes:
|
|
* 1. Predefined fill-the-blank exercises from content (exercises.fill_in_blanks)
|
|
* 2. Auto-generated blanks from regular phrases (max 20% of words, max 2 blanks per phrase)
|
|
*/
|
|
class FillTheBlank extends Module {
|
|
constructor(name, dependencies, config = {}) {
|
|
super(name || 'fill-the-blank', ['eventBus']);
|
|
|
|
if (!dependencies.eventBus || !dependencies.content) {
|
|
throw new Error('FillTheBlank requires eventBus and content dependencies');
|
|
}
|
|
|
|
this._eventBus = dependencies.eventBus;
|
|
this._content = dependencies.content;
|
|
this._config = {
|
|
container: null,
|
|
difficulty: 'medium',
|
|
maxSentences: 20,
|
|
maxBlanksPerSentence: 2,
|
|
maxBlankPercentage: 0.20, // Max 20% of words can be blanked
|
|
...config
|
|
};
|
|
|
|
// Game state
|
|
this._score = 0;
|
|
this._errors = 0;
|
|
this._currentIndex = 0;
|
|
this._isRunning = false;
|
|
this._exercises = []; // All exercises (predefined + auto-generated)
|
|
this._currentExercise = null;
|
|
this._gameContainer = null;
|
|
|
|
Object.seal(this);
|
|
}
|
|
|
|
static getMetadata() {
|
|
return {
|
|
id: 'fill-the-blank',
|
|
name: 'Fill the Blank',
|
|
description: 'Complete sentences by filling in missing words',
|
|
version: '2.0.0',
|
|
author: 'Class Generator',
|
|
category: 'vocabulary',
|
|
tags: ['vocabulary', 'sentences', 'completion', 'learning'],
|
|
difficulty: {
|
|
min: 1,
|
|
max: 4,
|
|
default: 2
|
|
},
|
|
estimatedDuration: 10,
|
|
requiredContent: ['phrases']
|
|
};
|
|
}
|
|
|
|
static getCompatibilityScore(content) {
|
|
if (!content) return 0;
|
|
|
|
let score = 0;
|
|
|
|
// Check for predefined fill-in-blanks
|
|
if (content.exercises?.fill_in_blanks) {
|
|
score += 50;
|
|
}
|
|
|
|
// Check for phrases (can be auto-converted)
|
|
if (content.phrases && typeof content.phrases === 'object') {
|
|
const phraseCount = Object.keys(content.phrases).length;
|
|
if (phraseCount >= 5) score += 30;
|
|
if (phraseCount >= 10) score += 10;
|
|
}
|
|
|
|
// Check for sentences
|
|
if (content.sentences && Array.isArray(content.sentences)) {
|
|
const sentenceCount = content.sentences.length;
|
|
if (sentenceCount >= 5) score += 5;
|
|
if (sentenceCount >= 10) score += 5;
|
|
}
|
|
|
|
return Math.min(score, 100);
|
|
}
|
|
|
|
async init() {
|
|
this._validateNotDestroyed();
|
|
|
|
if (!this._config.container) {
|
|
throw new Error('Game container is required');
|
|
}
|
|
|
|
this._eventBus.on('game:start', this._handleGameStart.bind(this), this.name);
|
|
this._eventBus.on('game:stop', this._handleGameStop.bind(this), this.name);
|
|
this._eventBus.on('navigation:change', this._handleNavigationChange.bind(this), this.name);
|
|
|
|
this._injectCSS();
|
|
|
|
try {
|
|
this._gameContainer = this._config.container;
|
|
const content = this._content;
|
|
|
|
if (!content) {
|
|
throw new Error('No content available');
|
|
}
|
|
|
|
// Load exercises (predefined + auto-generated)
|
|
this._loadExercises(content);
|
|
|
|
if (this._exercises.length === 0) {
|
|
throw new Error('No suitable content found for Fill the Blank');
|
|
}
|
|
|
|
console.log(`Fill the Blank: ${this._exercises.length} exercises loaded`);
|
|
|
|
this._createGameBoard();
|
|
this._setupEventListeners();
|
|
this._loadNextExercise();
|
|
|
|
this._eventBus.emit('game:ready', {
|
|
gameId: 'fill-the-blank',
|
|
instanceId: this.name,
|
|
exercises: this._exercises.length
|
|
}, this.name);
|
|
|
|
} catch (error) {
|
|
console.error('Error starting Fill the Blank:', error);
|
|
this._showInitError(error.message);
|
|
}
|
|
|
|
this._setInitialized();
|
|
}
|
|
|
|
async destroy() {
|
|
this._validateNotDestroyed();
|
|
|
|
this._cleanup();
|
|
this._removeCSS();
|
|
this._eventBus.off('game:start', this.name);
|
|
this._eventBus.off('game:stop', this.name);
|
|
this._eventBus.off('navigation:change', this.name);
|
|
|
|
this._setDestroyed();
|
|
}
|
|
|
|
_handleGameStart(event) {
|
|
this._validateInitialized();
|
|
if (event.gameId === 'fill-the-blank') {
|
|
this._startGame();
|
|
}
|
|
}
|
|
|
|
_handleGameStop(event) {
|
|
this._validateInitialized();
|
|
if (event.gameId === 'fill-the-blank') {
|
|
this._stopGame();
|
|
}
|
|
}
|
|
|
|
_handleNavigationChange(event) {
|
|
this._validateInitialized();
|
|
if (event.from === '/games/fill-the-blank') {
|
|
this._cleanup();
|
|
}
|
|
}
|
|
|
|
async _startGame() {
|
|
try {
|
|
this._gameContainer = document.getElementById('game-content');
|
|
if (!this._gameContainer) {
|
|
throw new Error('Game container not found');
|
|
}
|
|
|
|
const content = await this._content.getCurrentContent();
|
|
if (!content) {
|
|
throw new Error('No content available');
|
|
}
|
|
|
|
this._loadExercises(content);
|
|
|
|
if (this._exercises.length === 0) {
|
|
throw new Error('No suitable content found for Fill the Blank');
|
|
}
|
|
|
|
this._createGameBoard();
|
|
this._setupEventListeners();
|
|
this._loadNextExercise();
|
|
|
|
} catch (error) {
|
|
console.error('Error starting Fill the Blank:', error);
|
|
this._showInitError(error.message);
|
|
}
|
|
}
|
|
|
|
_stopGame() {
|
|
this._cleanup();
|
|
}
|
|
|
|
_cleanup() {
|
|
this._isRunning = false;
|
|
if (this._gameContainer) {
|
|
this._gameContainer.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Load exercises from content
|
|
* Priority 1: Predefined fill-in-blanks from exercises.fill_in_blanks
|
|
* Priority 2: Auto-generate from phrases
|
|
*/
|
|
_loadExercises(content) {
|
|
this._exercises = [];
|
|
|
|
// 1. Load predefined fill-in-blanks
|
|
if (content.exercises?.fill_in_blanks?.sentences) {
|
|
content.exercises.fill_in_blanks.sentences.forEach(exercise => {
|
|
if (exercise.text && exercise.answer) {
|
|
this._exercises.push({
|
|
type: 'predefined',
|
|
original: exercise.text,
|
|
translation: exercise.user_language || '',
|
|
blanks: [{
|
|
answer: exercise.answer,
|
|
position: exercise.text.indexOf('_______')
|
|
}]
|
|
});
|
|
}
|
|
});
|
|
console.log(`Loaded ${this._exercises.length} predefined fill-the-blank exercises`);
|
|
}
|
|
|
|
// 2. Auto-generate from phrases
|
|
if (content.phrases && typeof content.phrases === 'object') {
|
|
const phrases = Object.entries(content.phrases);
|
|
|
|
phrases.forEach(([phraseText, phraseData]) => {
|
|
const translation = typeof phraseData === 'object' ? phraseData.user_language : phraseData;
|
|
|
|
// Generate blanks for this phrase
|
|
const exercise = this._createAutoBlankExercise(phraseText, translation, content.vocabulary);
|
|
if (exercise) {
|
|
this._exercises.push(exercise);
|
|
}
|
|
});
|
|
|
|
console.log(`Generated ${this._exercises.length - (content.exercises?.fill_in_blanks?.sentences?.length || 0)} auto-blank exercises from phrases`);
|
|
}
|
|
|
|
// Shuffle and limit
|
|
this._exercises = this._shuffleArray(this._exercises);
|
|
this._exercises = this._exercises.slice(0, this._config.maxSentences);
|
|
}
|
|
|
|
/**
|
|
* Create auto-blank exercise from a phrase
|
|
* Rules:
|
|
* - Max 20% of words can be blanked
|
|
* - Max 2 blanks per phrase
|
|
* - Prefer vocabulary words
|
|
*/
|
|
_createAutoBlankExercise(phraseText, translation, vocabulary) {
|
|
const words = phraseText.split(/\s+/);
|
|
|
|
// Minimum 3 words required
|
|
if (words.length < 3) {
|
|
return null;
|
|
}
|
|
|
|
// Calculate max blanks (20% of words, max 2)
|
|
// Force 2 blanks for phrases with 6+ words, otherwise 1 blank
|
|
const maxBlanks = words.length >= 6 ? 2 : 1;
|
|
|
|
// Identify vocabulary words and other words
|
|
const vocabularyIndices = [];
|
|
const otherIndices = [];
|
|
|
|
words.forEach((word, index) => {
|
|
const cleanWord = word.replace(/[.,!?;:"'()[\]{}\-–—]/g, '').toLowerCase();
|
|
|
|
// Check if it's a vocabulary word
|
|
let isVocabWord = false;
|
|
if (vocabulary && typeof vocabulary === 'object') {
|
|
isVocabWord = Object.keys(vocabulary).some(vocabKey =>
|
|
vocabKey.toLowerCase() === cleanWord
|
|
);
|
|
}
|
|
|
|
// Skip very short words (articles, prepositions)
|
|
if (cleanWord.length <= 2) {
|
|
return;
|
|
}
|
|
|
|
if (isVocabWord) {
|
|
vocabularyIndices.push(index);
|
|
} else if (cleanWord.length >= 4) {
|
|
// Only consider words with 4+ letters
|
|
otherIndices.push(index);
|
|
}
|
|
});
|
|
|
|
// Select which words to blank
|
|
const selectedIndices = [];
|
|
|
|
// Prefer vocabulary words
|
|
const shuffledVocab = this._shuffleArray([...vocabularyIndices]);
|
|
for (let i = 0; i < Math.min(maxBlanks, shuffledVocab.length); i++) {
|
|
selectedIndices.push(shuffledVocab[i]);
|
|
}
|
|
|
|
// Fill remaining slots with other words if needed
|
|
if (selectedIndices.length < maxBlanks && otherIndices.length > 0) {
|
|
const shuffledOthers = this._shuffleArray([...otherIndices]);
|
|
const needed = maxBlanks - selectedIndices.length;
|
|
for (let i = 0; i < Math.min(needed, shuffledOthers.length); i++) {
|
|
selectedIndices.push(shuffledOthers[i]);
|
|
}
|
|
}
|
|
|
|
// Must have at least 1 blank
|
|
if (selectedIndices.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
// Sort indices
|
|
selectedIndices.sort((a, b) => a - b);
|
|
|
|
// Create blanks data
|
|
const blanks = selectedIndices.map(index => {
|
|
const word = words[index];
|
|
return {
|
|
index: index,
|
|
answer: word.replace(/[.,!?;:"'()[\]{}\-–—]/g, ''),
|
|
punctuation: word.match(/[.,!?;:"'()[\]{}\-–—]+$/)?.[0] || ''
|
|
};
|
|
});
|
|
|
|
return {
|
|
type: 'auto-generated',
|
|
original: phraseText,
|
|
translation: translation,
|
|
blanks: blanks
|
|
};
|
|
}
|
|
|
|
_showInitError(message) {
|
|
this._gameContainer.innerHTML = `
|
|
<div class="game-error">
|
|
<h3>❌ Loading Error</h3>
|
|
<p>${message}</p>
|
|
<p>This game requires phrases or predefined fill-the-blank exercises.</p>
|
|
<button onclick="window.app.getCore().router.navigate('/games')" class="back-btn">← Back to Games</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
_createGameBoard() {
|
|
this._gameContainer.innerHTML = `
|
|
<div class="fill-blank-wrapper">
|
|
<div class="game-info">
|
|
<div class="game-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-value" id="current-question">${this._currentIndex + 1}</span>
|
|
<span class="stat-label">/ ${this._exercises.length}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-value" id="errors-count">${this._errors}</span>
|
|
<span class="stat-label">Errors</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-value" id="score-display">${this._score}</span>
|
|
<span class="stat-label">Score</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="translation-hint" id="translation-hint">
|
|
<!-- Translation will appear here -->
|
|
</div>
|
|
|
|
<div class="sentence-container" id="sentence-container">
|
|
<!-- Sentence with blanks will appear here -->
|
|
</div>
|
|
|
|
<div class="game-controls">
|
|
<button class="control-btn secondary" id="hint-btn">💡 Hint</button>
|
|
<button class="control-btn primary" id="check-btn">✓ Check</button>
|
|
<button class="control-btn secondary" id="skip-btn">→ Skip</button>
|
|
</div>
|
|
|
|
<div class="feedback-area" id="feedback-area">
|
|
<div class="instruction">
|
|
Complete the sentence by filling in the blanks!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
_setupEventListeners() {
|
|
const checkBtn = document.getElementById('check-btn');
|
|
const hintBtn = document.getElementById('hint-btn');
|
|
const skipBtn = document.getElementById('skip-btn');
|
|
|
|
if (checkBtn) checkBtn.addEventListener('click', () => this._checkAnswer());
|
|
if (hintBtn) hintBtn.addEventListener('click', () => this._showHint());
|
|
if (skipBtn) skipBtn.addEventListener('click', () => this._skipSentence());
|
|
|
|
// Enter key to check answer
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' && this._isRunning) {
|
|
this._checkAnswer();
|
|
}
|
|
});
|
|
}
|
|
|
|
_loadNextExercise() {
|
|
if (this._currentIndex >= this._exercises.length) {
|
|
this._showFeedback(`🎉 All exercises completed! Final score: ${this._score}`, 'success');
|
|
this._isRunning = false;
|
|
|
|
setTimeout(() => {
|
|
// Restart with shuffled exercises
|
|
this._currentIndex = 0;
|
|
this._exercises = this._shuffleArray(this._exercises);
|
|
this._loadNextExercise();
|
|
}, 3000);
|
|
return;
|
|
}
|
|
|
|
this._isRunning = true;
|
|
this._currentExercise = this._exercises[this._currentIndex];
|
|
this._displayExercise();
|
|
this._updateUI();
|
|
}
|
|
|
|
_displayExercise() {
|
|
const exercise = this._currentExercise;
|
|
|
|
if (exercise.type === 'predefined') {
|
|
// Display predefined fill-the-blank (with "_______" placeholders)
|
|
this._displayPredefinedExercise(exercise);
|
|
} else {
|
|
// Display auto-generated exercise
|
|
this._displayAutoGeneratedExercise(exercise);
|
|
}
|
|
|
|
// Display translation hint
|
|
const translationHint = document.getElementById('translation-hint');
|
|
if (translationHint) {
|
|
translationHint.innerHTML = exercise.translation ?
|
|
`<em>💭 ${exercise.translation}</em>` : '';
|
|
}
|
|
|
|
// Focus first input
|
|
setTimeout(() => {
|
|
const firstInput = document.querySelector('.blank-input');
|
|
if (firstInput) firstInput.focus();
|
|
}, 100);
|
|
}
|
|
|
|
_displayPredefinedExercise(exercise) {
|
|
const sentenceHTML = exercise.original.replace(/_______/g, () => {
|
|
const inputId = `blank-${exercise.blanks.indexOf(exercise.blanks.find(b => b.answer))}`;
|
|
return `<input type="text" class="blank-input" id="${inputId}" placeholder="___" maxlength="20">`;
|
|
});
|
|
|
|
const container = document.getElementById('sentence-container');
|
|
if (container) {
|
|
container.innerHTML = sentenceHTML;
|
|
}
|
|
}
|
|
|
|
_displayAutoGeneratedExercise(exercise) {
|
|
const words = exercise.original.split(/\s+/);
|
|
let sentenceHTML = '';
|
|
let blankIndex = 0;
|
|
|
|
words.forEach((word, index) => {
|
|
const blank = exercise.blanks.find(b => b.index === index);
|
|
|
|
if (blank) {
|
|
sentenceHTML += `<span class="blank-wrapper"><input type="text" class="blank-input" id="blank-${blankIndex}" placeholder="___" maxlength="${blank.answer.length + 5}" data-answer="${blank.answer}">${blank.punctuation}</span> `;
|
|
blankIndex++;
|
|
} else {
|
|
sentenceHTML += `<span class="word">${word}</span> `;
|
|
}
|
|
});
|
|
|
|
const container = document.getElementById('sentence-container');
|
|
if (container) {
|
|
container.innerHTML = sentenceHTML;
|
|
}
|
|
}
|
|
|
|
_checkAnswer() {
|
|
if (!this._isRunning) return;
|
|
|
|
const inputs = document.querySelectorAll('.blank-input');
|
|
const blanks = this._currentExercise.blanks;
|
|
|
|
let allCorrect = true;
|
|
let correctCount = 0;
|
|
|
|
inputs.forEach((input, index) => {
|
|
const userAnswer = input.value.trim().toLowerCase();
|
|
const correctAnswer = (input.dataset.answer || blanks[index]?.answer || '').toLowerCase();
|
|
|
|
if (userAnswer === correctAnswer) {
|
|
input.classList.remove('incorrect');
|
|
input.classList.add('correct');
|
|
correctCount++;
|
|
} else {
|
|
input.classList.remove('correct');
|
|
input.classList.add('incorrect');
|
|
allCorrect = false;
|
|
}
|
|
});
|
|
|
|
if (allCorrect) {
|
|
const points = 10 * blanks.length;
|
|
this._score += points;
|
|
this._showFeedback(`🎉 Perfect! +${points} points`, 'success');
|
|
this._speakWord(blanks[0].answer); // Pronounce first blank word
|
|
|
|
setTimeout(() => {
|
|
this._currentIndex++;
|
|
this._loadNextExercise();
|
|
}, 1500);
|
|
} else {
|
|
this._errors++;
|
|
if (correctCount > 0) {
|
|
const points = 5 * correctCount;
|
|
this._score += points;
|
|
this._showFeedback(`✨ ${correctCount}/${blanks.length} correct! +${points} points. Try again.`, 'partial');
|
|
} else {
|
|
this._showFeedback(`❌ Try again! (${this._errors} errors)`, 'error');
|
|
}
|
|
}
|
|
|
|
this._updateUI();
|
|
|
|
this._eventBus.emit('game:score-update', {
|
|
gameId: 'fill-the-blank',
|
|
score: this._score,
|
|
errors: this._errors
|
|
}, this.name);
|
|
}
|
|
|
|
_showHint() {
|
|
const inputs = document.querySelectorAll('.blank-input');
|
|
|
|
inputs.forEach(input => {
|
|
if (!input.value.trim()) {
|
|
const correctAnswer = input.dataset.answer ||
|
|
this._currentExercise.blanks[0]?.answer || '';
|
|
if (correctAnswer) {
|
|
input.value = correctAnswer[0]; // First letter
|
|
input.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
this._showFeedback('💡 First letters added!', 'info');
|
|
}
|
|
|
|
_skipSentence() {
|
|
const inputs = document.querySelectorAll('.blank-input');
|
|
const blanks = this._currentExercise.blanks;
|
|
|
|
inputs.forEach((input, index) => {
|
|
const correctAnswer = input.dataset.answer || blanks[index]?.answer || '';
|
|
input.value = correctAnswer;
|
|
input.classList.add('revealed');
|
|
});
|
|
|
|
this._showFeedback('📖 Answers revealed! Next exercise...', 'info');
|
|
|
|
setTimeout(() => {
|
|
this._currentIndex++;
|
|
this._loadNextExercise();
|
|
}, 2000);
|
|
}
|
|
|
|
_speakWord(word) {
|
|
if (!window.speechSynthesis || !word) return;
|
|
|
|
try {
|
|
window.speechSynthesis.cancel();
|
|
|
|
const utterance = new SpeechSynthesisUtterance(word);
|
|
utterance.lang = 'en-US';
|
|
utterance.rate = 0.9;
|
|
utterance.pitch = 1.0;
|
|
utterance.volume = 1.0;
|
|
|
|
const voices = window.speechSynthesis.getVoices();
|
|
const preferredVoice = voices.find(v =>
|
|
v.lang.startsWith('en') &&
|
|
(v.name.includes('Google') || v.name.includes('Neural') || v.name.includes('Microsoft'))
|
|
);
|
|
|
|
if (preferredVoice) {
|
|
utterance.voice = preferredVoice;
|
|
}
|
|
|
|
window.speechSynthesis.speak(utterance);
|
|
} catch (error) {
|
|
console.warn('Speech synthesis failed:', error);
|
|
}
|
|
}
|
|
|
|
_showFeedback(message, type = 'info') {
|
|
const feedbackArea = document.getElementById('feedback-area');
|
|
if (feedbackArea) {
|
|
feedbackArea.innerHTML = `<div class="instruction ${type}">${message}</div>`;
|
|
}
|
|
}
|
|
|
|
_updateUI() {
|
|
const currentQuestion = document.getElementById('current-question');
|
|
const errorsCount = document.getElementById('errors-count');
|
|
const scoreDisplay = document.getElementById('score-display');
|
|
|
|
if (currentQuestion) currentQuestion.textContent = this._currentIndex + 1;
|
|
if (errorsCount) errorsCount.textContent = this._errors;
|
|
if (scoreDisplay) scoreDisplay.textContent = this._score;
|
|
}
|
|
|
|
_shuffleArray(array) {
|
|
const shuffled = [...array];
|
|
for (let i = shuffled.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
|
}
|
|
return shuffled;
|
|
}
|
|
|
|
_injectCSS() {
|
|
const cssId = 'fill-the-blank-styles';
|
|
if (document.getElementById(cssId)) return;
|
|
|
|
const style = document.createElement('style');
|
|
style.id = cssId;
|
|
style.textContent = `
|
|
.fill-blank-wrapper {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
color: white;
|
|
}
|
|
|
|
.game-info {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin-bottom: 25px;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.game-stats {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
display: block;
|
|
color: #fff;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9em;
|
|
opacity: 0.8;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.translation-hint {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
font-size: 1.1em;
|
|
color: #f0f0f0;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.sentence-container {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin-bottom: 25px;
|
|
font-size: 1.4em;
|
|
line-height: 2;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
min-height: 120px;
|
|
}
|
|
|
|
.word {
|
|
display: inline;
|
|
color: #2c3e50;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.blank-wrapper {
|
|
display: inline;
|
|
position: relative;
|
|
}
|
|
|
|
.blank-input {
|
|
background: white;
|
|
border: 3px solid #667eea;
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
min-width: 100px;
|
|
max-width: 200px;
|
|
transition: all 0.3s ease;
|
|
color: #2c3e50;
|
|
font-weight: bold;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.blank-input:focus {
|
|
outline: none;
|
|
border-color: #5a67d8;
|
|
box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.blank-input.correct {
|
|
border-color: #27ae60;
|
|
background: linear-gradient(135deg, #d5f4e6, #a3e6c7);
|
|
color: #1e8e3e;
|
|
animation: correctPulse 0.5s ease;
|
|
}
|
|
|
|
.blank-input.incorrect {
|
|
border-color: #e74c3c;
|
|
background: linear-gradient(135deg, #ffeaea, #ffcdcd);
|
|
color: #c0392b;
|
|
animation: shake 0.5s ease-in-out;
|
|
}
|
|
|
|
.blank-input.revealed {
|
|
border-color: #f39c12;
|
|
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
|
|
color: #d35400;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-8px); }
|
|
75% { transform: translateX(8px); }
|
|
}
|
|
|
|
@keyframes correctPulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
.game-controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin: 25px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.control-btn {
|
|
padding: 14px 30px;
|
|
border: none;
|
|
border-radius: 25px;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
min-width: 130px;
|
|
}
|
|
|
|
.control-btn.primary {
|
|
background: linear-gradient(135deg, #27ae60, #2ecc71);
|
|
color: white;
|
|
box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
|
|
}
|
|
|
|
.control-btn.primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
|
|
}
|
|
|
|
.control-btn.secondary {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #667eea;
|
|
border: 2px solid rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.control-btn.secondary:hover {
|
|
background: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.feedback-area {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
min-height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.instruction {
|
|
font-size: 1.1em;
|
|
font-weight: 500;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.instruction.success {
|
|
color: #2ecc71;
|
|
font-weight: bold;
|
|
font-size: 1.3em;
|
|
animation: pulse 0.6s ease-in-out;
|
|
}
|
|
|
|
.instruction.error {
|
|
color: #e74c3c;
|
|
font-weight: bold;
|
|
animation: pulse 0.6s ease-in-out;
|
|
}
|
|
|
|
.instruction.partial {
|
|
color: #f39c12;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.instruction.info {
|
|
color: #3498db;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
.game-error {
|
|
background: rgba(231, 76, 60, 0.1);
|
|
border: 2px solid #e74c3c;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
color: white;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.game-error h3 {
|
|
color: #e74c3c;
|
|
margin-bottom: 15px;
|
|
font-size: 2em;
|
|
}
|
|
|
|
.back-btn {
|
|
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 25px;
|
|
border-radius: 25px;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(149, 165, 166, 0.4);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.fill-blank-wrapper {
|
|
padding: 15px;
|
|
}
|
|
|
|
.game-stats {
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
}
|
|
|
|
.stat-item {
|
|
flex: 1;
|
|
}
|
|
|
|
.sentence-container {
|
|
font-size: 1.2em;
|
|
padding: 20px 15px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.blank-input {
|
|
min-width: 80px;
|
|
font-size: 0.9em;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.game-controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.control-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.translation-hint {
|
|
font-size: 1em;
|
|
padding: 12px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
_removeCSS() {
|
|
const cssElement = document.getElementById('fill-the-blank-styles');
|
|
if (cssElement) {
|
|
cssElement.remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
export default FillTheBlank;
|