🤖 Cannot save fiddle

### Error code

ERRW:SS1.0

### Were you logged in?

Yes

### Your username (if logged in)

_No response_

### Your HTML

```html
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LGS Kelime Dünyası & Oyun Merkezi</title>
  <style>
    * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    body { background: #1a1a2e; color: #fff; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; }
    .card { background: #16213e; border: 2px solid #0f3460; padding: 25px; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); max-width: 550px; width: 100%; margin-bottom: 20px; }
    h1, h2, h3 { text-align: center; color: #e94560; margin-top: 0; }
    .hidden { display: none !important; }
    
    /* Buttons & Inputs */
    input[type="text"] { width: 100%; padding: 12px; margin: 8px 0; border: 2px solid #0f3460; background: #0f3460; color: #fff; border-radius: 8px; font-size: 16px; outline: none; }
    input:focus { border-color: #e94560; }
    
    button { width: 100%; padding: 14px; background: #e94560; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; margin-top: 8px; }
    button:hover { background: #ff6b81; transform: translateY(-2px); }
    button.secondary { background: #0f3460; }
    button.secondary:hover { background: #1f4068; }
    button.dont-know { background: #e67e22; }

    .word-row { display: flex; gap: 10px; margin-bottom: 8px; }
    
    /* Mode Cards */
    .mode-card { background: #0f3460; padding: 15px; border-radius: 10px; margin: 10px 0; cursor: pointer; text-align: center; border: 2px solid transparent; transition: 0.2s; }
    .mode-card:hover { border-color: #e94560; background: #1f4068; }
    
    /* Maze Game Visuals */
    #maze-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
    .door { background: #0f3460; border: 3px solid #e94560; padding: 20px 10px; text-align: center; border-radius: 10px; font-weight: bold; cursor: pointer; font-size: 18px; min-height: 80px; display: flex; align-items: center; justify-content: center; }
    .door:hover { background: #e94560; }
    
    .speaker-btn { width: auto; padding: 8px 15px; background: #0f3460; color: #fff; border-radius: 20px; font-size: 18px; display: inline-block; }
    
    .repeat-box { background: #2c2c54; border: 2px solid #e67e22; padding: 15px; border-radius: 8px; text-align: center; margin-top: 15px; }
    .saved-set-item { display: flex; justify-content: space-between; align-items: center; background: #0f3460; padding: 10px 15px; border-radius: 8px; margin: 8px 0; }
    .del-btn { width: auto; padding: 5px 10px; background: #ff4757; font-size: 12px; margin: 0; }
  </style>
</head>
<body>

  
  <div id="main-menu" class="card">
    <h1>🚀 LGS Kelime Macerası</h1>
    <p style="text-align: center; color: #aaa;">Bir oyun modu seçip öğrenmeye başla!</p>
    
    <div class="mode-card" onclick="openGameSelect('classic')">
      <h3>🎯 Klasik Soru-Cevap</h3>
      <p style="font-size:12px; color:#ccc;">Sesli telaffuz ve bilinmeyen kelimeler için 10 tekrar modu.</p>
    </div>

    <div class="mode-card" onclick="openGameSelect('maze')">
      <h3>👾 Labirent Kovalamaca</h3>
      <p style="font-size:12px; color:#ccc;">Doğru cevabın olduğu kapıya kaç, puanları topla!</p>
    </div>

    <button onclick="showScreen('word-manager-screen')" class="secondary">📚 Kelime Paketlerini Yönet / Yeni Ekle</button>
  </div>

  
  <div id="word-manager-screen" class="card hidden">
    <h2>💾 Kelime Paketleri</h2>
    
    <input type="text" id="set-title-input" placeholder="Paket Adı (Örn: LGS 1. Ünite Friendship)">
    
    <div id="word-inputs-container">
      <div class="word-row"><input type="text" class="en-input" value="Refuse"><input type="text" class="tr-input" value="Reddetmek"></div>
      <div class="word-row"><input type="text" class="en-input" value="Accept"><input type="text" class="tr-input" value="Kabul etmek"></div>
      <div class="word-row"><input type="text" class="en-input" value="Invite"><input type="text" class="tr-input" value="Davet etmek"></div>
    </div>

    <button type="button" onclick="addWordRow()" class="secondary">+ Yeni Kelime Satırı</button>
    <button type="button" onclick="saveCurrentSet()">💾 Paketi Kaydet</button>

    <hr style="margin: 20px 0; border-color: #0f3460;">
    <h3>Kaydetmiş Olduğun Paketler</h3>
    <div id="saved-sets-list"></div>

    <button onclick="showScreen('main-menu')" class="secondary" style="margin-top:15px;">⬅️ Ana Menüye Dön</button>
  </div>

  
  <div id="set-select-screen" class="card hidden">
    <h2>📦 Hangi Paketi Oynayacaksın?</h2>
    <div id="active-sets-for-game"></div>
    <button onclick="showScreen('main-menu')" class="secondary">⬅️ İptal</button>
  </div>

  
  <div id="classic-game-screen" class="card hidden">
    <h2>🎯 Kelimeyi Tahmin Et</h2>
    
    <div style="text-align: center; margin: 15px 0;">
      <span id="classic-current-word" style="font-size: 32px; font-weight: bold; color: #ffda79;">...</span>
      <button class="speaker-btn" onclick="speakCurrentWord()">🔊</button>
    </div>
    
    <input type="text" id="user-answer" placeholder="Türkçe karşılığını yaz..." autocomplete="off">
    
    <div style="display: flex; gap: 10px;">
      <button onclick="checkClassicAnswer()">Cevapla (Enter)</button>
      <button class="dont-know" onclick="handleDontKnow()">Bilmiyorum</button>
    </div>
    
    <div id="classic-score" style="text-align: center; color: #aaa; margin-top: 15px;">Puan: 0</div>

    
    <div id="repeat-area" class="repeat-box hidden">
      <p id="repeat-info" style="font-weight:bold; color:#f1c40f; margin-top:0;"></p>
      <p style="font-size:13px;">Doğru cevabı 10 kere yazarak pekiştir:</p>
      <input type="text" id="repeat-input" placeholder="Doğru cevabı buraya yaz..." autocomplete="off">
      <div id="repeat-counter" style="font-weight:bold; color:#e67e22; margin-top:5px;">Kalan Tekrar: 10</div>
    </div>
  </div>

  
  <div id="maze-game-screen" class="card hidden">
    <h2>👾 Doğru Kapıya Git!</h2>
    <p style="text-align: center; font-size: 14px; color: #aaa;">Sorulan kelimenin doğru karşılığı hangi kapıda?</p>
    
    <div style="text-align: center; margin: 10px 0;">
      <span id="maze-question" style="font-size: 30px; color: #70a1ff; font-weight: bold;">...</span>
      <button class="speaker-btn" onclick="speakCurrentWord()">🔊</button>
    </div>

    <div id="maze-board">
      
    </div>

    <div id="maze-score" style="text-align: center; font-size: 18px; font-weight: bold;">Puan: 0</div>
  </div>

  
  <div id="result-screen" class="card hidden">
    <h2>🎉 Tebrikler! Oyun Bitti</h2>
    <div id="final-score" style="text-align:center; font-size:22px; margin:20px 0; color:#f1c40f;"></div>
    <button onclick="showScreen('main-menu')">🏠 Ana Menüye Dön</button>
  </div>

  <script>
    let savedWordSets = JSON.parse(localStorage.getItem('lgs_word_sets')) || {
      "Örnek LGS Paketi": [
        { en: "Refuse", tr: "Reddetmek" },
        { en: "Accept", tr: "Kabul etmek" },
        { en: "Invite", tr: "Davet etmek" },
        { en: "Backup", tr: "Desteklemek" }
      ]
    };

    let activeGameWords = [];
    let currentIdx = 0;
    let score = 0;
    let selectedMode = 'classic';
    let repeatLeft = 10;

    renderSavedSets();

    function showScreen(screenId) {
      document.querySelectorAll('.card').forEach(c => c.classList.add('hidden'));
      document.getElementById(screenId).classList.remove('hidden');
    }

    function openGameSelect(mode) {
      selectedMode = mode;
      renderActiveSetsForSelection();
      showScreen('set-select-screen');
    }

    function speak(text, lang = 'en-US') {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const msg = new SpeechSynthesisUtterance(text);
        msg.lang = lang;
        msg.rate = 0.9;
        window.speechSynthesis.speak(msg);
      }
    }

    function speakCurrentWord() {
      if (activeGameWords[currentIdx]) {
        speak(activeGameWords[currentIdx].en, 'en-US');
      }
    }

    function addWordRow() {
      const container = document.getElementById('word-inputs-container');
      const row = document.createElement('div');
      row.className = 'word-row';
      row.innerHTML = `<input type="text" class="en-input" placeholder="İngilizce"><input type="text" class="tr-input" placeholder="Türkçe">`;
      container.appendChild(row);
    }

    function saveCurrentSet() {
      const title = document.getElementById('set-title-input').value.trim() || "Isimsiz Paket " + Date.now();
      const enInputs = document.querySelectorAll('#word-manager-screen .en-input');
      const trInputs = document.querySelectorAll('#word-manager-screen .tr-input');
      
      let list = [];
      for (let i = 0; i < enInputs.length; i++) {
        let en = enInputs[i].value.trim();
        let tr = trInputs[i].value.trim();
        if (en && tr) list.push({ en, tr });
      }

      if (list.length === 0) { alert("En az 1 kelime çifti girmelisiniz!"); return; }

      savedWordSets[title] = list;
      localStorage.setItem('lgs_word_sets', JSON.stringify(savedWordSets));
      alert("Paket Başarıyla Kaydedildi!");
      renderSavedSets();
      document.getElementById('set-title-input').value = "";
    }

    function deleteSet(setName) {
      delete savedWordSets[setName];
      localStorage.setItem('lgs_word_sets', JSON.stringify(savedWordSets));
      renderSavedSets();
    }

    function renderSavedSets() {
      const container = document.getElementById('saved-sets-list');
      container.innerHTML = "";
      Object.keys(savedWordSets).forEach(name => {
        const div = document.createElement('div');
        div.className = 'saved-set-item';
        div.innerHTML = `<span>📖 ${name} (${savedWordSets[name].length} Kelime)</span>
                         <button class="del-btn" onclick="deleteSet('${name}')">Sil</button>`;
        container.appendChild(div);
      });
    }

    function renderActiveSetsForSelection() {
      const container = document.getElementById('active-sets-for-game');
      container.innerHTML = "";
      Object.keys(savedWordSets).forEach(name => {
        const btn = document.createElement('button');
        btn.innerText = `🎮 ${name}`;
        btn.onclick = () => startSelectedGame(name);
        container.appendChild(btn);
      });
    }

    function startSelectedGame(setName) {
      activeGameWords = [...savedWordSets[setName]].sort(() => Math.random() - 0.5);
      currentIdx = 0;
      score = 0;

      if (selectedMode === 'classic') {
        showScreen('classic-game-screen');
        loadClassicWord();
      } else if (selectedMode === 'maze') {
        showScreen('maze-game-screen');
        loadMazeQuestion();
      }
    }

    /* --- KLASİK MOD MANTIGI --- */
    function loadClassicWord() {
      if (currentIdx >= activeGameWords.length) { finishGame(); return; }
      document.getElementById('repeat-area').classList.add('hidden');
      document.getElementById('user-answer').disabled = false;
      document.getElementById('user-answer').value = "";
      
      const q = activeGameWords[currentIdx];
      document.getElementById('classic-current-word').innerText = q.en;
      document.getElementById('classic-score').innerText = "Puan: " + score;
      speak(q.en, 'en-US');
      document.getElementById('user-answer').focus();
    }

    function checkClassicAnswer() {
      const ans = document.getElementById('user-answer').value.trim().toLowerCase();
      const current = activeGameWords[currentIdx];

      if (ans === current.tr.toLowerCase()) {
        score += 10;
        speak("Doğru!", 'tr-TR');
        currentIdx++;
        loadClassicWord();
      } else {
        speak(`Yanlış! Doğrusu: ${current.tr}`, 'tr-TR');
        startRepeat(current);
      }
    }

    function handleDontKnow() {
      const current = activeGameWords[currentIdx];
      speak(`Doğru cevap: ${current.tr}`, 'tr-TR');
      startRepeat(current);
    }

    function startRepeat(wordObj) {
      repeatLeft = 10;
      document.getElementById('user-answer').disabled = true;
      document.getElementById('repeat-area').classList.remove('hidden');
      document.getElementById('repeat-info').innerText = `"${wordObj.en}" = "${wordObj.tr}"`;
      document.getElementById('repeat-counter').innerText = `Kalan Tekrar: ${repeatLeft}`;
      const rInput = document.getElementById('repeat-input');
      rInput.value = "";
      rInput.focus();
    }

    document.getElementById('repeat-input').addEventListener('input', function(e) {
      const current = activeGameWords[currentIdx];
      if (e.target.value.trim().toLowerCase() === current.tr.toLowerCase()) {
        repeatLeft--;
        speak(current.en, 'en-US');
        e.target.value = "";
        if (repeatLeft <= 0) {
          currentIdx++;
          loadClassicWord();
        } else {
          document.getElementById('repeat-counter').innerText = `Kalan Tekrar: ${repeatLeft}`;
        }
      }
    });

    /* --- LABİRENT OYUNU MANTIGI --- */
    function loadMazeQuestion() {
      if (currentIdx >= activeGameWords.length) { finishGame(); return; }
      
      const q = activeGameWords[currentIdx];
      document.getElementById('maze-question').innerText = q.en;
      document.getElementById('maze-score').innerText = "Puan: " + score;
      speak(q.en, 'en-US');

      // Doğru seçeneği ve rastgele yanlış seçenekleri hazırla
      let options = [q.tr];
      let otherWords = activeGameWords.filter(w => w.tr !== q.tr);
      otherWords.sort(() => Math.random() - 0.5);
      
      for (let i = 0; i < Math.min(2, otherWords.length); i++) {
        options.push(otherWords[i].tr);
      }
      options.sort(() => Math.random() - 0.5);

      const board = document.getElementById('maze-board');
      board.innerHTML = "";
      options.forEach(opt => {
        const door = document.createElement('div');
        door.className = 'door';
        door.innerText = `🚪 ${opt}`;
        door.onclick = () => checkMazeAnswer(opt, q.tr);
        board.appendChild(door);
      });
    }

    function checkMazeAnswer(selected, correct) {
      if (selected.toLowerCase() === correct.toLowerCase()) {
        score += 10;
        speak("Aferin! Doğru kapı!", 'tr-TR');
      } else {
        speak(`Yanlış kapı! Doğrusu: ${correct}`, 'tr-TR');
      }
      currentIdx++;
      setTimeout(loadMazeQuestion, 1200);
    }

    function finishGame() {
      showScreen('result-screen');
      document.getElementById('final-score').innerText = `Toplam Puanın: ${score}`;
    }

    document.getElementById('user-answer').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') checkClassicAnswer();
    });
  </script>
</body>
</html>
```

### Your JavaScript

```javascript
._.
```

### Your CSS

```css
._.
```

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

🤖 Cannot save fiddle #2455

Error code

Were you logged in?

Your username (if logged in)

Your HTML

Your JavaScript

Your CSS

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

🤖 Cannot save fiddle #2455

Description

Error code

Were you logged in?

Your username (if logged in)

Your HTML

Your JavaScript

Your CSS

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions