<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Play the free Japanese Kana Quiz game to test and improve your knowledge of Hiragana and Katakana. Challenge yourself with fun quizzes and boost your language skills!">
    <meta name="keywords" content="Japanese, Kana Quiz, Hiragana, Katakana, free game, language learning, Japanese quiz, quiz game">
    <meta name="author" content="Fluency Tool">
    <meta name="robots" content="index, follow">

    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="Kana Quiz - Free Japanese Quiz Game">
    <meta property="og:description" content="Play the free Japanese Kana Quiz game to test and improve your knowledge of Hiragana and Katakana. Challenge yourself with fun quizzes and boost your language skills!">
    <meta property="og:url" content="https://fluencytool.my-senpai.com/games/kana-quiz">
    <meta property="og:image" content="https://fluencytool.my-senpai.com/images/kana_quiz_og_image.png">
    <meta property="og:type" content="game">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Kana Quiz - Free Japanese Quiz Game">
    <meta name="twitter:description" content="Test your knowledge of Hiragana and Katakana in this free and fun Japanese Kana Quiz game!">
    <meta name="twitter:image" content="https://fluencytool.my-senpai.com/images/kana_quiz_og_image.png">

    <link rel="canonical" href="https://fluencytool.my-senpai.com/kanaquiz/">
    <link rel="icon" type="image/png" href="https://fluencytool.my-senpai.com/images/favicon.png">

  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
  <link rel="icon" type="image/png" href="https://fluencytool.my-senpai.com/images/favicon.png">

  <style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  font-family: 'Arial', sans-serif;
  color: #333;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  flex-grow: 1;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
}

#settings_button {
  margin-left: auto;
  background: transparent;
  border: none;
}
.app-wrapper {
  flex-grow: 1;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
}
section {
  margin-bottom: 1rem;
}
section#selection-container, 
section#choices_container, 
section#start_button, 
section#timer_text_view, 
section#correct_counter_text, 
section#incorrect_counter_text, 
section#english_translation, 
section#letter_display, 
section#ic_audio {
  flex-grow: 1;
  flex-shrink: 1;
}

/* Ensure the ad banner stays at the bottom of the page */
section#choices_container + section.mb-3 {
  flex-shrink: 0;
  margin-top: 10px;
}

section.mb-3:last-child {
  margin-bottom: 0;
}


.bg-custom {
  background-color: #f5f5f5;
}

.skull-icon {
  min-height: 20vh;
  width: auto;
  display: block;
  margin: 0 auto;
}

.btn-custom {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.btn-custom:hover {
  background-color: #0056b3;
}
.btn-outline-dark:hover {
  background-color: #007bff;
  color: white;
}
.text-primary-custom {
  color: #007bff;
}

.text-accent-custom {
  color: #ff4081;
}

.dialog {
  display: none;
  width: 80%;
  max-width: 400px;
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
}

.dialog-content {
  padding: 20px;
}

.dialog-icon {
  width: 64px;
  height: 64px;
}

.dialog-title {
  color: #e74c3c;
  font-size: 22px;
  font-weight: bold;
  margin-top: 16px;
}

.dialog-question,
.dialog-correct-answer {
  color: #333;
  font-size: 18px;
  margin-top: 8px;
}

.heart-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.heart {
  width: 40px;
  height: 40px;
  margin: 0 5px;
}

.dialog-ok-button {
  background-color: #3498db;
  color: white;
  font-size: 16px;
  padding: 12px;
  margin-top: 20px;
  width: 100%;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.dialog-ok-button:hover {
  background-color: #2980b9;
}

.btn.active {
  background-color: #007bff;
  color: white;
}
.heart {
  width: 32px;
  height: 32px;
  margin: 0 5px;
}
.mb-3 {
  margin-bottom: 0.5rem !important;
}

header, section {
  flex-shrink: 1;
}
#english_translation {
  max-height: 1.0rem; /* Adjust as needed */
}
@media (max-width: 768px) {
  body {
    padding: 0;
  }

  .app-wrapper {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .ad-banner-container {
    width: 100%;
    left: 0;
    transform: none;
  }

  #ad-banner {
    border-radius: 0;
  }

  h1 {
    font-size: 1.5rem;
  }
}
  </style>
   <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "VideoGame",
      "name": "Kana Quiz - Free Japanese Quiz Game",
      "url": "https://fluencytool.my-senpai.com/kanaquiz/",
      "image": "https://fluencytool.my-senpai.com/kanaquiz/assets/images/kanaquiz.jpg",
      "description": "Test your knowledge of Hiragana and Katakana in this free Japanese Kana Quiz game! Challenge yourself with fun quizzes and boost your language skills.",
      "author": {
        "@type": "Organization",
        "name": "Fluency Tool",
        "logo": {
          "@type": "ImageObject",
          "url": "https://fluencytool.my-senpai.com/images/favicon.png"
        }
      },
      "applicationCategory": "Game",
      "operatingSystem": "All",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD",
        "availability": "https://schema.org/InStock"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "reviewCount": "125"
      }
    }
    </script>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-5SMGNX2X');</script>
    <!-- End Google Tag Manager -->
    <script type="text/javascript">
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "ohdlzocybo");
    </script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-7LJ11861M0"></script>

