<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>英単語クイズ Stochastion.org</title>
  <meta name="description" content="英単語のスペル・発音を学べる 自動採点 記入式 長時間使用しても疲れない配色 間違えた問題は正解するまで出題し続けます。間違えたスペルの入力は自動で弾きます。">
  <meta name="keywords" content="英単語,学習,サイト,発音,どうすれば,方法,問題,一覧,まとめ,中学,高校,大学受験,英検,tofle">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="styles.css">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4424522357835237"
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <!-- XLSX ライブラリ -->
</head>
<body>
  <div class="top-container">
    <h3 class="top-container-title">Stochastion.org</h3> <!-- 追加: 難易度選択のタイトル -->
    <a href="guide/concept.html">
      <button id="HowtouseStocationorg" class="">使い方</button>
    </a>
    <div class="coin-info">
      <h3 class="Currentnumberofcoins">コイン数</h3>
      <p id="coin-count">0</p>
    </div>
    
    <div class="level-info">
      <h3 class="currentlevel">レベル</h3>
      <p id="level-name">normal</p>
    </div>

      <div id="progress-bar-container">
        <div id="progress-bar"></div>
      </div>
      <h3 class="top-container-caution">※正答以外の文字を入力しても表示されません</h3> <!-- 追加 -->
  </div>
  <div class="container">
    <div class="sidebar">
      <h3 class="difficultyselection">難易度選択</h3> <!-- 追加: 難易度選択のタイトル -->
      <button class="level-btn">中学</button>
      <button class="level-btn">高校1年</button>
      <button class="level-btn">高校2年</button>
      <button class="level-btn">国立大受験</button>
      <button class="level-btn">英検1級</button>
      <button class="level-btn">英検準1級</button>
      <button class="level-btn">英検2級</button>
      <button class="level-btn">英検準2級</button>
      <button class="level-btn">英検3級</button>
      <button class="level-btn">GTEC対策</button>
      <button class="level-btn">TOEIC対策</button>
    </div>
  
    <div class="main-content">
      <div class="question">
        <p id="japanese-word">ここに日本語が表示されます</p>
      </div>
      <div class="centered-container">
        <input type="text" id="wordInput" placeholder="スマホユーザーはここをタップ">
      </div>
      <div id="answer-container">
        <!-- JavaScriptで動的に生成 -->
      </div>
    </div>

    <div class="correct-sidebar">
      <div class="correct-info">
        <h3 class="Numberofcorrectanswerstoday">正解数</h3>
        <p id="correct-count">0</p>
      </div>
      

      

      
      <div id="cat-container">
        <div id="cat-message"></div>
        <div id="cat"></div>
      </div>
      <button id="download-mistakes" class="level-btn">間違えた問題をダウンロード</button> <!-- 追加: ダウンロードボタン -->
      <a href="https://stochastion.org/kobun-project/index.html">
        <button id="" class="kobuntango">古文単語</button>
      </a>
      <a href="https://stochastion.org/chemistry-project/index.html">
        <button id="" class="kobuntango">化学</button>
      </a>

    </div>
  </div>

  <div class="mistake-container">
    <div class="mistake-table-title-container">
      <h3 class="mistake-table-title">間違えた問題</h3>
      <h3 class="pressthespacebar">※わからない場合はスペースキーを押してね</h3>
    </div>
    <table id="mistake-table">
      <thead>
        <tr>
          <th>日本語</th>
          <th>正答（英語）</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

  <div id="circle" class="hidden"></div>
  <div id="combo-display" class="hidden"></div> <!-- 追加: コンボ表示 -->
  <audio id="correct-sound" src="correct-answer.mp3" preload="auto"></audio>
  <script src="script.js"></script>
</body>
</html>