☰

Extra Practice

Practice your current level's Radicals and Kanji with standard, english -> Kanji, and combination mode!

  1. (function () {
  2.     'use strict';
  3.  
  4.     // ==UserScript==
  5.     // @name         Extra Practice
  6.     // @namespace    https://github.com/mrpassiontea/Extra-Practice
  7.     // @version      2.0.0
  8.     // @description  Practice your current level's Radicals and Kanji with standard, english -> Kanji, and combination mode!
  9.     // @author       @mrpassiontea
  10.     // @match        https://www.wanikani.com/
  11.     // @match        *://*.wanikani.com/dashboard
  12.     // @match        *://*.wanikani.com/dashboard?*
  13.     // @copyright    2025, mrpassiontea
  14.     // @grant        none
  15.     // @grant        window.onurlchange
  16.     // @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js
  17.     // @require      https://unpkg.com/wanakana@5.3.1/wanakana.min.js
  18.     // @license      MIT; http://opensource.org/licenses/MIT
  19.     // @run-at       document-end
  20.     // ==/UserScript==
  21.  
  22.  
  23.     const SELECTORS = {
  24.         DIV_LEVEL_PROGRESS_CONTENT: "div.wk-panel__content div.level-progress-dashboard",
  25.         DIV_CONTENT_WRAPPER: "div.level-progress-dashboard__content",
  26.         DIV_CONTENT_TITLE: "div.level-progress-dashboard__content-title"
  27.     };
  28.  
  29.     const DB_VALUES = {
  30.         DB_NAME: "wkof.file_cache",
  31.         USER_RECORD: "Apiv2.user",
  32.         SUBJECT_RECORD: "Apiv2.subjects",
  33.         FILE_STORE: "files"
  34.     };
  35.  
  36.     const DB_ERRORS = {
  37.         OPEN: "Failed to open database",
  38.         USER_LEVEL: "Failed to retrieve user level",
  39.         SUBJECT_DATA: "Failed to retrieve subjects data"
  40.     };
  41.  
  42.     const PRACTICE_MODES = {
  43.         STANDARD: 'standard',
  44.         ENGLISH_TO_KANJI: 'englishToKanji',
  45.         COMBINED: 'combined'
  46.     };
  47.  
  48.     const modalTemplate = `
  49.     <div id="ep-practice-modal">
  50.         <div id="ep-practice-modal-content">
  51.             <div id="ep-practice-modal-welcome">
  52.                 <h1>Hello, <span id="username"></span></h1>
  53.                 <h2>Please select all the Radicals that you would like to include in your practice session</h2>
  54.             </div>
  55.             <button id="ep-practice-modal-select-all">Select All</button>
  56.             <div id="ep-practice-modal-grid"></div>
  57.             <div id="ep-practice-modal-footer">
  58.                 <button id="ep-practice-modal-start" disabled>Start Review (0 Selected)</button>
  59.                 <button id="ep-practice-modal-close">Exit</button>
  60.             </div>
  61.         </div>
  62.     </div>
  63. `;
  64.  
  65.     const reviewModalTemplate = `
  66.     <div id="ep-review-modal">
  67.         <div id="ep-review-modal-wrapper">
  68.             <div id="ep-review-modal-header">
  69.                 <div id="ep-review-progress">
  70.                     <span id="ep-review-progress-correct">0</span>
  71.                 </div>
  72.                 <button id="ep-review-exit">End Review</button>
  73.             </div>
  74.  
  75.             <div id="ep-review-content">
  76.                 <div id="ep-review-character"></div>
  77.  
  78.                 <div id="ep-review-input-section">
  79.                     <input type="text" id="ep-review-answer" placeholder="Enter meaning..." tabindex="1" autofocus />
  80.                     <button id="ep-review-submit" tabindex="2">Submit</button>
  81.                 </div>
  82.  
  83.                 <div id="ep-review-result" style="display: none;">
  84.                     <div id="ep-review-result-message"></div>
  85.                     <button id="ep-review-show-hint" style="display: none;">Show Answer</button>
  86.                 </div>
  87.  
  88.                 <div id="ep-review-explanation" style="display: none;">
  89.                     <h3>
  90.                         <span id="ep-review-meaning-label">Meaning:</span>
  91.                         <span id="ep-review-meaning"></span>
  92.                     </h3>
  93.                     <div class="mnemonic-container">
  94.                         <span id="ep-review-mnemonic-label">Mnemonic:</span>
  95.                         <div id="ep-review-mnemonic"></div>
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.         </div>
  100.     </div>
  101. `;
  102.  
  103.     // Theme constants for consistent values across the application
  104.     const theme = {
  105.         colors: {
  106.             radical: "#0598e4",
  107.             kanji: "#eb019c",
  108.             white: "#FFFFFF",
  109.             black: "#000000",
  110.             gray: {
  111.                 100: "#F3F4F6",
  112.                 200: "#E5E7EB",
  113.                 300: "#D1D5DB",
  114.                 400: "#9CA3AF",
  115.                 600: "#4B5563",
  116.                 700: "#374151",
  117.                 800: "#1F2937"},
  118.             overlay: {
  119.                 dark: "rgba(0, 0, 0, 0.9)"},
  120.             success: "#10B981",
  121.             error: "#EF4444",
  122.             info: "#3B82F6"
  123.         },
  124.         spacing: {
  125.             xs: "0.5rem",    // 8px
  126.             sm: "0.75rem",   // 12px
  127.             md: "1rem",      // 16px
  128.             lg: "1.5rem",    // 24px
  129.             xl: "2rem"},
  130.         typography: {
  131.             fontSize: {
  132.                 xs: "0.875rem",    // 14px
  133.                 sm: "1rem",        // 16px
  134.                 md: "1.25rem",     // 20px
  135.                 lg: "1.5rem",      // 24px
  136.                 xl: "2rem",        // 32px
  137.                 "2xl": "6rem"      // 96px (for the big character display)
  138.             },
  139.             fontWeight: {
  140.                 normal: "400",
  141.                 medium: "500",
  142.                 bold: "700"
  143.             }
  144.         },
  145.         borderRadius: {
  146.             sm: "3px",
  147.             md: "4px",
  148.             lg: "8px"
  149.         },
  150.         zIndex: {
  151.             modal: 99999
  152.         }
  153.     };
  154.  
  155.     // Common style mixins for reusable patterns
  156.     const mixins = {
  157.         modalBackdrop: {
  158.             position: "fixed",
  159.             top: "0",
  160.             left: "0",
  161.             width: "100%",
  162.             height: "100%",
  163.             zIndex: theme.zIndex.modal
  164.         }};
  165.  
  166.     // Component-specific styles
  167.     const styles = {
  168.         layout: {
  169.             contentTitle: {
  170.                 display: "flex",
  171.                 justifyContent: "space-between",
  172.                 alignItems: "center"
  173.             }
  174.         },
  175.  
  176.         buttons: {
  177.             practice: {
  178.                 radical: {
  179.                     marginBottom: theme.spacing.md,
  180.                     backgroundColor: theme.colors.radical,
  181.                     padding: theme.spacing.sm,
  182.                     borderRadius: theme.borderRadius.sm,
  183.                     color: theme.colors.white,
  184.                     fontWeight: theme.typography.fontWeight.medium,
  185.                     cursor: "pointer"
  186.                 },
  187.                 kanji: {
  188.                     marginBottom: theme.spacing.md,
  189.                     backgroundColor: theme.colors.kanji,
  190.                     padding: theme.spacing.sm,
  191.                     borderRadius: theme.borderRadius.sm,
  192.                     color: theme.colors.white,
  193.                     fontWeight: theme.typography.fontWeight.medium,
  194.                     cursor: "pointer"
  195.                 }
  196.             }
  197.         },
  198.  
  199.         practiceModal: {
  200.             backdrop: {
  201.                 ...mixins.modalBackdrop,
  202.                 backgroundColor: theme.colors.overlay.dark,
  203.                 display: "flex",
  204.                 flexDirection: "column",
  205.                 justifyContent: "center",
  206.                 alignItems: "center"
  207.             },
  208.             contentWrapper: {
  209.                 width: "100%",
  210.                 maxWidth: "800px",
  211.                 padding: `0 ${theme.spacing.xl}`,
  212.                 display: "flex",
  213.                 flexDirection: "column",
  214.                 alignItems: "center"
  215.             },
  216.             welcomeText: {
  217.                 container: {
  218.                     color: theme.colors.white,
  219.                     textAlign: "center",
  220.                     fontSize: theme.typography.fontSize.sm,
  221.                     marginBottom: theme.spacing.md,
  222.                     display: "flex",
  223.                     flexDirection: "column",
  224.                     alignItems: "center",
  225.                     maxWidth: "750px"
  226.                 },
  227.                 username: {
  228.                     fontSize: theme.typography.fontSize.xl,
  229.                     marginBottom: theme.spacing.md
  230.                 }
  231.             },
  232.             grid: {
  233.                 display: "grid",
  234.                 gridTemplateColumns: "repeat(5, minmax(100px, 1fr))",
  235.                 gap: theme.spacing.md,
  236.                 padding: `${theme.spacing.md} ${theme.spacing.xl}`,
  237.                 maxHeight: "50vh",
  238.                 maxWidth: "600px",
  239.                 margin: "0 auto",
  240.                 justifyContent: "center"
  241.             },
  242.             radical: {
  243.                 base: {
  244.                     background: "rgba(255, 255, 255, 0.1)",
  245.                     border: "2px solid rgba(255, 255, 255, 0.2)",
  246.                     borderRadius: theme.borderRadius.lg,
  247.                     padding: theme.spacing.md,
  248.                     cursor: "pointer",
  249.                     display: "flex",
  250.                     flexDirection: "column",
  251.                     alignItems: "center",
  252.                     transition: "all 0.2s ease"
  253.                 },
  254.                 selected: {
  255.                     background: "rgba(5, 152, 228, 0.3)",
  256.                     border: `2px solid ${theme.colors.radical}`
  257.                 },
  258.                 character: {
  259.                     fontSize: theme.typography.fontSize.xl,
  260.                     color: theme.colors.white
  261.                 }},
  262.             buttons: {
  263.                 start: {
  264.                     base: {
  265.                         padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
  266.                         borderRadius: theme.borderRadius.md,
  267.                         border: "none",
  268.                         fontWeight: theme.typography.fontWeight.medium,
  269.                         transition: "all 0.2s ease",
  270.                         cursor: "pointer",
  271.                         color: theme.colors.white
  272.                     },
  273.                     radical: {
  274.                         backgroundColor: theme.colors.radical,
  275.                         '&:hover': {
  276.                             backgroundColor: theme.colors.radical,
  277.                             opacity: 0.9
  278.                         }
  279.                     },
  280.                     kanji: {
  281.                         backgroundColor: theme.colors.kanji,
  282.                         '&:hover': {
  283.                             backgroundColor: theme.colors.kanji,
  284.                             opacity: 0.9
  285.                         }
  286.                     }
  287.                 },
  288.                 selectAll: {
  289.                     color: theme.colors.white,
  290.                     background: "transparent",
  291.                     border: `1px solid ${theme.colors.white}`,
  292.                     cursor: "pointer",
  293.                     fontSize: theme.typography.fontSize.xs,
  294.                     marginBottom: theme.spacing.md,
  295.                     padding: theme.spacing.sm,
  296.                     borderRadius: theme.borderRadius.sm,
  297.                     fontWeight: theme.typography.fontWeight.bold,
  298.                     transition: "all 0.2s ease"
  299.                 },
  300.                 exit: {
  301.                     border: `1px solid ${theme.colors.white}`,
  302.                     backgroundColor: "rgba(255, 255, 255, 0.9)",
  303.                     padding: `${theme.spacing.sm} ${theme.spacing.md}`,
  304.                     color: theme.colors.black,
  305.                     fontWeight: theme.typography.fontWeight.medium,
  306.                     borderRadius: theme.borderRadius.sm,
  307.                     cursor: "pointer",
  308.                     transition: "all 0.2s ease"
  309.                 }
  310.             },
  311.             footer: {
  312.                 padding: `${theme.spacing.md} ${theme.spacing.xl}`,
  313.                 display: "flex",
  314.                 justifyContent: "center",
  315.                 width: "100%",
  316.                 maxWidth: "600px",
  317.                 gap: theme.spacing.md
  318.             },
  319.             modeSelector: {
  320.                 container: {
  321.                     display: "flex",
  322.                     flexDirection: "column",
  323.                     alignItems: "center",
  324.                     marginBottom: theme.spacing.xl,
  325.                     width: "100%",
  326.                     maxWidth: "600px"
  327.                 },
  328.                 label: {
  329.                     color: theme.colors.white,
  330.                     fontSize: theme.typography.fontSize.md,
  331.                     marginBottom: theme.spacing.md
  332.                 },
  333.                 options: {
  334.                     display: "flex",
  335.                     gap: theme.spacing.md,
  336.                     justifyContent: "center",
  337.                     width: "100%"
  338.                 },
  339.                 option: {
  340.                     base: {
  341.                         padding: `${theme.spacing.sm} ${theme.spacing.md}`,
  342.                         borderRadius: theme.borderRadius.md,
  343.                         border: `2px solid ${theme.colors.gray[400]}`,
  344.                         backgroundColor: "transparent",
  345.                         color: theme.colors.white,
  346.                         cursor: "pointer",
  347.                         transition: "all 0.2s ease",
  348.                         fontSize: theme.typography.fontSize.sm,
  349.                         fontWeight: theme.typography.fontWeight.medium,
  350.                         '&:hover': {
  351.                             borderColor: theme.colors.kanji,
  352.                             backgroundColor: "rgba(235, 1, 156, 0.1)"
  353.                         }
  354.                     },
  355.                     selected: {
  356.                         borderColor: theme.colors.kanji,
  357.                         backgroundColor: "rgba(235, 1, 156, 0.2)"
  358.                     }
  359.                 }
  360.             }},
  361.  
  362.         reviewModal: {
  363.             container: {
  364.                 backgroundColor: theme.colors.white,
  365.                 borderRadius: theme.borderRadius.lg,
  366.                 boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
  367.                 maxWidth: "600px",
  368.                 width: "100%",
  369.                 display: "flex",
  370.                 flexDirection: "column"
  371.             },
  372.             header: {
  373.                 display: "flex",
  374.                 justifyContent: "space-between",
  375.                 alignItems: "center",
  376.                 padding: theme.spacing.lg,
  377.                 borderBottom: `1px solid ${theme.colors.gray[200]}`,
  378.                 gap: theme.spacing.md
  379.             },
  380.             progress: {
  381.                 fontWeight: theme.typography.fontWeight.bold,
  382.                 fontSize: theme.typography.fontSize.md,
  383.                 color: theme.colors.gray[800]
  384.             },
  385.             content: {
  386.                 padding: theme.spacing.xl,
  387.                 display: "flex",
  388.                 flexDirection: "column",
  389.                 width: "100%",
  390.                 gap: theme.spacing.xl,
  391.             },
  392.             character: {
  393.                 fontSize: theme.typography.fontSize["2xl"],
  394.                 color: theme.colors.gray[800],
  395.                 marginBottom: theme.spacing.xl,
  396.                 textAlign: "center"
  397.             },
  398.             inputSection: {
  399.                 width: "100%",
  400.                 display: "flex",
  401.                 gap: theme.spacing.md,
  402.                 marginBottom: theme.spacing.xl
  403.             },
  404.             input: {
  405.                 flex: "1",
  406.                 padding: theme.spacing.sm,
  407.                 fontSize: theme.typography.fontSize.sm,
  408.                 borderRadius: theme.borderRadius.md,
  409.                 border: `1px solid ${theme.colors.gray[300]}`
  410.             },
  411.             buttons: {
  412.                 submit: {
  413.                     backgroundColor: theme.colors.info,
  414.                     color: theme.colors.white,
  415.                     padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
  416.                     borderRadius: theme.borderRadius.md,
  417.                     border: "none",
  418.                     fontWeight: theme.typography.fontWeight.medium,
  419.                     cursor: "pointer",
  420.                     transition: "background-color 0.2s ease",
  421.                     "&:hover": {
  422.                         backgroundColor: "#2563EB"
  423.                     }
  424.                 },
  425.                 exit: {
  426.                     backgroundColor: "transparent",
  427.                     color: theme.colors.kanji,
  428.                     border: `1px solid ${theme.colors.kanji}`,
  429.                     borderRadius: theme.borderRadius.md,
  430.                     padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
  431.                     fontWeight: theme.typography.fontWeight.medium,
  432.                     cursor: "pointer",
  433.                     transition: "background-color 0.2s ease",
  434.                     "&:hover": {
  435.                         backgroundColor: theme.colors.gray[100]
  436.                     }
  437.                 },
  438.                 hint: {
  439.                     backgroundColor: "transparent",
  440.                     color: theme.colors.info,
  441.                     border: `1px solid ${theme.colors.info}`,
  442.                     borderRadius: theme.borderRadius.md,
  443.                     padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
  444.                     cursor: "pointer",
  445.                     transition: "background-color 0.2s ease",
  446.                     "&:hover": {
  447.                         backgroundColor: theme.colors.gray[100]
  448.                     }
  449.                 }
  450.             },
  451.             results: {
  452.                 message: {
  453.                     fontSize: theme.typography.fontSize.lg,
  454.                     fontWeight: theme.typography.fontWeight.bold,
  455.                     marginBottom: theme.spacing.md,
  456.                     color: theme.colors.info,
  457.                     textAlign: "center",
  458.                     "&.correct": {
  459.                         color: theme.colors.success
  460.                     },
  461.                     "&.incorrect": {
  462.                         color: theme.colors.error
  463.                     }
  464.                 }
  465.             },
  466.             explanation: {
  467.                 lineHeight: "1.6",
  468.                 color: theme.colors.gray[600],
  469.                 fontSize: theme.typography.fontSize.md,
  470.                 meaningLabel: {
  471.                     display: "inline-block",
  472.                     fontWeight: theme.typography.fontWeight.normal,
  473.                     fontSize: theme.typography.fontSize.md,
  474.                     color: theme.colors.gray[800],
  475.                     marginRight: theme.spacing.xs
  476.                 },
  477.                 meaningText: {
  478.                     display: "inline-block",
  479.                     fontWeight: theme.typography.fontWeight.bold,
  480.                     fontSize: theme.typography.fontSize.md,
  481.                     color: theme.colors.radical[800],
  482.                     textDecoration: "none"
  483.                 },
  484.                 mnemonicContainer: {
  485.                     marginTop: theme.spacing.md,
  486.                     textAlign: "left",
  487.                     lineHeight: "1.6"
  488.                 },
  489.                 mnemonicLabel: {
  490.                     display: "block",
  491.                     fontWeight: theme.typography.fontWeight.bold,
  492.                     fontSize: theme.typography.fontSize.md,
  493.                     color: theme.colors.gray[800],
  494.                     marginBottom: theme.spacing.xs
  495.                 },
  496.                 mnemonic: {
  497.                     color: theme.colors.gray[600],
  498.                     fontSize: theme.typography.fontSize.md
  499.                 },
  500.                 mnemonicHighlight: {
  501.                     backgroundColor: theme.colors.gray[200],
  502.                     padding: `0 ${theme.spacing.xs}`,
  503.                     borderRadius: theme.borderRadius.sm,
  504.                     color: theme.colors.gray[800]
  505.                 }
  506.             },
  507.             kanjiOption: {
  508.                 base: {
  509.                     padding: theme.spacing.lg,
  510.                     borderRadius: theme.borderRadius.md,
  511.                     border: `2px solid ${theme.colors.gray[300]}`,
  512.                     backgroundColor: theme.colors.white,
  513.                     display: "flex",
  514.                     alignItems: "center",
  515.                     justifyContent: "center",
  516.                     transition: "all 0.2s ease",
  517.                     '&:hover': {
  518.                         borderColor: theme.colors.kanji,
  519.                         backgroundColor: "rgba(235, 1, 156, 0.1)"
  520.                     }
  521.                 },
  522.                 selected: {
  523.                     borderColor: theme.colors.kanji,
  524.                     backgroundColor: "rgba(235, 1, 156, 0.2)"
  525.                 }
  526.             }
  527.         }
  528.     };
  529.  
  530.     const PRACTICE_TYPES = {
  531.         RADICAL: "radical",
  532.         KANJI: "kanji"
  533.     };
  534.  
  535.     const MODAL_STATES$1 = {
  536.         READY: "ready"
  537.     };
  538.  
  539.     const EVENTS$1 = {
  540.         CLOSE: "close",
  541.         START_REVIEW: "startReview"
  542.     };
  543.  
  544.     class BaseReviewSession {
  545.         constructor(selectedItems) {
  546.             if (new.target === BaseReviewSession) {
  547.                 throw new Error("BaseReviewSession is an abstract class and cannot be instantiated directly.");
  548.             }
  549.             this.originalItems = selectedItems;
  550.             this.currentItem = null;
  551.         }
  552.  
  553.         shuffleArray(array) {
  554.             for (let i = array.length - 1; i > 0; i--) {
  555.                 const j = Math.floor(Math.random() * (i + 1));
  556.                 [array[i], array[j]] = [array[j], array[i]];
  557.             }
  558.             return array;
  559.         }
  560.  
  561.         nextItem() {
  562.             throw new Error("nextItem() must be implemented by derived classes");
  563.         }
  564.  
  565.         checkAnswer(userAnswer) {
  566.             throw new Error("checkAnswer() must be implemented by derived classes");
  567.         }
  568.  
  569.         isComplete() {
  570.             throw new Error("isComplete() must be implemented by derived classes");
  571.         }
  572.  
  573.         getProgress() {
  574.             throw new Error("getProgress() must be implemented by derived classes");
  575.         }
  576.     }
  577.  
  578.     class KanjiReviewSession extends BaseReviewSession {
  579.         constructor(config) {
  580.             super(config.items);
  581.             this.mode = config.mode || PRACTICE_MODES.STANDARD;
  582.             this.allUnlockedKanji = config.allUnlockedKanji || [];
  583.             this.allCards = [];
  584.             this.remainingItems = [];
  585.             
  586.             // Progress tracking
  587.             this.correctMeanings = new Set();
  588.             this.correctReadings = new Set();
  589.             this.correctRecognition = new Set();
  590.             
  591.             // Initialize cards based on mode
  592.             this.initializeCards();
  593.         }
  594.  
  595.         initializeCards() {
  596.             switch (this.mode) {
  597.                 case PRACTICE_MODES.STANDARD:
  598.                     this.initializeStandardCards();
  599.                     break;
  600.                 case PRACTICE_MODES.ENGLISH_TO_KANJI:
  601.                     this.initializeRecognitionCards();
  602.                     break;
  603.                 case PRACTICE_MODES.COMBINED:
  604.                     this.initializeStandardCards();
  605.                     this.initializeRecognitionCards();
  606.                     break;
  607.             }
  608.             
  609.             // Shuffle all cards together
  610.             this.remainingItems = this.shuffleArray([...this.allCards]);
  611.         }
  612.  
  613.         initializeStandardCards() {
  614.             this.originalItems.forEach(kanji => {
  615.                 // Add meaning card
  616.                 this.allCards.push({
  617.                     ...kanji,
  618.                     type: "meaning",
  619.                     questionType: "What is the meaning of this kanji?"
  620.                 });
  621.                 
  622.                 // Add reading card
  623.                 this.allCards.push({
  624.                     ...kanji,
  625.                     type: "reading",
  626.                     questionType: "What is the reading of this kanji?"
  627.                 });
  628.             });
  629.         }
  630.  
  631.         initializeRecognitionCards() {
  632.             this.originalItems.forEach(kanji => {
  633.                 const primaryMeaning = kanji.meanings.find(m => m.primary)?.meaning;
  634.                 
  635.                 // Create recognition card
  636.                 this.allCards.push({
  637.                     ...kanji,
  638.                     type: "recognition",
  639.                     questionType: "Select the kanji that means",
  640.                     meaningToMatch: primaryMeaning,
  641.                     options: this.generateKanjiOptions(kanji)
  642.                 });
  643.             });
  644.         }
  645.  
  646.         generateKanjiOptions(correctKanji) {
  647.             const numberOfOptions = 4;
  648.             const options = [correctKanji];
  649.             
  650.             // Create a pool of incorrect options from the selected kanji
  651.             const availableOptions = this.originalItems.filter(k => k.id !== correctKanji.id);
  652.  
  653.             
  654.             // Randomly select additional options from the available pool
  655.             while (options.length < numberOfOptions && availableOptions.length > 0) {
  656.                 const randomIndex = Math.floor(Math.random() * availableOptions.length);
  657.                 const selectedOption = availableOptions[randomIndex];
  658.                 options.push(selectedOption);
  659.                 availableOptions.splice(randomIndex, 1);
  660.             }
  661.  
  662.             // If we still need more options (rare case when very few kanji are selected)
  663.             // fill remaining slots with kanji from allUnlockedKanji
  664.             if (options.length < numberOfOptions) {
  665.                 const additionalOptions = this.allUnlockedKanji.filter(k => 
  666.                     !options.some(selected => selected.id === k.id) && 
  667.                     !this.originalItems.some(selected => selected.id === k.id)
  668.                 );
  669.  
  670.                 while (options.length < numberOfOptions && additionalOptions.length > 0) {
  671.                     const randomIndex = Math.floor(Math.random() * additionalOptions.length);
  672.                     const selectedOption = additionalOptions[randomIndex];
  673.                     options.push(selectedOption);
  674.                     additionalOptions.splice(randomIndex, 1);
  675.                 }
  676.             }
  677.             
  678.             return this.shuffleArray(options);
  679.         }
  680.  
  681.         nextItem() {
  682.             if (this.remainingItems.length === 0) {
  683.                 // Get items that haven't been answered correctly
  684.                 const remainingUnlearned = [];
  685.                 
  686.                 this.originalItems.forEach(kanji => {
  687.                     switch (this.mode) {
  688.                         case PRACTICE_MODES.STANDARD:
  689.                             if (!this.correctMeanings.has(kanji.id)) {
  690.                                 remainingUnlearned.push({
  691.                                     ...kanji,
  692.                                     type: "meaning",
  693.                                     questionType: "What is the meaning of this kanji?"
  694.                                 });
  695.                             }
  696.                             if (!this.correctReadings.has(kanji.id)) {
  697.                                 remainingUnlearned.push({
  698.                                     ...kanji,
  699.                                     type: "reading",
  700.                                     questionType: "What is the reading of this kanji?"
  701.                                 });
  702.                             }
  703.                             break;
  704.                         case PRACTICE_MODES.ENGLISH_TO_KANJI:
  705.                             if (!this.correctRecognition.has(kanji.id)) {
  706.                                 const primaryMeaning = kanji.meanings.find(m => m.primary)?.meaning;
  707.                                 remainingUnlearned.push({
  708.                                     ...kanji,
  709.                                     type: "recognition",
  710.                                     questionType: "Select the kanji that means",
  711.                                     meaningToMatch: primaryMeaning,
  712.                                     options: this.generateKanjiOptions(kanji)
  713.                                 });
  714.                             }
  715.                             break;
  716.                         case PRACTICE_MODES.COMBINED:
  717.                             if (!this.correctMeanings.has(kanji.id)) {
  718.                                 remainingUnlearned.push({
  719.                                     ...kanji,
  720.                                     type: "meaning",
  721.                                     questionType: "What is the meaning of this kanji?"
  722.                                 });
  723.                             }
  724.                             if (!this.correctReadings.has(kanji.id)) {
  725.                                 remainingUnlearned.push({
  726.                                     ...kanji,
  727.                                     type: "reading",
  728.                                     questionType: "What is the reading of this kanji?"
  729.                                 });
  730.                             }
  731.                             if (!this.correctRecognition.has(kanji.id)) {
  732.                                 const primaryMeaning = kanji.meanings.find(m => m.primary)?.meaning;
  733.                                 remainingUnlearned.push({
  734.                                     ...kanji,
  735.                                     type: "recognition",
  736.                                     questionType: "Select the kanji that means",
  737.                                     meaningToMatch: primaryMeaning,
  738.                                     options: this.generateKanjiOptions(kanji)
  739.                                 });
  740.                             }
  741.                             break;
  742.                     }
  743.                 });
  744.  
  745.                 // Shuffle the remaining items
  746.                 if (remainingUnlearned.length > 0) {
  747.                     this.remainingItems = this.shuffleArray(remainingUnlearned);
  748.                 }
  749.             }
  750.  
  751.             this.currentItem = this.remainingItems.shift();
  752.             return this.currentItem;
  753.         }
  754.  
  755.         checkAnswer(userAnswer) {
  756.             if (!this.currentItem) return false;
  757.  
  758.             let isCorrect = false;
  759.  
  760.             switch (this.currentItem.type) {
  761.                 case "meaning":
  762.                     isCorrect = this.checkMeaningAnswer(userAnswer);
  763.                     if (isCorrect) this.correctMeanings.add(this.currentItem.id);
  764.                     break;
  765.                     
  766.                 case "reading":
  767.                     isCorrect = this.checkReadingAnswer(userAnswer);
  768.                     if (isCorrect) this.correctReadings.add(this.currentItem.id);
  769.                     break;
  770.                     
  771.                 case "recognition":
  772.                     isCorrect = parseInt(userAnswer) === this.currentItem.id;
  773.                     if (isCorrect) this.correctRecognition.add(this.currentItem.id);
  774.                     break;
  775.             }
  776.  
  777.             return isCorrect;
  778.         }
  779.  
  780.         checkMeaningAnswer(userAnswer) {
  781.             const normalizedUserAnswer = userAnswer.toLowerCase().trim();
  782.             
  783.             // Check primary meanings
  784.             const isPrimaryCorrect = this.currentItem.meanings.some(m => 
  785.                 m.meaning.toLowerCase() === normalizedUserAnswer
  786.             );
  787.             
  788.             if (isPrimaryCorrect) return true;
  789.             
  790.             // Check auxiliary meanings
  791.             return this.currentItem.auxiliaryMeanings.some(m => 
  792.                 m.meaning.toLowerCase() === normalizedUserAnswer
  793.             );
  794.         }
  795.  
  796.         checkReadingAnswer(userAnswer) {
  797.             const userReading = userAnswer.trim();
  798.             return this.currentItem.readings.some(r => r.reading === userReading);
  799.         }
  800.  
  801.         isComplete() {
  802.             const progress = this.getProgress();
  803.             return progress.current === progress.total;
  804.         }
  805.  
  806.         getProgress() {
  807.             const totalKanji = this.originalItems.length;
  808.             let total, current;
  809.  
  810.             switch (this.mode) {
  811.                 case PRACTICE_MODES.STANDARD:
  812.                     total = totalKanji * 2; // One point each for meaning and reading
  813.                     current = this.correctMeanings.size + this.correctReadings.size;
  814.                     return {
  815.                         total,
  816.                         current,
  817.                         meaningProgress: this.correctMeanings.size,
  818.                         readingProgress: this.correctReadings.size
  819.                     };
  820.  
  821.                 case PRACTICE_MODES.ENGLISH_TO_KANJI:
  822.                     total = totalKanji; // One point for each recognition test
  823.                     current = this.correctRecognition.size;
  824.                     return {
  825.                         total,
  826.                         current,
  827.                         recognitionProgress: this.correctRecognition.size
  828.                     };
  829.  
  830.                 case PRACTICE_MODES.COMBINED:
  831.                     total = totalKanji * 3; // One point each for meaning, reading, and recognition
  832.                     current = this.correctMeanings.size + 
  833.                              this.correctReadings.size + 
  834.                              this.correctRecognition.size;
  835.                     return {
  836.                         total,
  837.                         current,
  838.                         meaningProgress: this.correctMeanings.size,
  839.                         readingProgress: this.correctReadings.size,
  840.                         recognitionProgress: this.correctRecognition.size
  841.                     };
  842.  
  843.                 default:
  844.                     return {
  845.                         total: 0,
  846.                         current: 0
  847.                     };
  848.             }
  849.         }
  850.     }
  851.  
  852.     class RadicalReviewSession extends BaseReviewSession {
  853.         constructor(config) {
  854.             super(config.items);
  855.             this.remainingItems = this.shuffleArray([...config.items]);
  856.             this.correctAnswers = new Set();
  857.         }
  858.  
  859.         nextItem() {
  860.             if (this.remainingItems.length === 0) {
  861.                 const remainingUnlearned = this.originalItems.filter(item => !this.correctAnswers.has(item.id));
  862.  
  863.                 if (remainingUnlearned.length === 1) {
  864.                     this.remainingItems = remainingUnlearned;
  865.                 } else {
  866.                     this.remainingItems = this.shuffleArray(
  867.                         remainingUnlearned.filter(item => !this.currentItem || item.id !== this.currentItem.id)
  868.                     );
  869.                 }
  870.             }
  871.             this.currentItem = this.remainingItems.shift();
  872.             return this.currentItem;
  873.         }
  874.  
  875.         checkAnswer(userAnswer) {
  876.             const isCorrect = this.currentItem.meaning.toLowerCase() === userAnswer.toLowerCase();
  877.             if (isCorrect) {
  878.                 this.correctAnswers.add(this.currentItem.id);
  879.             }
  880.             return isCorrect;
  881.         }
  882.  
  883.         isComplete() {
  884.             return this.correctAnswers.size === this.originalItems.length;
  885.         }
  886.  
  887.         getProgress() {
  888.             const totalRadicals = this.originalItems.length;
  889.             let current = this.correctAnswers.size;
  890.  
  891.             return {
  892.                 current,
  893.                 total: totalRadicals,
  894.                 remaining: totalRadicals - current,
  895.                 percentComplete: Math.round((current / totalRadicals) * 100)
  896.             };
  897.         }
  898.     }
  899.  
  900.     function disableScroll() {
  901.         const scrollPosition = window.scrollY || document.documentElement.scrollTop;
  902.  
  903.         $("html, body").css({
  904.             overflow: "hidden",
  905.             height: "100%",
  906.             position: "fixed",
  907.             top: `-${scrollPosition}px`,
  908.             width: "100%",
  909.         });
  910.     }
  911.  
  912.     function enableScroll() {
  913.         const scrollPosition = parseInt($("html").css("top")) * -1;
  914.  
  915.         $("html, body").css({
  916.             overflow: "auto",
  917.             height: "auto",
  918.             position: "static",
  919.             top: "auto",
  920.             width: "auto",
  921.         });
  922.  
  923.         window.scrollTo(0, scrollPosition);
  924.     }
  925.  
  926.     // Cache for SVG content to avoid repeated fetches
  927.     const svgCache = new Map();
  928.  
  929.     async function loadSvgContent(url) {
  930.         if (svgCache.has(url)) {
  931.             return svgCache.get(url);
  932.         }
  933.         
  934.         const response = await fetch(url);
  935.         const svgContent = await response.text();
  936.         svgCache.set(url, svgContent);
  937.         return svgContent;
  938.     }
  939.  
  940.     class RadicalGrid {
  941.         constructor(radicals, onSelectionChange) {
  942.             this.radicals = radicals;
  943.             this.selectedRadicals = new Set();
  944.             this.onSelectionChange = onSelectionChange;
  945.             this.$container = null;
  946.         }
  947.  
  948.         updateRadicalSelection($element, radical, isSelected) {
  949.             $element.css(
  950.                 isSelected 
  951.                     ? { ...styles.practiceModal.radical.base, ...styles.practiceModal.radical.selected }
  952.                     : styles.practiceModal.radical.base
  953.             );
  954.  
  955.             if (isSelected) {
  956.                 this.selectedRadicals.add(radical.id);
  957.             } else {
  958.                 this.selectedRadicals.delete(radical.id);
  959.             }
  960.  
  961.             this.onSelectionChange(this.selectedRadicals);
  962.         }
  963.  
  964.         toggleAllRadicals(shouldSelect) {
  965.             if (shouldSelect) {
  966.                 this.radicals.forEach(radical => this.selectedRadicals.add(radical.id));
  967.             } else {
  968.                 this.selectedRadicals.clear();
  969.             }
  970.  
  971.             this.$container.find(".radical-selection-item").each((_, element) => {
  972.                 const $element = $(element);
  973.                 const radicalId = parseInt($element.data("radical-id"));
  974.                 this.updateRadicalSelection(
  975.                     $element,
  976.                     this.radicals.find(r => r.id === radicalId),
  977.                     shouldSelect
  978.                 );
  979.             });
  980.  
  981.             this.onSelectionChange(this.selectedRadicals);
  982.         }
  983.  
  984.         getSelectedRadicals() {
  985.             return Array.from(this.selectedRadicals).map(id => 
  986.                 this.radicals.find(radical => radical.id === id)
  987.             );
  988.         }
  989.  
  990.         async createRadicalElement(radical) {
  991.             const $element = $("<div>")
  992.                 .addClass("radical-selection-item")
  993.                 .css(styles.practiceModal.radical.base)
  994.                 .data("radical-id", radical.id)
  995.                 .append(
  996.                     $("<div>")
  997.                         .addClass("radical-character")
  998.                         .css(styles.practiceModal.radical.character)
  999.                         .text(radical.character || "")
  1000.                 )
  1001.                 .on("click", () => {
  1002.                     const isCurrentlySelected = this.selectedRadicals.has(radical.id);
  1003.                     this.updateRadicalSelection($element, radical, !isCurrentlySelected);
  1004.                 });
  1005.  
  1006.             if (!radical.character && radical.svg) {
  1007.                 try {
  1008.                     const svgContent = await loadSvgContent(radical.svg);
  1009.                     $element.find(".radical-character").html(svgContent);
  1010.                     const svg = $element.find("svg")[0];
  1011.                     if (svg) {
  1012.                         svg.setAttribute("width", "100%");
  1013.                         svg.setAttribute("height", "100%");
  1014.                     }
  1015.                 } catch (error) {
  1016.                     console.error("Error loading SVG:", error);
  1017.                     $element.find(".radical-character").text(radical.meaning);
  1018.                 }
  1019.             }
  1020.  
  1021.             return $element;
  1022.         }
  1023.  
  1024.         async render() {
  1025.             this.$container = $("<div>")
  1026.                 .css(styles.practiceModal.grid);
  1027.  
  1028.             // Create and append all radical elements
  1029.             const radicalElements = await Promise.all(
  1030.                 this.radicals.map(radical => this.createRadicalElement(radical))
  1031.             );
  1032.             
  1033.             radicalElements.forEach($element => this.$container.append($element));
  1034.             
  1035.             return this.$container;
  1036.         }
  1037.     }
  1038.  
  1039.     class RadicalSelectionModal {
  1040.         constructor(radicals) {
  1041.             this.radicals = radicals;
  1042.             this.state = MODAL_STATES$1.READY;
  1043.             this.totalRadicals = radicals.length;
  1044.             this.$modal = null;
  1045.             this.radicalGrid = null;
  1046.             this.callbacks = new Map();
  1047.         }
  1048.  
  1049.         on(event, callback) {
  1050.             this.callbacks.set(event, callback);
  1051.             return this;
  1052.         }
  1053.  
  1054.         emit(event, data) {
  1055.             const callback = this.callbacks.get(event);
  1056.             if (callback) callback(data);
  1057.         }
  1058.  
  1059.         updateSelectAllButton(selectedCount) {
  1060.             const selectAllButton = $("#ep-practice-modal-select-all");
  1061.             const isAllSelected = selectedCount === this.totalRadicals;
  1062.             
  1063.             selectAllButton
  1064.                 .text(isAllSelected ? "Deselect All" : "Select All")
  1065.                 .css({
  1066.                     color: isAllSelected ? theme.colors.error : theme.colors.white,
  1067.                     borderColor: isAllSelected ? theme.colors.error : theme.colors.white
  1068.                 });
  1069.         }
  1070.  
  1071.         updateStartButton(selectedCount) {
  1072.             const startButton = $("#ep-practice-modal-start");
  1073.             
  1074.             if (selectedCount > 0) {
  1075.                 startButton
  1076.                     .prop("disabled", false)
  1077.                     .text(`Start Review (${selectedCount} Selected)`)
  1078.                     .css({
  1079.                         ...styles.practiceModal.buttons.start.base,
  1080.                         ...styles.practiceModal.buttons.start.radical
  1081.                     });
  1082.             } else {
  1083.                 startButton
  1084.                     .prop("disabled", true)
  1085.                     .text("Start Review (0 Selected)")
  1086.                     .css({
  1087.                         ...styles.practiceModal.buttons.start.base,
  1088.                         ...styles.practiceModal.buttons.start.radical,
  1089.                         ...styles.practiceModal.buttons.start.disabled
  1090.                     });
  1091.             }
  1092.         }
  1093.  
  1094.         handleSelectionChange(selectedRadicals) {
  1095.             const selectedCount = selectedRadicals.size;
  1096.             this.updateSelectAllButton(selectedCount);
  1097.             this.updateStartButton(selectedCount);
  1098.         }
  1099.  
  1100.         async render() {
  1101.             this.$modal = $(modalTemplate).appendTo("body");
  1102.             
  1103.             $("#username").text($("p.user-summary__username:first").text());
  1104.             
  1105.             this.$modal.css(styles.practiceModal.backdrop);
  1106.             $("#ep-practice-modal-welcome").css(styles.practiceModal.welcomeText.container);
  1107.             $("#ep-practice-modal-welcome h1").css(styles.practiceModal.welcomeText.username);
  1108.             $("#ep-practice-modal-footer").css(styles.practiceModal.footer);
  1109.             $("#ep-practice-modal-start").css({
  1110.                 ...styles.practiceModal.buttons.start.base,
  1111.                 ...styles.practiceModal.buttons.start.radical,
  1112.                 ...styles.practiceModal.buttons.start.disabled
  1113.             });
  1114.             $("#ep-practice-modal-select-all").css(styles.practiceModal.buttons.selectAll);
  1115.             $("#ep-practice-modal-content").css(styles.practiceModal.contentWrapper);
  1116.             $("#ep-practice-modal-close").css(styles.practiceModal.buttons.exit);
  1117.  
  1118.             this.radicalGrid = new RadicalGrid(
  1119.                 this.radicals,
  1120.                 this.handleSelectionChange.bind(this)
  1121.             );
  1122.  
  1123.             const $grid = await this.radicalGrid.render();
  1124.             $("#ep-practice-modal-grid").replaceWith($grid);
  1125.  
  1126.             this.updateStartButton(0);
  1127.  
  1128.             $("#ep-practice-modal-select-all").on("click", () => {
  1129.                 const isSelectingAll = $("#ep-practice-modal-select-all").text() === "Select All";
  1130.                 this.radicalGrid.toggleAllRadicals(isSelectingAll);
  1131.             });
  1132.  
  1133.             $("#ep-practice-modal-close").on("click", () => {
  1134.                 this.emit(EVENTS$1.CLOSE);
  1135.             });
  1136.  
  1137.             $("#ep-practice-modal-start").on("click", () => {
  1138.                 const selectedRadicals = this.radicalGrid.getSelectedRadicals();
  1139.                 if (selectedRadicals.length > 0) {
  1140.                     this.emit(EVENTS$1.START_REVIEW, selectedRadicals);
  1141.                 }
  1142.             });
  1143.  
  1144.             return this.$modal;
  1145.         }
  1146.  
  1147.         remove() {
  1148.             if (this.$modal) {
  1149.                 this.$modal.remove();
  1150.                 this.$modal = null;
  1151.             }
  1152.         }
  1153.     }
  1154.  
  1155.     const REVIEW_STATES = {
  1156.         ANSWERING: "answering",
  1157.         REVIEWING: "reviewing"};
  1158.  
  1159.     const REVIEW_EVENTS = {
  1160.         CLOSE: "close",
  1161.         NEXT_ITEM: "nextItem",
  1162.         COMPLETE: "complete",
  1163.         STUDY_AGAIN: "studyAgain"
  1164.     };
  1165.  
  1166.     class ReviewCard {
  1167.         constructor(item, state = REVIEW_STATES.ANSWERING) {
  1168.             this.item = item;
  1169.             this.state = state;
  1170.             this.$container = null;
  1171.             this.isKanji = !!this.item.readings;
  1172.             this.selectedOption = null;
  1173.             this.handleKanjiSelection = this.handleKanjiSelection.bind(this);
  1174.         }
  1175.  
  1176.         handleKanjiSelection(event, option) {
  1177.             const $selectedElement = $(event.currentTarget);
  1178.             
  1179.             this.$container.find('.kanji-option').css(styles.reviewModal.kanjiOption.base);
  1180.             
  1181.             $selectedElement.css({
  1182.                 ...styles.reviewModal.kanjiOption.base,
  1183.                 ...styles.reviewModal.kanjiOption.selected
  1184.             });
  1185.         
  1186.             this.selectedOption = option.id;
  1187.             
  1188.             const $submitButton = this.$container.find('#ep-review-submit');
  1189.             $submitButton
  1190.                 .prop('disabled', false)
  1191.                 .css({
  1192.                     ...styles.reviewModal.buttons.submit,
  1193.                     opacity: 1,
  1194.                     cursor: "pointer"
  1195.                 });
  1196.         }
  1197.  
  1198.  
  1199.         getQuestionText() {
  1200.             if (this.item.type === "recognition") {
  1201.                 return ["Select the kanji that means ", this.createEmphasisSpan(this.item.meaningToMatch)];
  1202.             }
  1203.             
  1204.             if (!this.isKanji) {
  1205.                 return ["What is the meaning of this ", this.createEmphasisSpan("radical"), "?"];
  1206.             }
  1207.         
  1208.             if (this.item.type === "reading") {
  1209.                 const readingType = this.item.readings.find(r => r.primary)?.type;
  1210.                 const readingText = readingType === "onyomi" ? "on'yomi" : "kun'yomi";
  1211.                 return ["What is the ", this.createEmphasisSpan(readingText), " reading for this kanji?"];
  1212.             }
  1213.         
  1214.             return ["What is the ", this.createEmphasisSpan("meaning"), " of this kanji?"];
  1215.         }
  1216.         
  1217.         createEmphasisSpan(text) {
  1218.             return $("<span>")
  1219.                 .text(text)
  1220.                 .css({
  1221.                     fontWeight: theme.typography.fontWeight.bold,
  1222.                     color: this.isKanji ? theme.colors.kanji : theme.colors.radical,
  1223.                     padding: `${theme.spacing.xs}`,
  1224.                     borderRadius: theme.borderRadius.sm,
  1225.                     backgroundColor: this.isKanji ? 
  1226.                         "rgba(235, 1, 156, 0.1)" : 
  1227.                         "rgba(5, 152, 228, 0.1)"
  1228.                 });
  1229.         }
  1230.  
  1231.         createKanjiOption(option) {
  1232.             const $option = $("<div>")
  1233.                 .addClass("kanji-option")
  1234.                 .css(styles.reviewModal.kanjiOption.base)
  1235.                 .data("kanji-id", option.id)
  1236.                 .append(
  1237.                     $("<div>")
  1238.                         .addClass("kanji-character")
  1239.                         .css({
  1240.                             fontSize: theme.typography.fontSize["2xl"],
  1241.                             color: theme.colors.gray[800],
  1242.                             textAlign: "center"
  1243.                         })
  1244.                         .text(option.character)
  1245.                 );
  1246.  
  1247.             $option.on("click", (event) => this.handleKanjiSelection(event, option));
  1248.             
  1249.             return $option;
  1250.         }
  1251.  
  1252.         async renderCharacter() {
  1253.             const $character = $("<div>")
  1254.                 .addClass("ep-review-character")
  1255.                 .css(styles.reviewModal.character);
  1256.  
  1257.             if (this.item.character) {
  1258.                 $character.text(this.item.character);
  1259.             } else if (this.item.svg) {
  1260.                 try {
  1261.                     const svgContent = await loadSvgContent(this.item.svg);
  1262.                     $character.html(svgContent);
  1263.                     const svg = $character.find("svg")[0];
  1264.                     if (svg) {
  1265.                         svg.setAttribute("width", "100%");
  1266.                         svg.setAttribute("height", "100%");
  1267.                     }
  1268.                 } catch (error) {
  1269.                     console.error("Error loading SVG:", error);
  1270.                     $character.text(this.item.meaning);
  1271.                 }
  1272.             }
  1273.  
  1274.             return $character;
  1275.         }
  1276.  
  1277.         async renderAnsweringState() {
  1278.             const $content = $("<div>").addClass("ep-review-content");
  1279.         
  1280.             if (this.item.type === "recognition") {
  1281.                 return this.renderRecognitionCard($content);
  1282.             } else {
  1283.                 const $character = await this.renderCharacter();
  1284.                 const $question = $("<div>")
  1285.                     .addClass("ep-review-question")
  1286.                     .css({
  1287.                         fontSize: theme.typography.fontSize.lg,
  1288.                         marginBottom: theme.spacing.lg,
  1289.                         color: theme.colors.gray[700]
  1290.                     });
  1291.         
  1292.                 const questionContent = this.getQuestionText();
  1293.                 questionContent.forEach(content => {
  1294.                     if (content instanceof jQuery) {
  1295.                         $question.append(content);
  1296.                     } else {
  1297.                         $question.append(document.createTextNode(content));
  1298.                     }
  1299.                 });
  1300.         
  1301.                 const $inputSection = $("<div>")
  1302.                     .addClass("ep-review-input-section")
  1303.                     .css(styles.reviewModal.inputSection)
  1304.                     .append(
  1305.                         $("<input>")
  1306.                             .attr({
  1307.                                 type: "text",
  1308.                                 id: "ep-review-answer",
  1309.                                 placeholder: this.item.type === "reading" ? "Enter reading..." : "Enter meaning...",
  1310.                                 tabindex: "1",
  1311.                                 autofocus: true
  1312.                             })
  1313.                             .css(styles.reviewModal.input),
  1314.                         $("<button>")
  1315.                             .attr("id", "ep-review-submit")
  1316.                             .text("Submit")
  1317.                             .attr("tabindex", "2")
  1318.                             .css(styles.reviewModal.buttons.submit)
  1319.                     );
  1320.         
  1321.                 $content.append($character);
  1322.                 $content.append($question);
  1323.                 $content.append($inputSection);
  1324.                 
  1325.                 return $content;
  1326.             }
  1327.         }
  1328.  
  1329.         async renderStandardAnsweringCard($content) {
  1330.             const $character = await this.renderCharacter();
  1331.             const $question = $("<div>")
  1332.                 .addClass("ep-review-question")
  1333.                 .css({
  1334.                     fontSize: theme.typography.fontSize.lg,
  1335.                     marginBottom: theme.spacing.lg,
  1336.                     color: theme.colors.gray[700]
  1337.                 });
  1338.  
  1339.             const questionContent = this.getQuestionText();
  1340.             questionContent.forEach(content => {
  1341.                 if (content instanceof jQuery) {
  1342.                     $question.append(content);
  1343.                 } else {
  1344.                     $question.append(document.createTextNode(content));
  1345.                 }
  1346.             });
  1347.  
  1348.             const $inputSection = $("<div>")
  1349.                 .addClass("ep-review-input-section")
  1350.                 .css(styles.reviewModal.inputSection)
  1351.                 .append(
  1352.                     $("<input>")
  1353.                         .attr({
  1354.                             type: "text",
  1355.                             id: "ep-review-answer",
  1356.                             placeholder: this.item.type === "reading" ? "Enter reading..." : "Enter meaning...",
  1357.                             tabindex: "1",
  1358.                             autofocus: true
  1359.                         })
  1360.                         .css(styles.reviewModal.input),
  1361.                     $("<button>")
  1362.                         .attr("id", "ep-review-submit")
  1363.                         .text("Submit")
  1364.                         .attr("tabindex", "2")
  1365.                         .css(styles.reviewModal.buttons.submit)
  1366.                 );
  1367.  
  1368.             return $content.append($character, $question, $inputSection);
  1369.         }
  1370.  
  1371.         async renderRecognitionCard($content) {
  1372.             const $questionContainer = $("<div>")
  1373.                 .css({
  1374.                     textAlign: "center",
  1375.                     marginBottom: theme.spacing.xl
  1376.                 });
  1377.  
  1378.             const $question = $("<div>")
  1379.                 .addClass("ep-review-question")
  1380.                 .css({
  1381.                     fontSize: theme.typography.fontSize.lg,
  1382.                     color: theme.colors.gray[700],
  1383.                     marginBottom: theme.spacing.md
  1384.                 });
  1385.  
  1386.             const questionContent = this.getQuestionText();
  1387.             questionContent.forEach(content => {
  1388.                 if (content instanceof jQuery) {
  1389.                     $question.append(content);
  1390.                 } else {
  1391.                     $question.append(document.createTextNode(content));
  1392.                 }
  1393.             });
  1394.  
  1395.             $questionContainer.append($question);
  1396.  
  1397.             const $optionsGrid = $("<div>")
  1398.                 .css({
  1399.                     display: "grid",
  1400.                     gridTemplateColumns: "repeat(2, 1fr)",
  1401.                     gap: theme.spacing.lg,
  1402.                     padding: theme.spacing.xl,
  1403.                     maxWidth: "500px",
  1404.                     margin: "0 auto"
  1405.                 });
  1406.  
  1407.             this.item.options.forEach(option => {
  1408.                 $optionsGrid.append(this.createKanjiOption(option));
  1409.             });
  1410.  
  1411.             const $submitButton = $("<button>")
  1412.                 .attr({
  1413.                     id: "ep-review-submit",
  1414.                     disabled: true
  1415.                 })
  1416.                 .text("Submit")
  1417.                 .css({
  1418.                     ...styles.reviewModal.buttons.submit,
  1419.                     opacity: 0.5,
  1420.                     cursor: "not-allowed"
  1421.                 });
  1422.  
  1423.             const $submitButtonContainer = $("<div>")
  1424.                 .css({
  1425.                     textAlign: "center",
  1426.                     marginTop: theme.spacing.xl
  1427.                 })
  1428.                 .append($submitButton);
  1429.  
  1430.             return $content.append($questionContainer, $optionsGrid, $submitButtonContainer);
  1431.         }
  1432.  
  1433.         processMnemonic(mnemonic) {
  1434.             if (!mnemonic) return "";
  1435.  
  1436.             if (!this.isKanji) {
  1437.                 return mnemonic.replace(/<radical>(.*?)<\/radical>/g, (_, content) => 
  1438.                     `<span style="background-color: ${theme.colors.radical}; padding: 0 ${theme.spacing.xs}; border-radius: ${theme.borderRadius.sm}; color: ${theme.colors.white}">${content}</span>`
  1439.                 );
  1440.             }
  1441.  
  1442.             return mnemonic
  1443.                 .replace(/<radical>(.*?)<\/radical>/g, (_, content) => 
  1444.                     `<span style="background-color: ${theme.colors.radical}; padding: 0 ${theme.spacing.xs}; border-radius: ${theme.borderRadius.sm}; color: ${theme.colors.white}">${content}</span>`
  1445.                 )
  1446.                 .replace(/<kanji>(.*?)<\/kanji>/g, (_, content) => 
  1447.                     `<span style="background-color: ${theme.colors.kanji}; padding: 0 ${theme.spacing.xs}; border-radius: ${theme.borderRadius.sm}; color: ${theme.colors.white}">${content}</span>`
  1448.                 )
  1449.                 .replace(/<reading>(.*?)<\/reading>/g, (_, content) => 
  1450.                     `<span style="background-color: ${theme.colors.gray[200]}; padding: 0 ${theme.spacing.xs}; border-radius: ${theme.borderRadius.sm}; color: ${theme.colors.gray[800]}">${content}</span>`
  1451.                 );
  1452.         }
  1453.  
  1454.         async renderReviewingState() {
  1455.             const $content = $("<div>").addClass("ep-review-content");
  1456.             const $character = await this.renderCharacter();
  1457.             const $explanation = $("<div>")
  1458.                 .addClass("ep-review-explanation")
  1459.                 .css(styles.reviewModal.explanation);
  1460.  
  1461.             const primaryReading = this.item.readings?.find(r => r.primary);
  1462.             const primaryMeaning = this.item.meanings?.find(m => m.primary);
  1463.  
  1464.             const $continueButton = $("<button>")
  1465.             .attr("id", "ep-review-continue")
  1466.             .text("Continue Review")
  1467.             .css({
  1468.                 ...styles.reviewModal.buttons.submit,
  1469.                 minWidth: "120px",
  1470.                 display: "block",
  1471.                 margin: "30px auto 0"
  1472.             });
  1473.             
  1474.             const $buttonContainer = $("<div>")
  1475.                 .addClass("ep-review-buttons")
  1476.                 .css({ 
  1477.                     display: "flex",
  1478.                     gap: theme.spacing.md,
  1479.                     justifyContent: "center",
  1480.                     marginTop: theme.spacing.xl
  1481.                 })
  1482.                 .append($continueButton);
  1483.  
  1484.             // Handle non-kanji (radical) review state
  1485.             if (!this.isKanji) {
  1486.                 $content.append(
  1487.                     $character,
  1488.                     $explanation.append(
  1489.                         $("<h3>").append(
  1490.                             $("<span>")
  1491.                                 .text("Meaning: ")
  1492.                                 .css(styles.reviewModal.explanation.meaningLabel),
  1493.                             $("<a>")
  1494.                                 .attr({
  1495.                                     href: this.item.documentationUrl,
  1496.                                     target: "_blank",
  1497.                                     title: `Click to learn more about: ${this.item.meaning}`
  1498.                                 })
  1499.                                 .text(this.item.meaning)
  1500.                                 .css(styles.reviewModal.explanation.meaningText)
  1501.                         ),
  1502.                         $("<div>")
  1503.                             .addClass("ep-mnemonic-container")
  1504.                             .css(styles.reviewModal.explanation.mnemonicContainer)
  1505.                             .append(
  1506.                                 $("<span>")
  1507.                                     .text("Mnemonic:")
  1508.                                     .css(styles.reviewModal.explanation.mnemonicLabel),
  1509.                                 $("<div>")
  1510.                                     .addClass("ep-review-mnemonic")
  1511.                                     .html(this.processMnemonic(this.item.meaningMnemonic))
  1512.                                     .css(styles.reviewModal.explanation.mnemonic)
  1513.                             )
  1514.                     )
  1515.                 );
  1516.  
  1517.                 $content.append($buttonContainer);
  1518.                 return $content;
  1519.             }
  1520.  
  1521.             // Handle kanji review states based on question type
  1522.             switch (this.item.type) {
  1523.                 case "recognition":
  1524.                     $explanation.append(
  1525.                         this.createExplanationSection(
  1526.                             "Meaning",
  1527.                             this.item.meaningToMatch,
  1528.                             this.item.meaningMnemonic,
  1529.                             true
  1530.                         )
  1531.                     );
  1532.  
  1533.                     if (primaryReading) {
  1534.                         const readingType = primaryReading.type === "onyomi" ? "On'yomi" : "Kun'yomi";
  1535.                         $explanation.append(
  1536.                             this.createExplanationSection(
  1537.                                 "Reading",
  1538.                                 `${readingType}: ${primaryReading.reading}`,
  1539.                                 this.item.readingMnemonic,
  1540.                                 false
  1541.                             )
  1542.                         );
  1543.                     }
  1544.                     break;
  1545.  
  1546.                 case "reading":
  1547.                     if (primaryReading) {
  1548.                         const readingType = primaryReading.type === "onyomi" ? "On'yomi" : "Kun'yomi";
  1549.                         $explanation.append(
  1550.                             this.createExplanationSection(
  1551.                                 "Reading",
  1552.                                 `${readingType}: ${primaryReading.reading}`,
  1553.                                 this.item.readingMnemonic,
  1554.                                 true
  1555.                             )
  1556.                         );
  1557.                     }
  1558.  
  1559.                     if (primaryMeaning) {
  1560.                         $explanation.append(
  1561.                             this.createExplanationSection(
  1562.                                 "Meaning",
  1563.                                 primaryMeaning.meaning,
  1564.                                 this.item.meaningMnemonic,
  1565.                                 false
  1566.                             )
  1567.                         );
  1568.                     }
  1569.                     break;
  1570.  
  1571.                 case "meaning":
  1572.                     if (primaryMeaning) {
  1573.                         $explanation.append(
  1574.                             this.createExplanationSection(
  1575.                                 "Meaning",
  1576.                                 primaryMeaning.meaning,
  1577.                                 this.item.meaningMnemonic,
  1578.                                 true
  1579.                             )
  1580.                         );
  1581.                     }
  1582.  
  1583.                     if (primaryReading) {
  1584.                         const readingType = primaryReading.type === "onyomi" ? "On'yomi" : "Kun'yomi";
  1585.                         $explanation.append(
  1586.                             this.createExplanationSection(
  1587.                                 "Reading",
  1588.                                 `${readingType}: ${primaryReading.reading}`,
  1589.                                 this.item.readingMnemonic,
  1590.                                 false
  1591.                             )
  1592.                         );
  1593.                     }
  1594.                     break;
  1595.             }
  1596.  
  1597.             
  1598.  
  1599.             $content.append($character, $explanation);
  1600.             $content.append($buttonContainer);
  1601.  
  1602.             return $content;
  1603.         }
  1604.  
  1605.         createExplanationSection(title, answer, mnemonic, isExpanded) {
  1606.             const $section = $("<div>")
  1607.                 .addClass("explanation-section")
  1608.                 .css({
  1609.                     marginBottom: theme.spacing.md,
  1610.                     width: "100%",
  1611.                     display: "block"
  1612.                 });
  1613.         
  1614.             const $header = $("<div>")
  1615.                 .css({
  1616.                     display: "block",
  1617.                     padding: `${theme.spacing.sm} 0`,
  1618.                     width: "100%",
  1619.                     borderBottom: `1px solid ${theme.colors.gray[200]}`,
  1620.                 });
  1621.                 
  1622.  
  1623.             const $headerContent = $("<div>")
  1624.                 .css({
  1625.                     display: "flex",
  1626.                     alignItems: "center",
  1627.                     cursor: "pointer",
  1628.                     width: "100%"
  1629.                 }).append(
  1630.                     $("<span>")
  1631.                         .text(isExpanded ? "▼" : "▶")
  1632.                         .css({ 
  1633.                             color: theme.colors.gray[600],
  1634.                             marginRight: theme.spacing.sm,
  1635.                             fontSize: theme.typography.fontSize.md,
  1636.                             flexShink: 0
  1637.                         }),
  1638.                     $("<h3>")
  1639.                         .text(title)
  1640.                         .css({
  1641.                             margin: 0,
  1642.                             color: theme.colors.gray[800],
  1643.                             fontWeight: theme.typography.fontWeight.medium,
  1644.                             fontSize: theme.typography.fontSize.md,
  1645.                             flex: 1
  1646.                         })
  1647.                 );
  1648.             
  1649.             $header.append($headerContent);
  1650.         
  1651.             const $content = $("<div>")
  1652.                 .css({
  1653.                     display: isExpanded ? "block" : "none",
  1654.                     paddingLeft: theme.spacing.xl,
  1655.                     paddingTop: theme.spacing.md,
  1656.                     paddingBottom: theme.spacing.md
  1657.                 });
  1658.         
  1659.             if (title.toLowerCase() === "reading") {
  1660.                 // Extract reading type and format display
  1661.                 const readingType = this.item.readings.find(r => r.primary)?.type;
  1662.                 const formattedType = readingType === "onyomi" ? "On'yomi" : "Kun'yomi";
  1663.                 
  1664.                 $content.append(
  1665.                     $("<div>")
  1666.                         .css({
  1667.                             fontSize: theme.typography.fontSize.lg,
  1668.                             color: theme.colors.gray[800],
  1669.                             marginBottom: theme.spacing.md
  1670.                         })
  1671.                         .append(
  1672.                             $("<span>")
  1673.                                 .text(`${formattedType}: `)
  1674.                                 .css({
  1675.                                     color: theme.colors.gray[600],
  1676.                                     fontSize: theme.typography.fontSize.md
  1677.                                 }),
  1678.                             $("<span>")
  1679.                                 .text(this.item.readings.find(r => r.primary)?.reading || "")
  1680.                         )
  1681.                 );
  1682.         
  1683.                 if (mnemonic) {
  1684.                     $content.append(
  1685.                         $("<div>")
  1686.                             .addClass("ep-mnemonic-container")
  1687.                             .css(styles.reviewModal.explanation.mnemonicContainer)
  1688.                             .append(
  1689.                                 $("<span>")
  1690.                                     .text("Mnemonic:")
  1691.                                     .css(styles.reviewModal.explanation.mnemonicLabel),
  1692.                                 $("<div>")
  1693.                                     .addClass("ep-review-mnemonic")
  1694.                                     .html(this.processMnemonic(mnemonic))
  1695.                                     .css(styles.reviewModal.explanation.mnemonic)
  1696.                             )
  1697.                     );
  1698.                 }
  1699.             } else {
  1700.                 const meaningText = this.item.type === "recognition" 
  1701.                     ? this.item.meaningToMatch
  1702.                     : this.item.meanings.find(m => m.primary)?.meaning;
  1703.         
  1704.                 $content.append(
  1705.                     $("<div>")
  1706.                         .css({
  1707.                             fontSize: theme.typography.fontSize.lg,
  1708.                             color: theme.colors.gray[800],
  1709.                             marginBottom: theme.spacing.md
  1710.                         })
  1711.                         .text(meaningText)
  1712.                 );
  1713.         
  1714.                 if (mnemonic) {
  1715.                     $content.append(
  1716.                         $("<div>")
  1717.                             .addClass("ep-mnemonic-container")
  1718.                             .css(styles.reviewModal.explanation.mnemonicContainer)
  1719.                             .append(
  1720.                                 $("<span>")
  1721.                                     .text("Mnemonic:")
  1722.                                     .css(styles.reviewModal.explanation.mnemonicLabel),
  1723.                                 $("<div>")
  1724.                                     .addClass("ep-review-mnemonic")
  1725.                                     .html(this.processMnemonic(mnemonic))
  1726.                                     .css(styles.reviewModal.explanation.mnemonic)
  1727.                             )
  1728.                     );
  1729.                 }
  1730.             }
  1731.         
  1732.             $header.on("click", function() {
  1733.                 const $content = $(this).siblings("div");
  1734.                 const isVisible = $content.is(":visible");
  1735.                 $content.slideToggle(200);
  1736.                 const $arrow = $(this).find("span").first();
  1737.                 $arrow.text(isVisible ? "▶" : "▼");
  1738.             });
  1739.         
  1740.             return $section.append($header, $content);
  1741.         }
  1742.  
  1743.         async render() {
  1744.             this.$container = $("<div>")
  1745.                 .addClass("ep-review-card")
  1746.                 .css({
  1747.                     padding: theme.spacing.xl,
  1748.                     display: "flex",
  1749.                     flexDirection: "column",
  1750.                     width: "100%",
  1751.                     gap: theme.spacing.xl
  1752.                 });
  1753.         
  1754.             const $characterContainer = $("<div>")
  1755.                 .css({
  1756.                     textAlign: "center",
  1757.                     width: "100%"
  1758.                 });
  1759.         
  1760.             const $contentContainer = $("<div>")
  1761.                 .css({
  1762.                     width: "100%",
  1763.                     textAlign: "left"
  1764.                 });
  1765.         
  1766.             const content = await (this.state === REVIEW_STATES.ANSWERING
  1767.                 ? this.renderAnsweringState()
  1768.                 : this.renderReviewingState());
  1769.         
  1770.             if (this.state === REVIEW_STATES.ANSWERING) {
  1771.                 const $character = content.find(".ep-review-character").detach();
  1772.                 $characterContainer.append($character);
  1773.                 
  1774.                 $contentContainer.append(content);
  1775.             } else {
  1776.                 const $character = content.find(".ep-review-character").detach();
  1777.                 $characterContainer.append($character);
  1778.                 
  1779.                 $contentContainer.append(content.find(".ep-review-explanation"));
  1780.             }
  1781.         
  1782.             this.$container.append($characterContainer, $contentContainer);
  1783.             return this.$container;
  1784.         }
  1785.  
  1786.         async updateState(newState) {
  1787.             if (this.state === newState) return;
  1788.             
  1789.             this.state = newState;
  1790.             const content = this.state === REVIEW_STATES.ANSWERING
  1791.                 ? await this.renderAnsweringState()
  1792.                 : await this.renderReviewingState();
  1793.  
  1794.             this.$container.empty().append(content);
  1795.         }
  1796.  
  1797.         getAnswer() {
  1798.             if (this.item.type === "recognition") {
  1799.                 return this.selectedOption?.toString() || "";
  1800.             }
  1801.             return $("#ep-review-answer").val()?.trim() || "";
  1802.         }
  1803.  
  1804.         remove() {
  1805.             if (this.$container) {
  1806.                 this.$container.remove();
  1807.                 this.$container = null;
  1808.             }
  1809.         }
  1810.     }
  1811.  
  1812.     class ReviewSessionModal {
  1813.         constructor(reviewSession) {
  1814.             this.reviewSession = reviewSession;
  1815.             this.state = REVIEW_STATES.ANSWERING;
  1816.             this.$modal = null;
  1817.             this.currentCard = null;
  1818.             this.callbacks = new Map();
  1819.             this.isKanjiSession = !!this.reviewSession.correctMeanings;
  1820.  
  1821.             // Session configuration for Play Again
  1822.             this.sessionConfig = {
  1823.                 mode: this.reviewSession.mode,
  1824.                 items: this.reviewSession.originalItems,
  1825.             };
  1826.  
  1827.             if (this.sessionConfig.mode !== "radical") {
  1828.                 this.sessionConfig.allUnlockedKanji = this.reviewSession.allUnlockedKanji;
  1829.             }
  1830.         
  1831.             this.handlePlayAgain = this.handlePlayAgain.bind(this);
  1832.             this.handleAnswer = this.handleAnswer.bind(this);
  1833.             this.handleNextItem = this.handleNextItem.bind(this);
  1834.             this.showHint = this.showHint.bind(this);
  1835.             this.setupInput = this.setupInput.bind(this);
  1836.             this.showCurrentItem = this.showCurrentItem.bind(this);
  1837.             this.updateProgress = this.updateProgress.bind(this);
  1838.             this.showReviewInterface = this.showReviewInterface.bind(this);
  1839.             this.hideReviewInterface = this.hideReviewInterface.bind(this);
  1840.             this.showInputInterface = this.showInputInterface.bind(this);
  1841.             this.hideInputInterface = this.hideInputInterface.bind(this);
  1842.             this.showCompletionScreen = this.showCompletionScreen.bind(this);
  1843.         }
  1844.  
  1845.         // Setup Hiragana Keyboard
  1846.         setupInput() {
  1847.             const input = document.querySelector("#ep-review-answer");
  1848.             if (!input) return;
  1849.  
  1850.             const currentItem = this.reviewSession.currentItem;
  1851.             if (!currentItem) return;
  1852.  
  1853.             if (this.isKanjiSession && currentItem.type === "reading") {
  1854.                 wanakana.bind(input, {
  1855.                     IMEMode: "toHiragana",
  1856.                     useObsoleteKana: false,
  1857.                     passRomaji: false,
  1858.                     upcaseKatakana: false,
  1859.                     convertLongVowelMark: true
  1860.                 });
  1861.             }
  1862.         }
  1863.  
  1864.         on(event, callback) {
  1865.             this.callbacks.set(event, callback);
  1866.             return this;
  1867.         }
  1868.  
  1869.         emit(event, data) {
  1870.             const callback = this.callbacks.get(event);
  1871.             if (callback) callback(data);
  1872.         }
  1873.  
  1874.         handlePlayAgain() {
  1875.             const newSession = this.isKanjiSession ? new KanjiReviewSession({
  1876.                 items: this.sessionConfig.items,
  1877.                 mode: this.sessionConfig.mode,
  1878.                 allUnlockedKanji: this.sessionConfig.allUnlockedKanji
  1879.             }) : new RadicalReviewSession({
  1880.                 items: this.sessionConfig.items,
  1881.                 mode: "radical",
  1882.             });
  1883.  
  1884.             // Initialize new session
  1885.             newSession.nextItem();
  1886.  
  1887.             // Clean up current modal
  1888.             this.remove();
  1889.  
  1890.             const newModal = new ReviewSessionModal(newSession);
  1891.             newModal
  1892.                 .on(REVIEW_EVENTS.CLOSE, () => {
  1893.                     enableScroll();
  1894.                     newModal.remove();
  1895.                 })
  1896.                 .on(REVIEW_EVENTS.STUDY_AGAIN, () => {
  1897.                     newModal.remove();
  1898.                     enableScroll();
  1899.                     if (this.isKanjiSession) {
  1900.                         handleKanjiPractice();
  1901.                     } else {
  1902.                         handleRadicalPractice();
  1903.                     }
  1904.                 });
  1905.             
  1906.                 return newModal.render();
  1907.         }
  1908.  
  1909.         updateProgress() {
  1910.             const progress = this.reviewSession.getProgress();
  1911.             const mode = this.reviewSession.mode;
  1912.             let progressText;
  1913.  
  1914.             switch (mode) {
  1915.                 case PRACTICE_MODES.ENGLISH_TO_KANJI:
  1916.                     progressText = `${progress.recognitionProgress}/${progress.total} Correct`;
  1917.                     break;
  1918.                 case PRACTICE_MODES.COMBINED:
  1919.                     progressText = `Meanings: ${progress.meaningProgress}/${progress.total/3} | ` +
  1920.                                  `Readings: ${progress.readingProgress}/${progress.total/3} | ` +
  1921.                                  `Recognition: ${progress.recognitionProgress}/${progress.total/3}`;
  1922.                     break;
  1923.                 case PRACTICE_MODES.STANDARD:
  1924.                     progressText = `Meanings: ${progress.meaningProgress}/${progress.total/2} | ` +
  1925.                                  `Readings: ${progress.readingProgress}/${progress.total/2}`;
  1926.                     break;
  1927.                 default: // RADICAL 
  1928.                     progressText = `${progress.current}/${progress.total/1} Correct`;
  1929.             }
  1930.  
  1931.             $("#ep-review-progress-correct").html(progressText);
  1932.  
  1933.             if (mode === PRACTICE_MODES.COMBINED) {
  1934.                 $("#ep-review-progress-correct").css({
  1935.                     fontSize: theme.typography.fontSize.xs
  1936.                 });
  1937.             }
  1938.             
  1939.         }
  1940.  
  1941.         showReviewInterface() {
  1942.             $("#ep-review-result").show();
  1943.             $("#ep-review-result-message").show();
  1944.             $("#ep-review-explanation").show();
  1945.             $(".ep-review-buttons").hide();
  1946.         }
  1947.  
  1948.         hideReviewInterface() {
  1949.             $("#ep-review-result").hide();
  1950.             $("#ep-review-result-message").hide();
  1951.             $("#ep-review-explanation").hide();
  1952.             $("#ep-review-show-hint").hide();
  1953.             $(".ep-review-buttons").show();
  1954.         }
  1955.  
  1956.         showInputInterface() {
  1957.             $("#ep-review-input-section").show();
  1958.             $("#ep-review-answer").val("").prop("disabled", false);
  1959.             $("#ep-review-submit").show();
  1960.             $("#ep-review-answer").focus();
  1961.  
  1962.             this.setupInput();
  1963.         }
  1964.  
  1965.         hideInputInterface() {
  1966.             $("#ep-review-input-section").hide();
  1967.             $("#ep-review-submit").hide();
  1968.             $("#ep-review-answer").prop("disabled", true);
  1969.         }
  1970.  
  1971.         async showCurrentItem() {
  1972.             const currentItem = this.reviewSession.currentItem;
  1973.             
  1974.             if (this.currentCard) {
  1975.                 this.currentCard.remove();
  1976.             }
  1977.         
  1978.             this.state = REVIEW_STATES.ANSWERING;
  1979.             this.hideReviewInterface();
  1980.             
  1981.             this.currentCard = new ReviewCard(currentItem, REVIEW_STATES.ANSWERING);
  1982.             const $card = await this.currentCard.render();
  1983.             
  1984.             // Clear and append the new card
  1985.             $("#ep-review-content").empty().append($card);
  1986.             
  1987.             // Ensure input is focused after rendering
  1988.             if (currentItem.type !== "recognition") {
  1989.                 const $input = $("#ep-review-answer");
  1990.                 if ($input.length) {
  1991.                     $input.focus();
  1992.                     this.setupInput();
  1993.                 }
  1994.             }
  1995.         }
  1996.  
  1997.         async handleAnswer() {
  1998.             const currentCard = this.currentCard;
  1999.             if (!currentCard) return;
  2000.         
  2001.             const userAnswer = currentCard.getAnswer();
  2002.             if (!userAnswer) return;
  2003.         
  2004.             const isCorrect = this.reviewSession.checkAnswer(userAnswer);
  2005.             
  2006.             $(".ep-review-input-section, .ep-review-question, .ep-review-content, .kanji-option, #ep-review-submit").hide();
  2007.             $(".ep-review-character").css({
  2008.                 marginBottom: "0"
  2009.             });
  2010.         
  2011.             // Create result container if it doesn't exist
  2012.             if ($("#ep-review-result-container").length === 0) {
  2013.                 $(".ep-review-card").append(
  2014.                     $("<div>")
  2015.                         .attr("id", "ep-review-result-container")
  2016.                         .css({
  2017.                             ...styles.reviewModal.content,
  2018.                             padding: 0
  2019.                         })
  2020.                 );
  2021.             }
  2022.         
  2023.             if (isCorrect) {
  2024.                 $("#ep-review-result-container")
  2025.                     .empty()
  2026.                     .append(
  2027.                         $("<div>")
  2028.                             .attr("id", "ep-review-result-message")
  2029.                             .text("Correct!")
  2030.                             .css({
  2031.                                 ...styles.reviewModal.results.message,
  2032.                                 color: theme.colors.success,
  2033.                             })
  2034.                     );
  2035.                     
  2036.                 this.updateProgress();
  2037.                 setTimeout(() => this.handleNextItem(), 1000);
  2038.             } else {
  2039.                 $("#ep-review-result-container")
  2040.                     .empty()
  2041.                     .append(
  2042.                         $("<div>")
  2043.                             .attr("id", "ep-review-result-message")
  2044.                             .text("Incorrect")
  2045.                             .css({
  2046.                                 ...styles.reviewModal.results.message,
  2047.                                 color: theme.colors.error,
  2048.                             }),
  2049.                         $("<div>")
  2050.                             .addClass("ep-review-buttons")
  2051.                             .css({ 
  2052.                                 display: "flex",
  2053.                                 gap: theme.spacing.md,
  2054.                                 justifyContent: "center" 
  2055.                             })
  2056.                             .append(
  2057.                                 $("<button>")
  2058.                                     .attr("id", "ep-review-show-hint")
  2059.                                     .text("Show Answer")
  2060.                                     .css({
  2061.                                         ...styles.reviewModal.buttons.hint,
  2062.                                         minWidth: "120px"
  2063.                                     }),
  2064.                                 $("<button>")
  2065.                                     .attr("id", "ep-review-continue")
  2066.                                     .text("Continue Review")
  2067.                                     .css({
  2068.                                         ...styles.reviewModal.buttons.submit,
  2069.                                         minWidth: "120px"
  2070.                                     })
  2071.                             )
  2072.                     );
  2073.             }
  2074.         }
  2075.  
  2076.         async showHint() {
  2077.             await this.currentCard.updateState(REVIEW_STATES.REVIEWING);
  2078.         }
  2079.  
  2080.         async handleNextItem() {
  2081.             if (this.reviewSession.isComplete()) {
  2082.                 this.showCompletionScreen();
  2083.                 return;
  2084.             }
  2085.  
  2086.             this.reviewSession.nextItem();
  2087.             await this.showCurrentItem();
  2088.             this.emit(REVIEW_EVENTS.NEXT_ITEM);
  2089.         }
  2090.  
  2091.         showCompletionScreen() {
  2092.             const progress = this.reviewSession.getProgress();
  2093.             const mode = this.reviewSession.mode;
  2094.             
  2095.             let languageLearningQuotes;
  2096.  
  2097.             if (this.isKanjiSession) {
  2098.                 languageLearningQuotes = [
  2099.                     "Every kanji you learn unlocks new understanding",
  2100.                     "One character a day",
  2101.                     "Continuation is power",
  2102.                     "Each review strengthens your kanji recognition",
  2103.                     "Little by little, steadily",
  2104.                     "Each character you master opens new doors to understanding",
  2105.                     "Your journey through the world of kanji grows stronger each day"
  2106.                 ]; 
  2107.             } else {
  2108.                 languageLearningQuotes = [
  2109.                     "Every radical mastered unlocks new understanding",
  2110.                     "Building your foundation, one radical at a time",
  2111.                     "Mastering radicals today, recognizing kanji tomorrow",
  2112.                     "Each radical review strengthens your foundation",
  2113.                     "Little by little, your radical knowledge grows",
  2114.                     "Each radical you master opens new paths of understanding",
  2115.                     "Your journey through radicals grows stronger each day",
  2116.                     "Steady progress in radicals paves the way forward",
  2117.                     "Your radical knowledge builds the bridge to comprehension"
  2118.                 ];
  2119.             }
  2120.             
  2121.             const randomQuote = languageLearningQuotes[
  2122.                 Math.floor(Math.random() * languageLearningQuotes.length)
  2123.             ];
  2124.  
  2125.             let completionMessage;
  2126.             switch (mode) {
  2127.                 case PRACTICE_MODES.ENGLISH_TO_KANJI:
  2128.                     completionMessage = `Review completed!<br>${progress.recognitionProgress}/${progress.total} Correct`;
  2129.                     break;
  2130.                 case PRACTICE_MODES.COMBINED:
  2131.                     completionMessage = `Review completed!<br>` +
  2132.                         `Meanings: ${progress.meaningProgress}/${progress.total/3} | ` +
  2133.                         `Readings: ${progress.readingProgress}/${progress.total/3} | ` +
  2134.                         `Recognition: ${progress.recognitionProgress}/${progress.total/3}`;
  2135.                     break;
  2136.                 case PRACTICE_MODES.STANDARD:
  2137.                     completionMessage = `Review completed!<br>` +
  2138.                         `Meanings: ${progress.meaningProgress}/${progress.total/2} | ` +
  2139.                         `Readings: ${progress.readingProgress}/${progress.total/2}`;
  2140.                     break;
  2141.                 default:
  2142.                     completionMessage = `Review completed!`;
  2143.                     
  2144.             }
  2145.  
  2146.             const $completionContent = $("<div>")
  2147.                 .css({
  2148.                     textAlign: "center",
  2149.                     padding: theme.spacing.xl
  2150.                 })
  2151.                 .append(
  2152.                     $("<h1>")
  2153.                         .html(completionMessage)
  2154.                         .css({
  2155.                             ...styles.reviewModal.progress,
  2156.                             marginBottom: theme.spacing.lg
  2157.                         }),
  2158.                     $("<p>")
  2159.                         .text(`"${randomQuote}"`)
  2160.                         .css({
  2161.                             color: theme.colors.gray[600],
  2162.                             marginBottom: theme.spacing.xl,
  2163.                             fontStyle: "italic"
  2164.                         }),
  2165.                         $("<div>")
  2166.                         .css({
  2167.                             display: "flex",
  2168.                             gap: theme.spacing.md,
  2169.                             justifyContent: "center"
  2170.                         })
  2171.                         .append(
  2172.                             $("<button>")
  2173.                                 .text("Play Again")
  2174.                                 .css({
  2175.                                     ...styles.reviewModal.buttons.submit,
  2176.                                     backgroundColor: theme.colors.success,
  2177.                                     minWidth: "120px"
  2178.                                 })
  2179.                                 .on("click", this.handlePlayAgain),
  2180.                             $("<button>")
  2181.                                 .text("Study Different Items")
  2182.                                 .css({
  2183.                                     ...styles.reviewModal.buttons.submit,
  2184.                                     minWidth: "120px"
  2185.                                 })
  2186.                                 .on("click", () => {
  2187.                                     this.emit(REVIEW_EVENTS.STUDY_AGAIN);
  2188.                                 })
  2189.                         )
  2190.                 );
  2191.  
  2192.             $("#ep-review-content").empty().append($completionContent);
  2193.             this.emit(REVIEW_EVENTS.COMPLETE, { progress });
  2194.         }
  2195.  
  2196.         async render() {
  2197.             this.$modal = $(reviewModalTemplate).appendTo("body");
  2198.             
  2199.             this.$modal.css({
  2200.                 position: "fixed",
  2201.                 top: 0,
  2202.                 left: 0,
  2203.                 width: "100%",
  2204.                 height: "100%",
  2205.                 backgroundColor: "rgba(0, 0, 0, 0.9)",
  2206.                 zIndex: theme.zIndex.modal,
  2207.                 display: "flex",
  2208.                 alignItems: "center",
  2209.                 justifyContent: "center"
  2210.             });
  2211.  
  2212.             $("#ep-review-modal-wrapper").css(styles.reviewModal.container);
  2213.             $("#ep-review-modal-header").css(styles.reviewModal.header);
  2214.             $("#ep-review-progress").css(styles.reviewModal.progress);
  2215.             $("#ep-review-exit").css(styles.reviewModal.buttons.exit);
  2216.  
  2217.             // Set up event delegation
  2218.             this.$modal
  2219.                 .on("click", "#ep-review-submit", this.handleAnswer)
  2220.                 .on("keypress", "#ep-review-answer", (e) => {
  2221.                     if (e.which === 13) {
  2222.                         this.handleAnswer();
  2223.                     }
  2224.                 })
  2225.                 .on("click", "#ep-review-show-hint", this.showHint)
  2226.                 .on("click", "#ep-review-continue", this.handleNextItem);
  2227.  
  2228.             $("#ep-review-exit").on("click", () => {
  2229.                 this.emit(REVIEW_EVENTS.CLOSE);
  2230.             });
  2231.  
  2232.             this.updateProgress();
  2233.             await this.showCurrentItem();
  2234.  
  2235.             return this.$modal;
  2236.         }
  2237.  
  2238.         remove() {
  2239.             if (this.currentCard) {
  2240.                 this.currentCard.remove();
  2241.             }
  2242.  
  2243.             const input = document.querySelector("#ep-review-answer");
  2244.             if (input) {
  2245.                 wanakana.unbind(input);
  2246.             }
  2247.  
  2248.             if (this.$modal) {
  2249.                 this.$modal.remove();
  2250.                 this.$modal = null;
  2251.             }
  2252.         }
  2253.     }
  2254.  
  2255.     // Assumption: User has wkof.file_cache for the IndexedDB operations to work
  2256.  
  2257.     async function getCurrentUserLevel() {    
  2258.         return new Promise((resolve, reject) => {
  2259.             const request = indexedDB.open(DB_VALUES.DB_NAME, 1);
  2260.             
  2261.             request.onsuccess = (event) => {
  2262.                 
  2263.                 const db = event.target.result;
  2264.                 const transaction = db.transaction([DB_VALUES.FILE_STORE], "readonly");
  2265.                 const store = transaction.objectStore(DB_VALUES.FILE_STORE);
  2266.                 const getUser = store.get(DB_VALUES.USER_RECORD);
  2267.                 
  2268.                 getUser.onsuccess = () => {
  2269.                     const userData = getUser.result;
  2270.                     resolve(userData.content.data.level);
  2271.                 };
  2272.                 
  2273.                 getUser.onerror = () => {
  2274.                     reject(handleError("USER_LEVEL"));
  2275.                 };
  2276.             };
  2277.             
  2278.             request.onerror = () => {
  2279.                 reject(handleError("OPEN"));
  2280.             };
  2281.         });
  2282.     }
  2283.  
  2284.     async function getCurrentLevelRadicals() {
  2285.         try {
  2286.             const userLevel = await getCurrentUserLevel();
  2287.             
  2288.             return new Promise((resolve, reject) => {
  2289.                 const request = indexedDB.open(DB_VALUES.DB_NAME, 1);
  2290.                 
  2291.                 request.onsuccess = (event) => {
  2292.                     const db = event.target.result;
  2293.                     const transaction = db.transaction([DB_VALUES.FILE_STORE], "readonly");
  2294.                     const store = transaction.objectStore(DB_VALUES.FILE_STORE);
  2295.                     const getSubjects = store.get(DB_VALUES.SUBJECT_RECORD);
  2296.                     
  2297.                     getSubjects.onsuccess = () => {
  2298.                         const subjectsData = getSubjects.result;
  2299.                         
  2300.                         const currentLevelRadicals = Object.values(subjectsData.content.data)
  2301.                             .filter(subject => 
  2302.                                 subject.object === "radical" && 
  2303.                                 subject.data.level === userLevel
  2304.                             )
  2305.                             .map(radical => ({
  2306.                                 id: radical.id,
  2307.                                 character: radical.data.characters,
  2308.                                 meaning: radical.data.meanings[0].meaning,
  2309.                                 documentationUrl: radical.data.document_url,
  2310.                                 meaningMnemonic: radical.data.meaning_mnemonic,
  2311.                                 svg: radical.data.character_images.find(img => 
  2312.                                     img.content_type === "image/svg+xml"
  2313.                                 )?.url || null
  2314.                             }));
  2315.                         
  2316.                         resolve(currentLevelRadicals);
  2317.                     };
  2318.                     
  2319.                     getSubjects.onerror = () => {
  2320.                         reject(handleError("SUBJECT_DATA"));
  2321.                     };
  2322.                 };
  2323.                 
  2324.                 request.onerror = () => {
  2325.                     reject(handleError("OPEN"));
  2326.                 };
  2327.             });
  2328.         } catch (error) {
  2329.             console.error("Error in getCurrentLevelRadicals:", error);
  2330.             throw error;
  2331.         }
  2332.     }
  2333.  
  2334.     async function getCurrentLevelKanji() {
  2335.         return new Promise(async (resolve, reject) => {
  2336.             const userLevel = await getCurrentUserLevel();
  2337.  
  2338.             const request = indexedDB.open('wkof.file_cache', 1);
  2339.             
  2340.             request.onsuccess = (event) => {
  2341.                 const db = event.target.result;
  2342.                 const transaction = db.transaction(['files'], 'readonly');
  2343.                 const store = transaction.objectStore('files');
  2344.                 
  2345.                 Promise.all([
  2346.                     new Promise(resolve => {
  2347.                         store.get('Apiv2.assignments').onsuccess = (e) => 
  2348.                             resolve(e.target.result.content.data);
  2349.                     }),
  2350.                     new Promise(resolve => {
  2351.                         store.get('Apiv2.subjects').onsuccess = (e) => 
  2352.                             resolve(e.target.result.content.data);
  2353.                     })
  2354.                 ]).then(([assignments, subjects]) => {
  2355.                     const unlockedKanjiIds = new Set(
  2356.                         Object.values(assignments)
  2357.                             .filter(a => a.data.subject_type === "kanji")
  2358.                             .map(a => a.data.subject_id)
  2359.                     );
  2360.  
  2361.                     // Helper function to get radical information
  2362.                     const getRadicalInfo = (radicalId) => {
  2363.                         const radical = subjects[radicalId];
  2364.                         if (!radical) return null;
  2365.                         
  2366.                         return {
  2367.                             id: radical.id,
  2368.                             character: radical.data.characters,
  2369.                             meaning: radical.data.meanings[0].meaning,
  2370.                             svg: radical.data.character_images?.find(img => 
  2371.                                 img.content_type === 'image/svg+xml'
  2372.                             )?.url || null
  2373.                         };
  2374.                     };
  2375.                     
  2376.                     const currentLevelKanji = Object.values(subjects)
  2377.                         .filter(subject => 
  2378.                             subject.object === "kanji" && 
  2379.                             subject.data.level === userLevel &&
  2380.                             unlockedKanjiIds.has(subject.id)
  2381.                         )
  2382.                         .map(kanji => ({
  2383.                             id: kanji.id,
  2384.                             character: kanji.data.characters,
  2385.                             meanings: kanji.data.meanings.filter(m => m.accepted_answer),
  2386.                             readings: kanji.data.readings.filter(r => r.accepted_answer),
  2387.                             meaningMnemonic: kanji.data.meaning_mnemonic,
  2388.                             meaningHint: kanji.data.meaning_hint,
  2389.                             readingMnemonic: kanji.data.reading_mnemonic,
  2390.                             readingHint: kanji.data.reading_hint,
  2391.                             documentUrl: kanji.data.document_url,
  2392.                             radicals: kanji.data.component_subject_ids
  2393.                                 .map(getRadicalInfo)
  2394.                                 .filter(Boolean),
  2395.                             auxiliaryMeanings: kanji.data.auxiliary_meanings
  2396.                                 ?.filter(m => m.type === "whitelist")
  2397.                                 ?? []
  2398.                         }));
  2399.                     
  2400.                     resolve(currentLevelKanji);
  2401.                 });
  2402.             };
  2403.  
  2404.             request.onerror = (error) => reject(error);
  2405.         });
  2406.     }
  2407.  
  2408.     function handleError(type) {
  2409.         if (type == "OPEN") {
  2410.             return new Error(DB_ERRORS.OPEN);
  2411.         }
  2412.  
  2413.         if (type == "USER_LEVEL") {
  2414.             return new Error(DB_ERRORS.USER_LEVEL);
  2415.         }
  2416.  
  2417.         if (type == "SUBJECT_DATA") {
  2418.             return new Error(DB_ERRORS.SUBJECT_DATA);
  2419.         }
  2420.     }
  2421.  
  2422.     async function handleRadicalPractice() {
  2423.         try {
  2424.             disableScroll();
  2425.             const radicals = await getCurrentLevelRadicals();
  2426.             
  2427.             const selectionModal = new RadicalSelectionModal(radicals)
  2428.                 .on(EVENTS$1.CLOSE, () => {
  2429.                     enableScroll();
  2430.                     selectionModal.remove();
  2431.                 })
  2432.                 .on(EVENTS$1.START_REVIEW, (selectedRadicals) => {
  2433.                     selectionModal.remove();
  2434.                     startRadicalReview(selectedRadicals);
  2435.                 });
  2436.  
  2437.             await selectionModal.render();
  2438.  
  2439.         } catch (error) {
  2440.             console.error("Error in radical practice:", error);
  2441.             enableScroll();
  2442.         }
  2443.     }
  2444.  
  2445.     async function startRadicalReview(selectedRadicals) {
  2446.         try {
  2447.             const session = {
  2448.                 items: selectedRadicals,
  2449.                 mode: "radical",
  2450.             };
  2451.  
  2452.             const reviewSession = new RadicalReviewSession(session);
  2453.             reviewSession.nextItem();
  2454.  
  2455.             const reviewModal = new ReviewSessionModal(reviewSession);
  2456.  
  2457.             reviewModal
  2458.                 .on(REVIEW_EVENTS.CLOSE, () => {
  2459.                     const progress = reviewSession.getProgress();
  2460.                     $("#ep-review-modal-header").remove();
  2461.                     $("#ep-review-content")
  2462.                         .empty()
  2463.                         .append(
  2464.                             $("<div>")
  2465.                                 .css(styles.reviewModal.content)
  2466.                                 .append([
  2467.                                     $("<p>", { 
  2468.                                         css: {
  2469.                                             ...styles.reviewModal.progress,
  2470.                                             marginBottom: 0
  2471.                                         },
  2472.                                         text: `${progress.current}/${progress.total} Correct (${progress.percentComplete}%)` 
  2473.                                     }), 
  2474.                                     $("<p>", {
  2475.                                         css: {
  2476.                                             marginTop: 0,
  2477.                                             textAlign: "center"
  2478.                                         },
  2479.                                         text: "Closing..."
  2480.                                     })
  2481.                                 ])
  2482.                         );
  2483.  
  2484.                     setTimeout(() => {
  2485.                         enableScroll();
  2486.                         reviewModal.remove();
  2487.                     }, 1000);
  2488.                 })
  2489.                 .on(REVIEW_EVENTS.STUDY_AGAIN, () => {
  2490.                     reviewModal.remove();
  2491.                     enableScroll();
  2492.                     handleRadicalPractice();
  2493.                 });
  2494.  
  2495.             await reviewModal.render();
  2496.         } catch (error) {
  2497.             console.error("Error in startRadicalReview:", error);
  2498.             enableScroll();
  2499.         }
  2500.     }
  2501.  
  2502.     const MODAL_STATES = {
  2503.         READY: "ready"
  2504.     };
  2505.  
  2506.     const EVENTS = {
  2507.         CLOSE: "close",
  2508.         START_REVIEW: "startReview"
  2509.     };
  2510.  
  2511.     class KanjiGrid {
  2512.         constructor(kanji, onSelectionChange) {
  2513.             this.kanji = kanji;
  2514.             this.selectedKanji = new Set();
  2515.             this.onSelectionChange = onSelectionChange;
  2516.             this.$container = null;
  2517.         }
  2518.  
  2519.         updateKanjiSelection($element, kanji, isSelected) {
  2520.             const baseStyles = {
  2521.                 ...styles.practiceModal.radical.base,
  2522.                 border: `2px solid ${isSelected ? theme.colors.kanji : 'rgba(255, 255, 255, 0.2)'}`,
  2523.                 background: isSelected ? 'rgba(235, 1, 156, 0.2)' : 'rgba(255, 255, 255, 0.1)',
  2524.                 transition: 'all 0.2s ease',
  2525.                 '&:hover': {
  2526.                     borderColor: theme.colors.kanji,
  2527.                     background: isSelected ? 'rgba(235, 1, 156, 0.3)' : 'rgba(255, 255, 255, 0.2)'
  2528.                 }
  2529.             };
  2530.  
  2531.             $element.css(baseStyles);
  2532.  
  2533.             if (isSelected) {
  2534.                 this.selectedKanji.add(kanji.id);
  2535.             } else {
  2536.                 this.selectedKanji.delete(kanji.id);
  2537.             }
  2538.  
  2539.             this.onSelectionChange(this.selectedKanji);
  2540.         }
  2541.  
  2542.         toggleAllKanji(shouldSelect) {
  2543.             if (shouldSelect) {
  2544.                 this.kanji.forEach(kanji => this.selectedKanji.add(kanji.id));
  2545.             } else {
  2546.                 this.selectedKanji.clear();
  2547.             }
  2548.  
  2549.             this.$container.find(".kanji-selection-item").each((_, element) => {
  2550.                 const $element = $(element);
  2551.                 const kanjiId = parseInt($element.data("kanji-id"));
  2552.                 this.updateKanjiSelection(
  2553.                     $element,
  2554.                     this.kanji.find(k => k.id === kanjiId),
  2555.                     shouldSelect
  2556.                 );
  2557.             });
  2558.  
  2559.             this.onSelectionChange(this.selectedKanji);
  2560.         }
  2561.  
  2562.         getSelectedKanji() {
  2563.             return Array.from(this.selectedKanji).map(id => 
  2564.                 this.kanji.find(kanji => kanji.id === id)
  2565.             );
  2566.         }
  2567.  
  2568.         createKanjiElement(kanji) {
  2569.             const $element = $("<div>")
  2570.                 .addClass("kanji-selection-item")
  2571.                 .css({
  2572.                     ...styles.practiceModal.radical.base,
  2573.                     position: "relative"
  2574.                 })
  2575.                 .data("kanji-id", kanji.id)
  2576.                 .append(
  2577.                     $("<div>")
  2578.                         .addClass("kanji-character")
  2579.                         .css({
  2580.                             fontSize: theme.typography.fontSize.xl,
  2581.                             color: theme.colors.white
  2582.                         })
  2583.                         .text(kanji.character)
  2584.                 );
  2585.  
  2586.             $element
  2587.                 .on("click", () => {
  2588.                     const isCurrentlySelected = this.selectedKanji.has(kanji.id);
  2589.                     this.updateKanjiSelection($element, kanji, !isCurrentlySelected);
  2590.                 });
  2591.  
  2592.             return $element;
  2593.         }
  2594.  
  2595.         async render() {
  2596.             this.$container = $("<div>")
  2597.                 .css({
  2598.                     ...styles.practiceModal.grid,
  2599.                     gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))"
  2600.                 });
  2601.  
  2602.             this.kanji.forEach(kanji => {
  2603.                 const $element = this.createKanjiElement(kanji);
  2604.                 this.$container.append($element);
  2605.             });
  2606.             
  2607.             return this.$container;
  2608.         }
  2609.     }
  2610.  
  2611.     class KanjiSelectionModal {
  2612.         constructor(kanji, allUnlockedKanji) {
  2613.             this.kanji = kanji;
  2614.             this.allUnlockedKanji = allUnlockedKanji;
  2615.             this.selectedMode = PRACTICE_MODES.STANDARD;
  2616.             this.state = MODAL_STATES.READY;
  2617.             this.totalKanji = kanji.length;
  2618.             this.$modal = null;
  2619.             this.kanjiGrid = null;
  2620.             this.callbacks = new Map();
  2621.         }
  2622.  
  2623.         on(event, callback) {
  2624.             this.callbacks.set(event, callback);
  2625.             return this;
  2626.         }
  2627.  
  2628.         emit(event, data) {
  2629.             const callback = this.callbacks.get(event);
  2630.             if (callback) callback(data);
  2631.         }
  2632.  
  2633.         validateSelection(selectedCount) {
  2634.             const minRequired = {
  2635.                 [PRACTICE_MODES.STANDARD]: 1,
  2636.                 [PRACTICE_MODES.ENGLISH_TO_KANJI]: 4,
  2637.                 [PRACTICE_MODES.COMBINED]: 4
  2638.             };
  2639.  
  2640.             const required = minRequired[this.selectedMode];
  2641.             const isValid = selectedCount >= required;
  2642.             const startButton = $("#ep-practice-modal-start");
  2643.  
  2644.             if (isValid) {
  2645.                 startButton
  2646.                     .prop("disabled", false)
  2647.                     .text(`Start Review (${selectedCount} Selected)`)
  2648.                     .css({
  2649.                         ...styles.practiceModal.buttons.start.base,
  2650.                         ...styles.practiceModal.buttons.start.kanji,
  2651.                         opacity: 1,
  2652.                         cursor: "pointer"
  2653.                     });
  2654.             } else {
  2655.                 startButton
  2656.                     .prop("disabled", true)
  2657.                     .text(`Select at least ${required} kanji`)
  2658.                     .css({
  2659.                         ...styles.practiceModal.buttons.start.base,
  2660.                         ...styles.practiceModal.buttons.start.kanji,
  2661.                         opacity: 0.5,
  2662.                         cursor: "not-allowed"
  2663.                     });
  2664.             }
  2665.         }
  2666.  
  2667.         updateSelectAllButton(selectedCount) {
  2668.             const selectAllButton = $("#ep-practice-modal-select-all");
  2669.             const isAllSelected = selectedCount === this.totalKanji;
  2670.             
  2671.             selectAllButton
  2672.                 .text(isAllSelected ? "Deselect All" : "Select All")
  2673.                 .css({
  2674.                     color: isAllSelected ? theme.colors.error : theme.colors.white,
  2675.                     borderColor: isAllSelected ? theme.colors.error : theme.colors.white,
  2676.                     '&:hover': {
  2677.                         borderColor: isAllSelected ? theme.colors.error : theme.colors.kanji
  2678.                     }
  2679.                 });
  2680.         }
  2681.  
  2682.         handleSelectionChange(selectedKanji) {
  2683.             const selectedCount = selectedKanji.size;
  2684.             this.updateSelectAllButton(selectedCount);
  2685.             this.validateSelection(selectedCount);
  2686.         }
  2687.  
  2688.         createModeSelector() {
  2689.             const $container = $("<div>")
  2690.                 .css(styles.practiceModal.modeSelector.container);
  2691.  
  2692.             const $label = $("<div>")
  2693.                 .text("Select Practice Mode")
  2694.                 .css(styles.practiceModal.modeSelector.label);
  2695.  
  2696.             const $options = $("<div>")
  2697.                 .css(styles.practiceModal.modeSelector.options);
  2698.  
  2699.             const createOption = (mode, label) => {
  2700.                 const $option = $("<button>")
  2701.                     .text(label)
  2702.                     .css({
  2703.                         ...styles.practiceModal.modeSelector.option.base,
  2704.                         ...(this.selectedMode === mode ? styles.practiceModal.modeSelector.option.selected : {})
  2705.                     })
  2706.                     .on("click", () => {
  2707.                         $options.find("button").css(styles.practiceModal.modeSelector.option.base);
  2708.                         $option.css({
  2709.                             ...styles.practiceModal.modeSelector.option.base,
  2710.                             ...styles.practiceModal.modeSelector.option.selected
  2711.                         });
  2712.                         
  2713.                         this.selectedMode = mode;
  2714.                         const currentSelection = this.kanjiGrid.getSelectedKanji();
  2715.                         this.validateSelection(currentSelection.length);
  2716.                     });
  2717.                 return $option;
  2718.             };
  2719.  
  2720.             $options.append(
  2721.                 createOption(PRACTICE_MODES.STANDARD, "Standard Practice"),
  2722.                 createOption(PRACTICE_MODES.ENGLISH_TO_KANJI, "English → Kanji"),
  2723.                 createOption(PRACTICE_MODES.COMBINED, "Combined Practice")
  2724.             );
  2725.  
  2726.             return $container.append($label, $options);
  2727.         }
  2728.  
  2729.         async render() {
  2730.             this.$modal = $(modalTemplate).appendTo("body");
  2731.             
  2732.             $("#username").text($("p.user-summary__username:first").text());
  2733.             
  2734.             this.$modal.css(styles.practiceModal.backdrop);
  2735.             $("#ep-practice-modal-welcome").css(styles.practiceModal.welcomeText.container);
  2736.             $("#ep-practice-modal-welcome h1").css(styles.practiceModal.welcomeText.username);
  2737.             $("#ep-practice-modal-welcome h2")
  2738.                 .text("Please select the Kanji characters you would like to practice")
  2739.                 .css({
  2740.                     color: theme.colors.white,
  2741.                     opacity: 0.9
  2742.                 });
  2743.  
  2744.             const $modeSelector = this.createModeSelector();
  2745.             $modeSelector.insertAfter("#ep-practice-modal-welcome");
  2746.  
  2747.             $("#ep-practice-modal-footer").css(styles.practiceModal.footer);
  2748.             $("#ep-practice-modal-content").css(styles.practiceModal.contentWrapper);
  2749.             
  2750.             // Initial disabled state with kanji color scheme
  2751.             $("#ep-practice-modal-start").css({
  2752.                 ...styles.practiceModal.buttons.start.base,
  2753.                 ...styles.practiceModal.buttons.start.kanji,
  2754.                 opacity: 0.5,
  2755.                 cursor: "not-allowed"
  2756.             });
  2757.  
  2758.             $("#ep-practice-modal-select-all").css({
  2759.                 ...styles.practiceModal.buttons.selectAll,
  2760.                 '&:hover': {
  2761.                     borderColor: theme.colors.kanji
  2762.                 }
  2763.             });
  2764.  
  2765.             $("#ep-practice-modal-close").css({
  2766.                 ...styles.practiceModal.buttons.exit,
  2767.                 '&:hover': {
  2768.                     borderColor: theme.colors.kanji,
  2769.                     color: theme.colors.kanji
  2770.                 }
  2771.             });
  2772.  
  2773.             this.kanjiGrid = new KanjiGrid(
  2774.                 this.kanji,
  2775.                 this.handleSelectionChange.bind(this)
  2776.             );
  2777.  
  2778.             const $grid = await this.kanjiGrid.render();
  2779.             $("#ep-practice-modal-grid").replaceWith($grid);
  2780.  
  2781.             $("#ep-practice-modal-select-all").on("click", () => {
  2782.                 const isSelectingAll = $("#ep-practice-modal-select-all").text() === "Select All";
  2783.                 this.kanjiGrid.toggleAllKanji(isSelectingAll);
  2784.             });
  2785.  
  2786.             $("#ep-practice-modal-close").on("click", () => {
  2787.                 this.emit(EVENTS.CLOSE);
  2788.             });
  2789.  
  2790.             $("#ep-practice-modal-start").on("click", () => {
  2791.                 const selectedKanji = this.kanjiGrid.getSelectedKanji();
  2792.                 const minRequired = {
  2793.                     [PRACTICE_MODES.STANDARD]: 1,
  2794.                     [PRACTICE_MODES.ENGLISH_TO_KANJI]: 4,
  2795.                     [PRACTICE_MODES.COMBINED]: 4
  2796.                 };
  2797.  
  2798.                 if (selectedKanji.length >= minRequired[this.selectedMode]) {
  2799.                     this.emit(EVENTS.START_REVIEW, {
  2800.                         kanji: selectedKanji,
  2801.                         mode: this.selectedMode,
  2802.                         allUnlockedKanji: this.allUnlockedKanji
  2803.                     });
  2804.                 }
  2805.             });
  2806.  
  2807.             return this.$modal;
  2808.         }
  2809.  
  2810.         remove() {
  2811.             if (this.$modal) {
  2812.                 this.$modal.remove();
  2813.                 this.$modal = null;
  2814.             }
  2815.         }
  2816.     }
  2817.  
  2818.     async function handleKanjiPractice() {
  2819.         try {
  2820.             disableScroll();
  2821.             const kanji = await getCurrentLevelKanji();
  2822.             
  2823.             const selectionModal = new KanjiSelectionModal(kanji, kanji)  // Using current level kanji as unlocked list for now
  2824.                 .on(EVENTS.CLOSE, () => {
  2825.                     enableScroll();
  2826.                     selectionModal.remove();
  2827.                 })
  2828.                 .on(EVENTS.START_REVIEW, (data) => {
  2829.                     selectionModal.remove();
  2830.                     startKanjiReview(data.kanji, data.mode, data.allUnlockedKanji);
  2831.                 });
  2832.  
  2833.             await selectionModal.render();
  2834.  
  2835.         } catch (error) {
  2836.             console.error("Error in kanji practice:", error);
  2837.             enableScroll();
  2838.         }
  2839.     }
  2840.  
  2841.     async function startKanjiReview(selectedKanji, mode, allUnlockedKanji) {
  2842.         try {
  2843.             const reviewSession = new KanjiReviewSession({ 
  2844.                 items: selectedKanji, 
  2845.                 mode: mode,
  2846.                 allUnlockedKanji: allUnlockedKanji
  2847.             });
  2848.             
  2849.             reviewSession.nextItem();
  2850.  
  2851.             const reviewModal = new ReviewSessionModal(reviewSession);
  2852.  
  2853.             reviewModal
  2854.                 .on(REVIEW_EVENTS.CLOSE, () => {
  2855.                     const progress = reviewSession.getProgress();
  2856.                     $("#ep-review-modal-header").remove();
  2857.  
  2858.                     const closingContent = [$("<p>", {
  2859.                         css: {
  2860.                             marginTop: 0,
  2861.                             textAlign: "center"
  2862.                         },
  2863.                         text: "Closing..."
  2864.                     })];
  2865.  
  2866.                     $("#ep-review-content")
  2867.                         .empty()
  2868.                         .append(
  2869.                             $("<div>")
  2870.                                 .css(styles.reviewModal.content)
  2871.                                 .append((() => {
  2872.                                     if (reviewSession.mode === PRACTICE_MODES.STANDARD) {
  2873.                                         closingContent.unshift($("<p>", { 
  2874.                                             css: {
  2875.                                                 ...styles.reviewModal.progress,
  2876.                                                 marginBottom: 0
  2877.                                             },
  2878.                                             text: `Meanings: ${progress.meaningProgress}/${progress.total/2} - Readings: ${progress.readingProgress}/${progress.total/2}`
  2879.                                         }));
  2880.                                         return closingContent;
  2881.                                     } else if (reviewSession.mode === PRACTICE_MODES.ENGLISH_TO_KANJI) {
  2882.                                         closingContent.unshift($("<p>", { 
  2883.                                             css: {
  2884.                                                 ...styles.reviewModal.progress,
  2885.                                                 marginBottom: 0
  2886.                                             },
  2887.                                             text: `${progress.recognitionProgress}/${progress.total} Correct`
  2888.                                         }));
  2889.                                         return closingContent;
  2890.                                     } else { // COMBINATION PRACTICE_MODE
  2891.                                         closingContent.unshift($("<p>", { 
  2892.                                             css: {
  2893.                                                 ...styles.reviewModal.progress,
  2894.                                                 marginBottom: 0
  2895.                                             },
  2896.                                             text: `Meanings: ${progress.meaningProgress}/${progress.total/3} | ` +
  2897.                                                 `Readings: ${progress.readingProgress}/${progress.total/3} | ` +
  2898.                                                 `Recognition: ${progress.recognitionProgress}/${progress.total/3}`
  2899.                                         }));
  2900.                                         return closingContent;
  2901.                                     }
  2902.                                 })())
  2903.                         );
  2904.  
  2905.                     setTimeout(() => {
  2906.                         enableScroll();
  2907.                         reviewModal.remove();
  2908.                     }, 1000);
  2909.                 })
  2910.                 .on(REVIEW_EVENTS.STUDY_AGAIN, () => {
  2911.                     reviewModal.remove();
  2912.                     enableScroll();
  2913.                     handleKanjiPractice();
  2914.                 });
  2915.  
  2916.             await reviewModal.render();
  2917.         } catch (error) {
  2918.             console.error("Error in startKanjiReview:", error);
  2919.             enableScroll();
  2920.         }
  2921.     }
  2922.  
  2923.     class PracticeButton {
  2924.         constructor(type) {
  2925.             this.type = type;
  2926.             this.buttonStyle = this.getButtonStyle();
  2927.             this.handleClick = this.handleClick.bind(this);
  2928.         }
  2929.  
  2930.         getButtonStyle() {
  2931.             return this.type === PRACTICE_TYPES.RADICAL
  2932.                 ? styles.buttons.practice.radical
  2933.                 : styles.buttons.practice.kanji;
  2934.         }
  2935.  
  2936.         async handleClick() {
  2937.             try {
  2938.                 if (this.type === PRACTICE_TYPES.RADICAL) {
  2939.                     await handleRadicalPractice();
  2940.                 } else {
  2941.                     await handleKanjiPractice();
  2942.                 }
  2943.             } catch (error) {
  2944.                 console.error(`Error handling ${this.type} practice:`, error);
  2945.             }
  2946.         }
  2947.  
  2948.         render() {
  2949.             const $button = $("<button>")
  2950.                 .attr("id", `ep-${this.type}-btn`)
  2951.                 .text("Practice")
  2952.                 .css(this.buttonStyle)
  2953.                 .on("click", this.handleClick);
  2954.  
  2955.             const selector = `${SELECTORS.DIV_LEVEL_PROGRESS_CONTENT} ${SELECTORS.DIV_CONTENT_WRAPPER} ${SELECTORS.DIV_CONTENT_TITLE}`;
  2956.             
  2957.             // Doing a conditional check to add the practice button to the correct DIV.
  2958.             const targetSelector = this.type === PRACTICE_TYPES.RADICAL
  2959.                 ? `${selector}:first`
  2960.                 : `${selector}:last`;
  2961.  
  2962.             $button.appendTo(targetSelector);
  2963.  
  2964.             return $button;
  2965.         }
  2966.     }
  2967.  
  2968.     function initializePracticeButtons() {
  2969.         // First style the containers where the "PRACTICE" buttons be
  2970.         $(`${SELECTORS.DIV_LEVEL_PROGRESS_CONTENT} ${SELECTORS.DIV_CONTENT_WRAPPER} ${SELECTORS.DIV_CONTENT_TITLE}`)
  2971.             .css(styles.layout.contentTitle);
  2972.  
  2973.         const radicalButton = new PracticeButton(PRACTICE_TYPES.RADICAL);
  2974.         const kanjiButton = new PracticeButton(PRACTICE_TYPES.KANJI);
  2975.  
  2976.         radicalButton.render();
  2977.         kanjiButton.render();
  2978.     }
  2979.  
  2980.     $(document).ready(() => {
  2981.         initializePracticeButtons();
  2982.     });
  2983.  
  2984. })();
  2985. //# sourceMappingURL=extra-practice.user.js.map