</head>
<body class="bg-custom">
  <!-- Google Tag Manager (noscript) -->
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5SMGNX2X" height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" style="background-color: white;" id="mainNav">
    <div class="container px-5">
      <a class="navbar-brand fw-bold" href="https://fluencytool.my-senpai.com/">Fluency Tool</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" 
              aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu <i class="bi-list"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="https://fluencytool.my-senpai.com/">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="https://fluencytool.my-senpai.com/blog/">Blog</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
               data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tools</a>
            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
              <a class="dropdown-item custom-dropdown-item" href="https://fluencytool.my-senpai.com/readingtool/">Japanese Analyzer</a>
              <a class="dropdown-item custom-dropdown-item" href="https://fluencytool.my-senpai.com/hangman2/">Hangman Kanji Game</a>
              <a class="dropdown-item custom-dropdown-item" href="https://fluencytool.my-senpai.com/kanaquiz/">Kana Challenge Game</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Main Content Container (adds top padding to account for the fixed navbar) -->
  <div class="container app-wrapper" style="padding-top: 80px;">
    <!-- Title and Settings -->
    <header class="d-flex justify-content-between align-items-center">
      <h1 class="text-primary-custom m-0">Kana Quiz</h1>
      <button id="settings_button" class="btn btn-link p-0 ms-2">
        <img src="assets/images/settings.svg" alt="Settings" style="width:30px; height:30px;">
      </button>
    </header>

    <!-- Selection Container -->
    <div id="selection-container">
      <!-- Script Selection -->
      <section class="mb-3">
        <div class="row g-2">
          <div class="col">
            <button id="hiragana_button" class="btn btn-outline-dark w-100">Hiragana</button>
          </div>
          <div class="col">
            <button id="katakana_button" class="btn btn-outline-dark w-100">Katakana</button>
          </div>
        </div>
      </section>
      <!-- Level Selection -->
      <section class="mb-3">
        <div class="row g-2">
          <div class="col">
            <button id="button_single_sounds" class="btn btn-outline-dark w-100">Single Sounds</button>
          </div>
          <div class="col">
            <button id="button_words" class="btn btn-outline-dark w-100">Words</button>
          </div>
        </div>
      </section>
    </div>

    <!-- Start Button -->
    <section class="mb-3">
      <button id="start_button" class="btn btn-outline-dark w-100">Start</button>
    </section>

    <!-- Timer and Level Text -->
    <section class="mb-3 text-center">
      <p id="timer_text" class="text-accent-custom fs-3 mb-2">00:00</p>
    </section>

    <!-- Correct/Incorrect Counter and Level -->
    <section class="mb-3">
      <div class="row">
        <div class="col-12 col-md-4 text-center">
          <p id="level_text_view" class="text-primary-custom fs-5">Level: 1</p>
        </div>
        <div class="col-12 col-md-4 text-center">
          <p id="correct_counter_text" class="text-success fs-5">Correct: 0</p>
        </div>
        <div class="col-12 col-md-4 text-center">
          <p id="incorrect_counter_text" class="text-danger fs-5">Incorrect: 0</p>
        </div>
      </div>
    </section>

    <!-- English Translation -->
    <section class="mb-3 text-center">
      <p id="english_translation" class="fs-5"></p>
    </section>

    <!-- Kana Letter Display -->
    <section class="mb-3 text-center">
      <h2 id="letter_display" class="fw-bold fs-1"></h2>
    </section>

    <!-- Audio Icon -->
    <section class="mb-3 text-center">
      <img id="ic_audio" src="assets/images/ic_audio.svg" alt="Audio Icon" class="img-fluid" style="width:45px; height:45px;">
    </section>

    <!-- Answer Choices -->
    <section class="mb-3 d-none" id="choices_container">
      <!-- Dynamically generated choice buttons will be appended here -->
    </section>
  </div>

  <!-- Modals -->
  <!-- Incorrect Answer Dialog -->
  <div id="dialog_incorrect_answer" class="dialog">
    <img src="assets/images/ic_incorrect_answer.svg" alt="Incorrect Answer" class="dialog-icon">
    <h2 class="dialog-title">Incorrect Answer</h2>
    <p id="tv_question" class="dialog-question">The question will appear here.</p>
    <p id="tv_correct_answer" class="dialog-correct-answer">The correct answer is: </p>
    <div id="heart_container" class="heart-container">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
    </div>
    <button id="btn_ok" class="dialog-ok-button">OK</button>
  </div>

  <!-- Kana Rows Selection Dialog -->
  <div id="dialog" class="dialog">
    <div class="dialog-content">
      <h2>Select Kana Rows</h2>
      <ul id="row-list" class="list-group mb-3">
        <!-- Dynamically populated rows will go here -->
      </ul>
      <div class="form-check mb-3">
        <input class="form-check-input" type="checkbox" id="select-all-checkbox">
        <label class="form-check-label" for="select-all-checkbox">Select All</label>
      </div>
      <div class="d-grid gap-2">
        <button id="confirm-button" class="btn btn-primary">Confirm</button>
        <button id="close-button" class="btn btn-secondary">Close</button>
      </div>
    </div>
  </div>

  <!-- Game Over Modal -->
  <div id="game-over-dialog" class="modal fade" tabindex="-1" aria-labelledby="game-over-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-danger text-white text-center">
          <h5 class="modal-title w-100" id="game-over-title">Game Over</h5>
        </div>
        <div class="modal-body text-center">
          <img src="assets/images/skull.svg" alt="Game Over Icon" class="skull-icon mb-3">
          <div id="dialog_message"></div>
        </div>
        <div class="modal-footer justify-content-center">
          <button id="btn_exit" type="button" class="btn btn-primary" data-bs-dismiss="modal">Exit</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Settings Modal -->
  <div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header border-0">
          <h5 class="modal-title fw-bold" id="settingsModalLabel">Audio Preferences</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="voicePreferenceForm">
            <fieldset class="mb-3">
              <legend class="small text-muted">Choose a voice:</legend>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="voice" id="voiceMale" value="male">
                <label class="form-check-label" for="voiceMale">Male</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="voice" id="voiceFemale" value="female">
                <label class="form-check-label" for="voiceFemale">Female</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="voice" id="voiceBoth" value="both">
                <label class="form-check-label" for="voiceBoth">Both</label>
              </div>
            </fieldset>
            <hr>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="successSoundToggle">
              <label class="form-check-label" for="successSoundToggle">Play Success Sound</label>
            </div>
          </form>
        </div>
        <div class="modal-footer border-0">
          <button type="button" class="btn btn-primary w-100" id="savePreferences">Save</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="scripts.js"></script>
</body>

</html>
