<!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/kanaquiz/assets/images/kanaquiz.jpg">
      <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/kanaquiz/assets/images/kanaquiz.jpg">
      <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>