反対の意味の漢字を当てるゲーム

document.title = '反対の意味の漢字を当てるゲーム';
document.body.style.overflow = 'hidden';

const demo = document.getElementById('demo');

const h1 = document.createElement("h1");
h1.textContent = document.title;
h1.style.textAlign = "center";
demo.appendChild(h1);

const container = document.createElement("div");
demo.appendChild(container);

//js-quiz-kanji-negaposi
let data;
let clearCount = 0;
let remainingQuestions = []; // 問題リスト

fetch("negaposi.json")
  .then(res => res.json())
  .then(json => {
    data = json;
    setStage();
  })
  .catch(err => console.error("JSON読み込み失敗:", err));

function setStage() {
  container.innerHTML = "";

  const quiz = pickQuestion();

  // 中央の大きな文字（positive）
  const centerDiv = document.createElement("div");
  centerDiv.id = "center";
  centerDiv.textContent = quiz.positive;
  centerDiv.style.fontSize = "256px";
  centerDiv.style.textAlign = "center";
  centerDiv.style.marginBottom = "20px";
  container.appendChild(centerDiv);

  // ボタンエリア
  const optionsDiv = document.createElement("div");
  optionsDiv.style.display = "grid";
  optionsDiv.style.gridTemplateColumns = "repeat(5, 1fr)";
  optionsDiv.style.gap = "2px";
  optionsDiv.style.maxWidth = "800px";
  optionsDiv.style.margin = "0 auto";


  quiz.options.forEach(k => {
    const btn = document.createElement("button");
    btn.textContent = k;
    btn.style.padding = "5px";
    btn.style.fontSize = "48px";

    btn.onclick = () => {
      onCheckMeaning(quiz); // 任意の処理（必要であれば）

      document.getElementById('center').textContent = quiz.positive;

      if (k === quiz.correct) {
        btn.style.backgroundColor = 'lightgreen';
        document.getElementById('result').textContent = '正解！';
        clearCount++;
      } else {
        btn.style.backgroundColor = 'lightcoral';
        document.getElementById('result').textContent = '不正解…';
        clearCount--;

        // 正解を強調
        Array.from(optionsDiv.children).forEach(b => {
          if (b.textContent === quiz.correct) {
            b.style.backgroundColor = 'lightgreen';
          }
        });
      }

      // 次の問題に移る前に一時的にロックしてから再表示
      if (k === quiz.correct) {
        setTimeout(setStage, 500);
      } else {
        setTimeout(setStage, 3000);
      }
    };

    optionsDiv.appendChild(btn);
  });

  container.appendChild(optionsDiv);

  // 結果表示領域
  const resultDiv = document.createElement("div");
  resultDiv.id = "result";
  resultDiv.style.textAlign = "center";
  resultDiv.style.fontSize = "24px";
  resultDiv.style.marginTop = "20px";
  container.appendChild(resultDiv);
}

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

function pickQuestion() {
  //const question = data[Math.floor(Math.random() * data.length)];
  if (remainingQuestions.length === 0) {
    // 全部使い切ったらシャッフルしてリセット
    remainingQuestions = [...data];
    shuffleArray(remainingQuestions);
  }

  // 先頭から1つ取り出す
  const question = remainingQuestions.pop();

  const correct = question.negative;
  const allNegatives = data.map(pair => pair.negative);
  const choices = new Set([correct]);

  while (choices.size < 20) {
    const rand = allNegatives[Math.floor(Math.random() * allNegatives.length)];
    choices.add(rand);
  }

  return {
    positive: question.positive,
    correct,
    options: shuffle([...choices])
  };
}


function shuffle(arr) {
  return arr.sort(() => Math.random() - 0.5);
}

function onCheckMeaning(quiz) {
  //
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/game/quiz-kanji-negaposi/