templates/website/page/indexes/test-sat-selection.html.twig line 1

  1. <!-- FILE: /sat/test-selection.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Select a SAT Test - Vrshikyans</title>
  9.     <link rel="icon" href="/students/Vrshikyan_logo.ico" />
  11.     <style>
  12.         :root {
  13.             --bg: #0f1320;
  14.             --bg-2: #101626;
  15.             --surface: rgba(255, 255, 255, 0.06);
  16.             --surface-strong: rgba(255, 255, 255, 0.10);
  17.             --border: rgba(255, 255, 255, 0.18);
  18.             --text: #eef3ff;
  19.             --muted: #b8c2e6;
  20.             --accent: #74a3ff;
  21.             --accent-2: #66e6d2;
  22.             --green: #35d49f;
  23.             --amber: #ffd166;
  24.             --red: #ff6b7c;
  25.             --radius-sm: 10px;
  26.             --radius-md: 14px;
  27.             --radius-lg: 18px;
  28.             --shadow-1: 0 6px 20px rgba(0, 0, 0, .25);
  29.             --shadow-2: 0 14px 40px rgba(0, 0, 0, .35);
  30.             --blur: 14px;
  31.             --speed-fast: .15s;
  32.             --speed: .25s;
  33.             --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  34.         }
  36.         @media (prefers-color-scheme: light) {
  37.             :root {
  38.                 --bg: #f7f8fd;
  39.                 --bg-2: #eef1fb;
  40.                 --surface: rgba(255, 255, 255, .65);
  41.                 --surface-strong: rgba(255, 255, 255, .9);
  42.                 --border: rgba(23, 32, 58, .10);
  43.                 --text: #0f1428;
  44.                 --muted: #475070;
  45.                 --shadow-1: 0 8px 18px rgba(23, 32, 58, .08);
  46.                 --shadow-2: 0 18px 40px rgba(23, 32, 58, .12);
  47.             }
  48.         }
  50.         * {
  51.             box-sizing: border-box;
  52.         }
  54.         html,
  55.         body {
  56.             margin: 0;
  57.             padding: 0;
  58.             min-height: 100%;
  59.             color: var(--text);
  60.             font-family: var(--font);
  61.             background: radial-gradient(1000px 1000px at 10% -10%, #1a2240, transparent 60%), radial-gradient(1400px 800px at 100% 10%, #18244a, transparent 40%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  62.             background-attachment: fixed;
  63.         }
  65.         body::before {
  66.             content: "";
  67.             position: fixed;
  68.             inset: 0;
  69.             background-image:
  70.                     radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, .14) 50%, transparent 51%),
  71.                     radial-gradient(2px 2px at 70% 30%, rgba(255, 255, 255, .09) 50%, transparent 51%),
  72.                     radial-gradient(2px 2px at 30% 80%, rgba(255, 255, 255, .07) 50%, transparent 51%),
  73.                     radial-gradient(2px 2px at 80% 60%, rgba(255, 255, 255, .10) 50%, transparent 51%);
  74.             pointer-events: none;
  75.             opacity: .35;
  76.             z-index: 0;
  77.         }
  79.         .topp {
  80.             margin: auto;
  81.             /* border: 2px solid whitesmoke; */
  82.             backdrop-filter: blur(8px);
  83.             -webkit-backdrop-filter: blur(9px);
  84.             width: min(1200px, 94%);
  85.             height: 10vh;
  86.             border-bottom-left-radius: 15px;
  87.             border-bottom-right-radius: 15px;
  88.         }
  90.         .topp button {
  91.             min-width: 35%;
  92.             background: linear-gradient(180deg, #35d49f, #18b98a);
  93.             color: #041b12;
  94.             box-shadow: 0 10px 20px rgba(24, 185, 138, .18), inset 0 1px 0 rgba(255, 255, 255, .5);
  95.             height: 46px;
  96.             min-width: 160px;
  97.             padding: 0 18px;
  98.             border: 0;
  99.             border-radius: 14px;
  100.             font-weight: 900;
  101.             letter-spacing: .2px;
  102.             cursor: pointer;
  103.             transition: transform var(--speed-fast), box-shadow var(--speed)
  104.         }
  106.         .topp button:hover {
  107.             transform: translateY(-1px)
  108.         }
  110.         .shell {
  111.             width: min(1200px, 94%);
  112.             margin: 32px auto 80px;
  113.             position: relative;
  114.             z-index: 1;
  115.         }
  117.         .header {
  118.             background: var(--surface);
  119.             border: 1px solid var(--border);
  120.             border-radius: var(--radius-lg);
  121.             padding: 16px;
  122.             box-shadow: var(--shadow-2);
  123.             backdrop-filter: blur(var(--blur));
  124.             display: grid;
  125.             grid-template-columns: 1fr auto;
  126.             gap: 12px;
  127.             align-items: center;
  128.         }
  130.         .header h2 {
  131.             margin: 0;
  132.             font-size: 28px;
  133.             letter-spacing: .2px;
  134.         }
  136.         .tools {
  137.             display: flex;
  138.             gap: 10px;
  139.             align-items: center;
  140.         }
  142.         .search {
  143.             position: relative;
  144.         }
  146.         .search input {
  147.             width: 220px;
  148.             height: 40px;
  149.             padding: 0 12px;
  150.             border-radius: 12px;
  151.             border: 1px solid var(--border);
  152.             background: var(--surface-strong);
  153.             color: var(--text);
  154.             outline: none;
  155.             transition: box-shadow var(--speed), transform var(--speed-fast);
  156.         }
  158.         .search input::placeholder {
  159.             color: rgba(255, 255, 255, .55);
  160.         }
  162.         .search input:focus {
  163.             box-shadow: 0 0 0 3px rgba(116, 163, 255, .25);
  164.             transform: translateY(-1px);
  165.         }
  167.         .filter {
  168.             height: 40px;
  169.             border-radius: 12px;
  170.             border: 1px solid var(--border);
  171.             background: var(--surface-strong);
  172.             color: var(--text);
  173.             padding: 0 12px;
  174.             color: gray;
  175.             outline: none;
  176.         }
  178.         #testList {
  179.             display: grid;
  180.             grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  181.             gap: 14px;
  182.             margin-top: 16px;
  183.             background: var(--surface);
  184.             border: 1px solid var(--border);
  185.             border-radius: var(--radius-lg);
  186.             padding: 16px;
  187.             box-shadow: var(--shadow-2);
  188.             backdrop-filter: blur(var(--blur));
  189.         }
  191.         .testButton {
  192.             height: 120px;
  193.             border: 1px solid var(--border);
  194.             border-radius: 16px;
  195.             background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  196.             color: var(--text);
  197.             font-weight: 900;
  198.             font-size: 22px;
  199.             letter-spacing: .3px;
  200.             display: flex;
  201.             align-items: center;
  202.             justify-content: center;
  203.             cursor: pointer;
  204.             position: relative;
  205.             overflow: hidden;
  206.             transition: transform var(--speed-fast), box-shadow var(--speed), border-color var(--speed), background var(--speed);
  207.             box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .06);
  208.             user-select: none;
  209.             animation: popIn .35s ease forwards;
  210.             opacity: 0;
  211.             transform: translateY(4px) scale(.98);
  212.         }
  214.         .testButton::before {
  215.             content: "";
  216.             position: absolute;
  217.             inset: 0;
  218.             background: radial-gradient(600px 300px at -10% -10%, rgba(116, 163, 255, .15), transparent 60%);
  219.             opacity: .4;
  220.             pointer-events: none;
  221.         }
  223.         .testButton:hover {
  224.             transform: translateY(-2px) scale(1.02);
  225.             box-shadow: 0 16px 36px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .08);
  226.             border-color: rgba(116, 163, 255, .55);
  227.             background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  228.         }
  230.         @keyframes popIn {
  231.             to {
  232.                 opacity: 1;
  233.                 transform: translateY(0) scale(1);
  234.             }
  235.         }
  237.         .ribbon {
  238.             position: absolute;
  239.             top: 10px;
  240.             right: -38px;
  241.             width: 140px;
  242.             text-align: center;
  243.             transform: rotate(35deg);
  244.             font-size: 11px;
  245.             font-weight: 900;
  246.             letter-spacing: .3px;
  247.             color: #071b14;
  248.             padding: 4px 0;
  249.             box-shadow: 0 4px 14px rgba(0, 0, 0, .20);
  250.             border: 1px solid rgba(0, 0, 0, .1);
  251.         }
  253.         .ribbon.done {
  254.             background: linear-gradient(180deg, #35d49f, #18b98a);
  255.         }
  257.         .ribbon.part {
  258.             background: linear-gradient(180deg, #ffd166, #ffbf55);
  259.         }
  261.         .ribbon.none {
  262.             background: linear-gradient(180deg, #ff9aa8, #ff6b7c);
  263.         }
  265.         .testButton.completed {
  266.             box-shadow: 0 12px 26px rgba(53, 212, 159, .20), inset 0 1px 0 rgba(255, 255, 255, .08);
  267.             border-color: rgba(53, 212, 159, .45);
  268.         }
  270.         .testButton.partial {
  271.             box-shadow: 0 12px 26px rgba(255, 209, 102, .20), inset 0 1px 0 rgba(255, 255, 255, .08);
  272.             border-color: rgba(255, 209, 102, .45);
  273.         }
  275.         .testButton.not-started {
  276.             box-shadow: 0 12px 26px rgba(255, 107, 124, .20), inset 0 1px 0 rgba(255, 255, 255, .08);
  277.             border-color: rgba(255, 107, 124, .45);
  278.         }
  280.         .legend {
  281.             display: flex;
  282.             gap: 10px;
  283.             align-items: center;
  284.             margin-top: 10px;
  285.             color: var(--muted);
  286.             font-size: 13px;
  287.         }
  289.         .dot {
  290.             width: 10px;
  291.             height: 10px;
  292.             border-radius: 50%;
  293.             display: inline-block;
  294.             margin-right: 6px;
  295.         }
  297.         .dot.done {
  298.             background: var(--green);
  299.         }
  301.         .dot.part {
  302.             background: var(--amber);
  303.         }
  305.         .dot.none {
  306.             background: var(--red);
  307.         }
  309.         .testButton[title] {
  310.             position: relative;
  311.         }
  313.         .testButton[title]:hover::after {
  314.             content: attr(title);
  315.             position: absolute;
  316.             bottom: -34px;
  317.             left: 50%;
  318.             transform: translateX(-50%);
  319.             background: rgba(0, 0, 0, .75);
  320.             color: #fff;
  321.             padding: 6px 10px;
  322.             border-radius: 8px;
  323.             font-size: 12px;
  324.             white-space: nowrap;
  325.             pointer-events: none;
  326.         }
  327.         #go{height:40px;width:20%;text-align:center; padding:0 18px;border:0;border-radius:14px;font-weight:900;letter-spacing:.2px;cursor:pointer;transition:transform var(--speed-fast), box-shadow var(--speed), filter var(--speed); background:linear-gradient(180deg, rgb(244, 228, 228), rgb(98, 91, 91));color:#041b12;box-shadow:0 10px 24px rgba(24,185,138,.22), inset 0 1px 0 rgba(255,255,255,.5)}
  328.         #go:hover{transform: translateY(-5px);}
  329.         @media (max-width: 640px) {
  330.             .header {
  331.                 grid-template-columns: 1fr;
  332.             }
  334.             .tools {
  335.                 justify-content: stretch;
  336.             }
  338.             .search input {
  339.                 width: 100%;
  340.             }
  341.         }
  342.     </style>
  343.     <link rel="stylesheet" href="{{ asset('css/navbar.css') }}" />
  344.     <script>
  345.       (() => {
  346.         const saved = localStorage.getItem('theme');
  347.         if (saved) {
  348.           document.documentElement.setAttribute('data-theme', saved);
  349.         } else {
  350.           document.documentElement.setAttribute(
  351.             'data-theme',
  352.             matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  353.           );
  354.         }
  355.       })();
  356.     </script>
  357. </head>
  359. <body>
  360.   <nav class="nav" role="navigation" aria-label="Primary">
  361.   <div class="nav-inner">
  362.     <a class="brand" href="/" aria-label="Exam-hub">
  363.       <span class="logo" aria-hidden="true" style="overflow: hidden;">
  364.         <img src="../students/Vrshikyan_logo.ico" width="39px" alt="Vrshikyans logo">
  365.       </span>
  366.       <span>Vrshikyans</span>&nbsp;&nbsp;
  367.     </a>
  369.     <div class="nav-links">
  370.       <a class="nav-link" data-section="toefl" href="./test-selection?type=toefl" id="toeflNav">TOEFL</a>
  371.       <a class="nav-link" data-section="sat" href="./test-sat-selection#sat" id="satNav">SAT</a>
  372.       <a class="nav-link" data-section="act" href="./test-sat-selection#act"id="actNav">ACT</a>
  373.       <a class="nav-link" data-section="reading" href="./test-selection?type=readingPractice" id="readingPrNav">Reading Practice</a>
  374.       <a class="nav-link" data-section="support" href="./support">Support</a>
  375.       <a class="nav-link" data-section="reviews" href="./reviews">Reviews</a>
  376.     </div>
  378.     <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
  380.     <div class="spacer"></div>
  381.     <button id="themeToggle" class="theme-btn" aria-label="Toggle theme">🌑</button>
  382.     <a class="cta" id="startTop" href="../indexes/account" aria-label="Account"
  383.       style="width: 40px; height: 40px; background: whitesmoke;">👤</a>
  384.   </div>
  385. </nav>
  386. <div class="mobile-menu" id="mobileMenu">
  387.   <div class="mobile-nav-links">
  388.     <a class="mobile-nav-link" href="./test-selection?type=toefl">TOEFL</a>
  389.     <a class="mobile-nav-link" href="./test-sat-selection#sat">SAT</a>
  390.     <a class="mobile-nav-link" href="./test-sat-selection#act">ACT</a>
  391.     <a class="mobile-nav-link" href="./test-selection?type=readingPractice">Reading Practice</a>
  392.     <a class="mobile-nav-link" href="./support">Support</a>
  393.     <a class="mobile-nav-link" href="./reviews">Reviews</a>
  394.   </div>
  395. </div>
  396. <div class="shell">
  397.     <div class="header">
  398.         <h2 id="pageTitle">Select a SAT Test</h2>
  399.         <div class="tools">
  400.             <!-- SAT/ACT selector -->
  401.             <select id="examPicker" class="filter" title="Choose exam">
  402.                 <option value="sat" selected>SAT</option>
  403.                 <option value="act">ACT</option>
  404.             </select>
  406.             <div class="search"><input id="quickFind" type="number" min="1" placeholder="Go to test #" /></div>
  407.             <button id="go">Go</button>
  409.             <select id="statusFilter" class="filter" title="Filter by status">
  410.                 <option value="all">All</option>
  411.                 <option value="completed">Completed</option>
  412.                 <option value="partial">In progress</option>
  413.                 <option value="not-started">Not started</option>
  414.             </select>
  415.         </div>
  416.     </div>
  418.     <div class="legend">
  419.         <span><span class="dot done"></span>Completed</span>
  420.         <span><span class="dot part"></span>In progress</span>
  421.         <span><span class="dot none"></span>Not started</span>
  422.     </div>
  424.     <div id="testList"></div>
  425. </div>
  426. <script src="{{ asset('js/navbar.js') }}"></script>
  427. <script>
  428.     // === SAT/ACT Test Selection — SAME DESIGN, now hash-aware (#sat / #act) ===
  430.     const testListEl = document.getElementById("testList");
  431.     const quickFind = document.getElementById("quickFind");
  432.     const statusFilter = document.getElementById("statusFilter");
  433.     const examPicker = document.getElementById("examPicker");
  434.     const pageTitle = document.getElementById("pageTitle");
  436.     // You can change counts as needed
  437.     const TOTAL_SAT_TESTS = 52;
  438.     const TOTAL_ACT_TESTS = 31;
  440.     // SAT: math-only tests (keep your list)
  441.     const MATH_ONLY_TESTS = new Set([
  442.          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
  443.         17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
  444.         31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44,
  445.         45, 46, 47, 48, 49, 50, 51, 52
  446.     ]);
  448.     function sectionsForSAT(id) {
  449.         return MATH_ONLY_TESTS.has(id) ? ['math'] : ['english', 'math'];
  450.     }
  452.     function getSATStatusForTest(id) {
  453.         const required = sectionsForSAT(id);
  454.         let doneCount = 0;
  455.         for (const sec of required) {
  456.             const key = `result_sat_${id}_${sec}`;
  457.             const val = localStorage.getItem(key);
  458.             if (val !== null && String(val).trim() !== "") doneCount++;
  459.         }
  460.         if (doneCount === 0) return "not-started";
  461.         if (doneCount === required.length) return "completed";
  462.         return "partial";
  463.     }
  465.     // ACT: single-section (Math) status
  466.     function getACTStatusForTest(id) {
  467.         const key = `result_act_${id}_math`;
  468.         const val = localStorage.getItem(key);
  469.         if (val && String(val).trim() !== "") return "completed";
  470.         return "not-started";
  471.     }
  473.     function ribbonFor(status) {
  474.         if (status === "completed") return '<span class="ribbon done">COMPLETED</span>';
  475.         if (status === "partial")   return '<span class="ribbon part">IN&nbsp;PROGRESS</span>';
  476.         return '<span class="ribbon none">NOT&nbsp;STARTED</span>';
  477.     }
  479.     function titleFor(status, exam) {
  480.         if (exam === 'sat') {
  481.             if (status === "completed") return "All required sections recorded for this SAT test";
  482.             if (status === "partial")   return "Some required sections recorded";
  483.             return "No sections done yet";
  484.         } else {
  485.             if (status === "completed") return "ACT Math completed";
  486.             return "Not started";
  487.         }
  488.     }
  490.     function selectedExam() {
  491.         return (examPicker?.value || "sat").toLowerCase();
  492.     }
  494.     // 🔹 Sync URL hash with exam (#sat / #act)
  495.     function syncHashWithExam(exam) {
  496.         const desiredHash = '#' + exam;
  497.         if (window.location.hash !== desiredHash) {
  498.             const base = window.location.pathname + window.location.search;
  499.             history.replaceState(null, '', base + desiredHash);
  500.         }
  501.     }
  502.     function updateActiveNav() {
  503.       const satNav = document.getElementById('satNav');
  504.       const actNav = document.getElementById('actNav');
  505.     
  506.       satNav.classList.toggle('active', examPicker.value === 'sat');
  507.       actNav.classList.toggle('active', examPicker.value === 'act');
  508.     }
  509.     
  511.     // 🔹 Initial exam: from hash -> session -> SAT
  512.     (function initExamFromHash() {
  513.         const hashExamRaw = (window.location.hash || '').replace('#','').toLowerCase();
  514.         let initialExam = hashExamRaw || (sessionStorage.getItem('EXAM_SELECTION') || 'sat');
  515.         if (!['sat','act'].includes(initialExam)) initialExam = 'sat';
  517.         if (examPicker) examPicker.value = initialExam;
  518.         sessionStorage.setItem('EXAM_SELECTION', initialExam);
  519.         syncHashWithExam(initialExam);
  520.     })();
  521.     function applyExam(exam) {
  522.       if (!['sat', 'act'].includes(exam)) exam = 'sat';
  523.       examPicker.value = exam;
  524.       sessionStorage.setItem('EXAM_SELECTION', exam);
  525.       syncHashWithExam(exam);
  526.       updateActiveNav();
  527.       renderGrid();
  528.     }
  529.     
  530.     // 🔹 Initial exam: from hash -> session -> SAT
  531.     (function initExamFromHash() {
  532.       const hashExamRaw = (window.location.hash || '').replace('#','').toLowerCase();
  533.       let initialExam = hashExamRaw || (sessionStorage.getItem('EXAM_SELECTION') || 'sat');
  534.       applyExam(initialExam);
  535.     })();
  536.     
  537.     // 🔹 If user navigates between #sat and #act without reload
  538.     window.addEventListener('hashchange', () => {
  539.       const hashExam = (window.location.hash || '').replace('#','').toLowerCase();
  540.       applyExam(hashExam || 'sat');
  541.     });
  543.     function renderGrid() {
  544.         const exam = selectedExam();
  545.         const total = exam === "sat" ? TOTAL_SAT_TESTS : TOTAL_ACT_TESTS;
  547.         pageTitle.textContent = exam === "sat" ? "Select a SAT Test" : "Select an ACT Test";
  549.         testListEl.innerHTML = "";
  550.         for (let i = 1; i <= total; i++) {
  551.             const status = (exam === "sat") ? getSATStatusForTest(i) : getACTStatusForTest(i);
  552.             if (statusFilter.value !== "all" && statusFilter.value !== status) continue;
  554.             const btn = document.createElement("button");
  555.             btn.className = `testButton ${status}`;
  556.             btn.title = titleFor(status, exam);
  557.             btn.style.animationDelay = `${i * 8}ms`;
  558.             btn.innerHTML = `${ribbonFor(status)}${exam.toUpperCase()} ${i}`;
  560.             // ✅ Common section-selection page for BOTH SAT and ACT:
  561.             btn.onclick = () => {
  562.                 const dest = `section-sat-selection?exam=${encodeURIComponent(exam)}&test=${i}`;
  563.                 if (exam === "sat") {
  564.                     sessionStorage.setItem("SAT_TEST_ID", String(i));
  565.                 } else {
  566.                     sessionStorage.setItem("ACT_TEST_ID", String(i));
  567.                 }
  568.                 window.location.href = dest;
  569.             };
  571.             testListEl.appendChild(btn);
  572.         }
  573.     }
  575.     // Quick "Go" uses current exam + range and same section-selection page
  576.     const go = document.getElementById("go");
  577.     function find() {
  578.         const exam = selectedExam();
  579.         const total = exam === "sat" ? TOTAL_SAT_TESTS : TOTAL_ACT_TESTS;
  580.         const n = parseInt(quickFind.value, 10);
  582.         if (!Number.isNaN(n) && n >= 1 && n <= total) {
  583.             if (exam === "sat") {
  584.                 sessionStorage.setItem("SAT_TEST_ID", String(n));
  585.             } else {
  586.                 sessionStorage.setItem("ACT_TEST_ID", String(n));
  587.             }
  588.             window.location.href = `/indexes/section-sat-selection?exam=${encodeURIComponent(exam)}&test=${n}`;
  589.         } else {
  590.             quickFind.style.transition = "0.5s";
  591.             quickFind.style.color = "red";
  592.             setTimeout(() => quickFind.style.color = "white", 1600);
  593.         }
  594.     }
  595.     quickFind.addEventListener("keydown", (e) => { if (e.key === "Enter") find(); });
  596.     go.onclick = find;
  598.     statusFilter.addEventListener("change", renderGrid);
  600.     // When exam changes via picker → update hash + session + grid
  601.     examPicker.addEventListener("change", () => {
  602.       applyExam(selectedExam());
  603.     });
  606.     // Initial render using exam already set from hash/session
  607.     renderGrid();
  609.     document.addEventListener("contextmenu", (e) => e.preventDefault());
  610. </script>
  612. </body>
  614. </html>