API tools faq
paste
XTaylorSpenceX

Time Loop Trivia Trials

XTaylorSpenceX
Oct 10th, 2025
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 33.93 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Time Loop Trivia Trials</title>
  7.     <style>
  8.         @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap');
  9.        
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.        
  16.         body {
  17.             font-family: 'Space Mono', monospace;
  18.             background: linear-gradient(135deg, #0a0e27 0%, #1a0033 50%, #0a0e27 100%);
  19.             color: #fff;
  20.             min-height: 100vh;
  21.             overflow-x: hidden;
  22.             position: relative;
  23.         }
  24.        
  25.         body::before {
  26.             content: '';
  27.             position: fixed;
  28.             inset: 0;
  29.             background: repeating-linear-gradient(
  30.                 0deg,
  31.                 transparent,
  32.                 transparent 2px,
  33.                 rgba(147, 51, 234, 0.03) 2px,
  34.                 rgba(147, 51, 234, 0.03) 4px
  35.             );
  36.             pointer-events: none;
  37.             animation: scanlines 8s linear infinite;
  38.         }
  39.        
  40.         @keyframes scanlines {
  41.             0% { transform: translateY(0); }
  42.             100% { transform: translateY(10px); }
  43.         }
  44.        
  45.         .container {
  46.             max-width: 900px;
  47.             margin: 0 auto;
  48.             padding: 20px;
  49.             position: relative;
  50.             z-index: 1;
  51.         }
  52.        
  53.         .header {
  54.             text-align: center;
  55.             margin-bottom: 30px;
  56.             animation: glowPulse 2s ease-in-out infinite;
  57.         }
  58.        
  59.         h1 {
  60.             font-family: 'Orbitron', sans-serif;
  61.             font-size: 2.5rem;
  62.             font-weight: 900;
  63.             background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffff);
  64.             background-size: 200% 200%;
  65.             -webkit-background-clip: text;
  66.             background-clip: text;
  67.             -webkit-text-fill-color: transparent;
  68.             animation: gradient 3s ease infinite;
  69.             margin-bottom: 10px;
  70.             text-shadow: 0 0 30px rgba(147, 51, 234, 0.5);
  71.         }
  72.        
  73.         @keyframes gradient {
  74.             0%, 100% { background-position: 0% 50%; }
  75.             50% { background-position: 100% 50%; }
  76.         }
  77.        
  78.         @keyframes glowPulse {
  79.             0%, 100% { filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.5)); }
  80.             50% { filter: drop-shadow(0 0 40px rgba(147, 51, 234, 0.8)); }
  81.         }
  82.        
  83.         .loop-info {
  84.             display: flex;
  85.             justify-content: space-between;
  86.             margin-bottom: 20px;
  87.             padding: 15px;
  88.             background: rgba(147, 51, 234, 0.1);
  89.             border: 2px solid rgba(147, 51, 234, 0.3);
  90.             border-radius: 10px;
  91.             backdrop-filter: blur(5px);
  92.         }
  93.        
  94.         .loop-counter {
  95.             font-size: 1.2rem;
  96.             color: #00ffff;
  97.             text-shadow: 0 0 10px currentColor;
  98.         }
  99.        
  100.         .timeline {
  101.             height: 80px;
  102.             background: rgba(0, 0, 0, 0.5);
  103.             border-radius: 10px;
  104.             padding: 10px;
  105.             margin-bottom: 30px;
  106.             position: relative;
  107.             overflow-x: auto;
  108.             overflow-y: hidden;
  109.             border: 1px solid rgba(147, 51, 234, 0.3);
  110.         }
  111.        
  112.         .timeline-track {
  113.             height: 100%;
  114.             position: relative;
  115.             display: flex;
  116.             align-items: center;
  117.             gap: 15px;
  118.             padding: 0 10px;
  119.             min-width: max-content;
  120.         }
  121.        
  122.         .checkpoint {
  123.             width: 15px;
  124.             height: 15px;
  125.             border-radius: 50%;
  126.             background: rgba(147, 51, 234, 0.3);
  127.             border: 2px solid rgba(147, 51, 234, 0.5);
  128.             position: relative;
  129.             z-index: 2;
  130.             transition: all 0.3s ease;
  131.             flex-shrink: 0;
  132.         }
  133.        
  134.         .checkpoint.active {
  135.             background: linear-gradient(135deg, #00ffff, #ff00ff);
  136.             box-shadow: 0 0 20px rgba(147, 51, 234, 0.8),
  137.                         inset 0 0 10px rgba(255, 255, 255, 0.5);
  138.             animation: checkpointPulse 1s ease-in-out infinite;
  139.         }
  140.        
  141.         .checkpoint.completed {
  142.             background: #00ff88;
  143.             border-color: #00ff88;
  144.             box-shadow: 0 0 15px #00ff88;
  145.         }
  146.        
  147.         @keyframes checkpointPulse {
  148.             0%, 100% { transform: scale(1); }
  149.             50% { transform: scale(1.3); }
  150.         }
  151.        
  152.         .timeline-line {
  153.             position: absolute;
  154.             height: 2px;
  155.             background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.5), transparent);
  156.             top: 50%;
  157.             left: 0;
  158.             right: 0;
  159.             transform: translateY(-50%);
  160.             z-index: 1;
  161.         }
  162.        
  163.         .timeline::-webkit-scrollbar {
  164.             height: 6px;
  165.         }
  166.        
  167.         .timeline::-webkit-scrollbar-track {
  168.             background: rgba(147, 51, 234, 0.1);
  169.             border-radius: 3px;
  170.         }
  171.        
  172.         .timeline::-webkit-scrollbar-thumb {
  173.             background: rgba(147, 51, 234, 0.5);
  174.             border-radius: 3px;
  175.         }
  176.        
  177.         .timeline::-webkit-scrollbar-thumb:hover {
  178.             background: rgba(147, 51, 234, 0.7);
  179.         }
  180.        
  181.         .question-container {
  182.             background: rgba(0, 0, 0, 0.7);
  183.             border: 2px solid rgba(147, 51, 234, 0.5);
  184.             border-radius: 15px;
  185.             padding: 30px;
  186.             margin-bottom: 20px;
  187.             backdrop-filter: blur(10px);
  188.             position: relative;
  189.             overflow: hidden;
  190.         }
  191.        
  192.         .question-container::before {
  193.             content: '';
  194.             position: absolute;
  195.             inset: -2px;
  196.             background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffff);
  197.             border-radius: 15px;
  198.             opacity: 0;
  199.             z-index: -1;
  200.             transition: opacity 0.3s ease;
  201.         }
  202.        
  203.         .question-container:hover::before {
  204.             opacity: 0.3;
  205.             animation: rotate 3s linear infinite;
  206.         }
  207.        
  208.         @keyframes rotate {
  209.             0% { transform: rotate(0deg); }
  210.             100% { transform: rotate(360deg); }
  211.         }
  212.        
  213.         .question {
  214.             font-size: 1.3rem;
  215.             margin-bottom: 20px;
  216.             color: #fff;
  217.             text-shadow: 0 0 5px rgba(147, 51, 234, 0.5);
  218.         }
  219.        
  220.         .answers {
  221.             display: grid;
  222.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  223.             gap: 15px;
  224.         }
  225.        
  226.         .answer-btn {
  227.             padding: 15px 20px;
  228.             background: rgba(147, 51, 234, 0.2);
  229.             border: 2px solid rgba(147, 51, 234, 0.5);
  230.             border-radius: 10px;
  231.             color: #fff;
  232.             font-size: 1rem;
  233.             cursor: pointer;
  234.             transition: all 0.3s ease;
  235.             position: relative;
  236.             overflow: hidden;
  237.         }
  238.        
  239.         .answer-btn::before {
  240.             content: '';
  241.             position: absolute;
  242.             top: 50%;
  243.             left: 50%;
  244.             width: 0;
  245.             height: 0;
  246.             background: radial-gradient(circle, rgba(0, 255, 255, 0.5), transparent);
  247.             transform: translate(-50%, -50%);
  248.             transition: width 0.3s, height 0.3s;
  249.         }
  250.        
  251.         .answer-btn:hover {
  252.             background: rgba(147, 51, 234, 0.4);
  253.             border-color: #00ffff;
  254.             transform: translateY(-2px);
  255.             box-shadow: 0 5px 20px rgba(147, 51, 234, 0.5);
  256.         }
  257.        
  258.         .answer-btn:hover::before {
  259.             width: 100%;
  260.             height: 100%;
  261.         }
  262.        
  263.         .answer-btn.correct {
  264.             background: rgba(0, 255, 136, 0.3);
  265.             border-color: #00ff88;
  266.             animation: correctPulse 0.5s ease;
  267.         }
  268.        
  269.         .answer-btn.wrong {
  270.             background: rgba(255, 0, 68, 0.3);
  271.             border-color: #ff0044;
  272.             animation: wrongShake 0.5s ease;
  273.         }
  274.        
  275.         @keyframes correctPulse {
  276.             0%, 100% { transform: scale(1); }
  277.             50% { transform: scale(1.05); }
  278.         }
  279.        
  280.         @keyframes wrongShake {
  281.             0%, 100% { transform: translateX(0); }
  282.             25% { transform: translateX(-10px); }
  283.             75% { transform: translateX(10px); }
  284.         }
  285.        
  286.         .memory-fragments {
  287.             margin-top: 20px;
  288.             padding: 20px;
  289.             background: rgba(0, 255, 255, 0.05);
  290.             border: 1px solid rgba(0, 255, 255, 0.3);
  291.             border-radius: 10px;
  292.             min-height: 120px;
  293.             max-height: 300px;
  294.             overflow-y: auto;
  295.         }
  296.        
  297.         .memory-fragments::-webkit-scrollbar {
  298.             width: 6px;
  299.         }
  300.        
  301.         .memory-fragments::-webkit-scrollbar-track {
  302.             background: rgba(0, 255, 255, 0.1);
  303.             border-radius: 3px;
  304.         }
  305.        
  306.         .memory-fragments::-webkit-scrollbar-thumb {
  307.             background: rgba(0, 255, 255, 0.5);
  308.             border-radius: 3px;
  309.         }
  310.        
  311.         .memory-title {
  312.             font-size: 0.9rem;
  313.             color: #00ffff;
  314.             margin-bottom: 10px;
  315.             text-transform: uppercase;
  316.             letter-spacing: 2px;
  317.         }
  318.        
  319.         .fragment {
  320.             padding: 8px 12px;
  321.             margin: 5px;
  322.             background: rgba(147, 51, 234, 0.2);
  323.             border-left: 3px solid #00ffff;
  324.             border-radius: 5px;
  325.             font-size: 0.9rem;
  326.             display: inline-block;
  327.             animation: fadeInFragment 0.5s ease;
  328.         }
  329.        
  330.         @keyframes fadeInFragment {
  331.             from {
  332.                 opacity: 0;
  333.                 transform: translateX(-20px);
  334.             }
  335.             to {
  336.                 opacity: 1;
  337.                 transform: translateX(0);
  338.             }
  339.         }
  340.        
  341.         .alternate-path {
  342.             margin-top: 15px;
  343.             padding: 15px;
  344.             background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
  345.             border: 2px dashed rgba(255, 0, 255, 0.5);
  346.             border-radius: 10px;
  347.             display: none;
  348.         }
  349.        
  350.         .alternate-path.unlocked {
  351.             display: block;
  352.             animation: pathUnlock 0.5s ease;
  353.         }
  354.        
  355.         @keyframes pathUnlock {
  356.             from {
  357.                 opacity: 0;
  358.                 transform: scale(0.9);
  359.             }
  360.             to {
  361.                 opacity: 1;
  362.                 transform: scale(1);
  363.             }
  364.         }
  365.        
  366.         .perfect-timeline {
  367.             display: none;
  368.             position: fixed;
  369.             inset: 0;
  370.             background: rgba(0, 0, 0, 0.9);
  371.             z-index: 1000;
  372.             justify-content: center;
  373.             align-items: center;
  374.             backdrop-filter: blur(10px);
  375.         }
  376.        
  377.         .perfect-timeline.active {
  378.             display: flex;
  379.             animation: fadeIn 0.5s ease;
  380.         }
  381.        
  382.         .victory-message {
  383.             text-align: center;
  384.             padding: 40px;
  385.             background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(0, 255, 255, 0.2));
  386.             border: 3px solid transparent;
  387.             background-clip: padding-box;
  388.             border-image: linear-gradient(45deg, #00ffff, #ff00ff, #00ffff) 1;
  389.             border-radius: 20px;
  390.             max-width: 600px;
  391.         }
  392.        
  393.         .victory-title {
  394.             font-family: 'Orbitron', sans-serif;
  395.             font-size: 3rem;
  396.             background: linear-gradient(45deg, #00ff88, #00ffff, #ff00ff);
  397.             -webkit-background-clip: text;
  398.             background-clip: text;
  399.             -webkit-text-fill-color: transparent;
  400.             margin-bottom: 20px;
  401.             animation: victoryGlow 1s ease-in-out infinite;
  402.         }
  403.        
  404.         @keyframes victoryGlow {
  405.             0%, 100% { text-shadow: 0 0 30px rgba(0, 255, 136, 0.8); }
  406.             50% { text-shadow: 0 0 50px rgba(0, 255, 255, 1); }
  407.         }
  408.        
  409.         .reset-btn {
  410.             padding: 15px 30px;
  411.             background: linear-gradient(135deg, #9333ea, #00ffff);
  412.             border: none;
  413.             border-radius: 10px;
  414.             color: #fff;
  415.             font-size: 1.1rem;
  416.             font-weight: bold;
  417.             cursor: pointer;
  418.             transition: all 0.3s ease;
  419.             margin-top: 20px;
  420.         }
  421.        
  422.         .reset-btn:hover {
  423.             transform: translateY(-2px);
  424.             box-shadow: 0 10px 30px rgba(147, 51, 234, 0.5);
  425.         }
  426.        
  427.         @keyframes fadeIn {
  428.             from { opacity: 0; }
  429.             to { opacity: 1; }
  430.         }
  431.        
  432.         .glitch {
  433.             position: relative;
  434.             animation: glitchText 2s infinite;
  435.         }
  436.        
  437.         @keyframes glitchText {
  438.             0%, 100% { text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; }
  439.             25% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; }
  440.             50% { text-shadow: 2px 0 #00ffff, -2px 0 #ff00ff; }
  441.             75% { text-shadow: -2px 0 #00ffff, 2px 0 #ff00ff; }
  442.         }
  443.     </style>
  444. </head>
  445. <body>
  446.     <div class="container">
  447.         <div class="header">
  448.             <h1 class="glitch">TIME LOOP TRIVIA TRIALS</h1>
  449.             <p style="color: #00ffff; font-size: 0.9rem;">Knowledge persists. Time does not.</p>
  450.         </div>
  451.        
  452.         <div class="loop-info">
  453.             <div class="loop-counter">Loop Iteration: <span id="loopCount">1</span></div>
  454.             <div class="loop-counter">Progress: <span id="progressCount">0</span>/<span id="totalQuestions">20</span></div>
  455.         </div>
  456.        
  457.         <div id="encouragement" style="text-align: center; color: #ff00ff; font-size: 0.9rem; margin-bottom: 10px; height: 20px;"></div>
  458.        
  459.         <div class="timeline">
  460.             <div class="timeline-line"></div>
  461.             <div class="timeline-track" id="timelineTrack"></div>
  462.         </div>
  463.        
  464.         <div class="question-container" id="questionContainer">
  465.             <div class="question" id="questionText">Loading temporal paradox...</div>
  466.             <div class="answers" id="answersContainer"></div>
  467.             <div class="alternate-path" id="alternatePath"></div>
  468.         </div>
  469.        
  470.         <div class="memory-fragments">
  471.             <div class="memory-title">⟨ Memory Fragments ⟩</div>
  472.             <div id="memoryContainer"></div>
  473.         </div>
  474.     </div>
  475.    
  476.     <div class="perfect-timeline" id="perfectTimeline">
  477.         <div class="victory-message">
  478.             <h2 class="victory-title">PERFECT TIMELINE ACHIEVED!</h2>
  479.             <p style="font-size: 1.2rem; margin-bottom: 10px;">Loops Required: <span id="finalLoops">0</span></p>
  480.             <p style="color: #00ffff;">You have mastered the temporal continuum.</p>
  481.             <button class="reset-btn" onclick="hardReset()">Begin New Timeline</button>
  482.         </div>
  483.     </div>
  484.    
  485.     <script>
  486.         const gameState = {
  487.             currentLoop: 1,
  488.             currentQuestion: 0,
  489.             score: 0,
  490.             memoryFragments: [],
  491.             unlockedPaths: [],
  492.             questionHistory: [],
  493.             perfectRun: true
  494.         };
  495.        
  496.         const questions = [
  497.             {
  498.                 id: 'q1',
  499.                 question: 'What planet in our solar system is known as the "Red Planet"?',
  500.                 answers: ['Venus', 'Mars', 'Jupiter', 'Mercury'],
  501.                 correct: 1,
  502.                 fragment: 'Iron oxide gives the rusty color'
  503.             },
  504.             {
  505.                 id: 'q2',
  506.                 question: 'In computing, what does "AI" stand for?',
  507.                 answers: ['Automated Interface', 'Artificial Intelligence', 'Advanced Integration', 'Analog Input'],
  508.                 correct: 1,
  509.                 fragment: 'Machines that think and learn',
  510.                 alternatePath: {
  511.                     trigger: 0,
  512.                     hint: 'Automation might reveal a hidden path...',
  513.                     unlocksAt: 'q8'
  514.                 }
  515.             },
  516.             {
  517.                 id: 'q3',
  518.                 question: 'Which science fiction movie features the line "I\'ll be back"?',
  519.                 answers: ['Blade Runner', 'The Matrix', 'The Terminator', 'RoboCop'],
  520.                 correct: 2,
  521.                 fragment: 'Time-traveling cyborg assassin'
  522.             },
  523.             {
  524.                 id: 'q4',
  525.                 question: 'What is the speed of light in a vacuum?',
  526.                 answers: ['186,000 miles/second', '186,000 km/second', '299,792 km/second', '299,792 miles/second'],
  527.                 correct: 2,
  528.                 fragment: 'Nothing travels faster than c',
  529.                 shortcut: {
  530.                     enabled: false,
  531.                     question: 'Lightspeed bypass: How many times can light circle Earth in one second?',
  532.                     answers: ['3 times', '7 times', '12 times', '20 times'],
  533.                     correct: 1
  534.                 }
  535.             },
  536.             {
  537.                 id: 'q5',
  538.                 question: 'In the periodic table, what is the chemical symbol for Gold?',
  539.                 answers: ['Go', 'Gd', 'Au', 'Ag'],
  540.                 correct: 2,
  541.                 fragment: 'Aurum shines eternal'
  542.             },
  543.             {
  544.                 id: 'q6',
  545.                 question: 'What phenomenon makes the sky appear blue during the day?',
  546.                 answers: ['Reflection', 'Refraction', 'Scattering', 'Absorption'],
  547.                 correct: 2,
  548.                 fragment: 'Short wavelengths scatter more'
  549.             },
  550.             {
  551.                 id: 'q7',
  552.                 question: 'Which video game features a character collecting rings and running at super speed?',
  553.                 answers: ['Mario', 'Sonic', 'Crash Bandicoot', 'Mega Man'],
  554.                 correct: 1,
  555.                 fragment: 'Gotta go fast through loops'
  556.             },
  557.             {
  558.                 id: 'q8',
  559.                 question: 'What year did humans first land on the Moon?',
  560.                 answers: ['1967', '1969', '1971', '1973'],
  561.                 correct: 1,
  562.                 fragment: 'One giant leap in \'69',
  563.                 shortcut: {
  564.                     enabled: false,
  565.                     question: 'Lunar shortcut: Which Apollo mission was it?',
  566.                     answers: ['Apollo 9', 'Apollo 11', 'Apollo 13', 'Apollo 15'],
  567.                     correct: 1
  568.                 }
  569.             },
  570.             {
  571.                 id: 'q9',
  572.                 question: 'In Star Wars, what color is Luke Skywalker\'s first lightsaber?',
  573.                 answers: ['Red', 'Green', 'Blue', 'Purple'],
  574.                 correct: 2,
  575.                 fragment: 'Inherited from his father',
  576.                 alternatePath: {
  577.                     trigger: 1,
  578.                     hint: 'Green leads to a different timeline...',
  579.                     unlocksAt: 'q15'
  580.                 }
  581.             },
  582.             {
  583.                 id: 'q10',
  584.                 question: 'What does "HTTP" stand for in web addresses?',
  585.                 answers: ['HyperText Transfer Protocol', 'High Tech Transfer Process', 'Home Terminal Transfer Port', 'HyperText Terminal Program'],
  586.                 correct: 0,
  587.                 fragment: 'The web\'s communication rules'
  588.             },
  589.             {
  590.                 id: 'q11',
  591.                 question: 'Which planet has the most moons in our solar system?',
  592.                 answers: ['Jupiter', 'Saturn', 'Uranus', 'Neptune'],
  593.                 correct: 1,
  594.                 fragment: 'Ringed giant with 146 satellites'
  595.             },
  596.             {
  597.                 id: 'q12',
  598.                 question: 'In The Matrix, which pill does Neo take?',
  599.                 answers: ['Blue pill', 'Red pill', 'Green pill', 'Purple pill'],
  600.                 correct: 1,
  601.                 fragment: 'Reality is a choice'
  602.             },
  603.             {
  604.                 id: 'q13',
  605.                 question: 'What technology allows phones to connect without cables?',
  606.                 answers: ['Ethernet', 'Bluetooth', 'Fiber Optic', 'Coaxial'],
  607.                 correct: 1,
  608.                 fragment: 'Named after a Viking king'
  609.             },
  610.             {
  611.                 id: 'q14',
  612.                 question: 'What is the name of the theoretical point where gravity becomes infinite?',
  613.                 answers: ['Event Horizon', 'Singularity', 'Wormhole', 'Neutron Star'],
  614.                 correct: 1,
  615.                 fragment: 'Where physics breaks down',
  616.                 alternatePath: {
  617.                     trigger: 0,
  618.                     hint: 'The event horizon hides secrets...',
  619.                     unlocksAt: 'q18'
  620.                 }
  621.             },
  622.             {
  623.                 id: 'q15',
  624.                 question: 'Which programming language is known for its coffee cup logo?',
  625.                 answers: ['Python', 'JavaScript', 'Java', 'C++'],
  626.                 correct: 2,
  627.                 fragment: 'Write once, run anywhere',
  628.                 shortcut: {
  629.                     enabled: false,
  630.                     question: 'Code tunnel: What year was it first released?',
  631.                     answers: ['1991', '1995', '1999', '2003'],
  632.                     correct: 1
  633.                 }
  634.             },
  635.             {
  636.                 id: 'q16',
  637.                 question: 'What does "VR" stand for in gaming?',
  638.                 answers: ['Video Recording', 'Virtual Reality', 'Visual Rendering', 'Vector Racing'],
  639.                 correct: 1,
  640.                 fragment: 'Step into another world'
  641.             },
  642.             {
  643.                 id: 'q17',
  644.                 question: 'In Back to the Future, how fast must the DeLorean go to time travel?',
  645.                 answers: ['66 mph', '77 mph', '88 mph', '99 mph'],
  646.                 correct: 2,
  647.                 fragment: 'When you see serious temporal displacement'
  648.             },
  649.             {
  650.                 id: 'q18',
  651.                 question: 'What force keeps planets in orbit around the sun?',
  652.                 answers: ['Magnetism', 'Gravity', 'Centrifugal Force', 'Dark Energy'],
  653.                 correct: 1,
  654.                 fragment: 'The universe\'s invisible tether',
  655.                 shortcut: {
  656.                     enabled: false,
  657.                     question: 'Gravitational bypass: Who discovered the law of universal gravitation?',
  658.                     answers: ['Einstein', 'Newton', 'Galileo', 'Kepler'],
  659.                     correct: 1
  660.                 }
  661.             },
  662.             {
  663.                 id: 'q19',
  664.                 question: 'Which element makes up most of the air we breathe?',
  665.                 answers: ['Oxygen', 'Nitrogen', 'Carbon Dioxide', 'Hydrogen'],
  666.                 correct: 1,
  667.                 fragment: '78% of every breath',
  668.                 alternatePath: {
  669.                     trigger: 0,
  670.                     hint: 'Oxygen opens a breathing room...',
  671.                     unlocksAt: 'q20'
  672.                 }
  673.             },
  674.             {
  675.                 id: 'q20',
  676.                 question: 'What does a "firewall" protect in computing?',
  677.                 answers: ['Physical Hardware', 'Network Security', 'Power Supply', 'Monitor Display'],
  678.                 correct: 1,
  679.                 fragment: 'Digital guardian at the gates',
  680.                 shortcut: {
  681.                     enabled: false,
  682.                     question: 'Security bypass: What layer of the OSI model do most firewalls operate at?',
  683.                     answers: ['Layer 1', 'Layer 3', 'Layer 5', 'Layer 7'],
  684.                     correct: 1
  685.                 }
  686.             }
  687.         ];
  688.        
  689.         function initGame() {
  690.             createTimeline();
  691.             loadQuestion();
  692.             updateMemoryFragments();
  693.         }
  694.        
  695.         function createTimeline() {
  696.             const track = document.getElementById('timelineTrack');
  697.             track.innerHTML = '';
  698.            
  699.             for (let i = 0; i < questions.length; i++) {
  700.                const checkpoint = document.createElement('div');
  701.                checkpoint.className = 'checkpoint';
  702.                checkpoint.id = `checkpoint-${i}`;
  703.                
  704.                if (i === gameState.currentQuestion) {
  705.                    checkpoint.classList.add('active');
  706.                } else if (i < gameState.currentQuestion) {
  707.                    checkpoint.classList.add('completed');
  708.                }
  709.                
  710.                track.appendChild(checkpoint);
  711.            }
  712.        }
  713.        
  714.        function loadQuestion() {
  715.            const q = questions[gameState.currentQuestion];
  716.            const questionText = document.getElementById('questionText');
  717.            const answersContainer = document.getElementById('answersContainer');
  718.            const alternatePath = document.getElementById('alternatePath');
  719.            const encouragement = document.getElementById('encouragement');
  720.            
  721.            // Add encouragement messages at milestones
  722.            if (gameState.currentQuestion === 5) {
  723.                encouragement.textContent = '✨ Quarter way through the timeline!';
  724.            } else if (gameState.currentQuestion === 10) {
  725.                encouragement.textContent = '🌟 Halfway there, temporal traveler!';
  726.            } else if (gameState.currentQuestion === 15) {
  727.                encouragement.textContent = '⚡ The perfect timeline is within reach!';
  728.            } else if (gameState.currentQuestion === 18) {
  729.                encouragement.textContent = '🔥 Almost there! Two more to go!';
  730.            } else {
  731.                encouragement.textContent = '';
  732.            }
  733.            
  734.            // Check for shortcuts
  735.            if (gameState.unlockedPaths.includes(q.id) && q.shortcut) {
  736.                q.shortcut.enabled = true;
  737.                questionText.textContent = q.shortcut.question;
  738.                answersContainer.innerHTML = '';
  739.                
  740.                q.shortcut.answers.forEach((answer, index) => {
  741.                     const btn = createAnswerButton(answer, index, true);
  742.                     answersContainer.appendChild(btn);
  743.                 });
  744.                
  745.                 alternatePath.innerHTML = '<p style="color: #ff00ff;">⚡ Shortcut Path Activated ⚡</p>';
  746.                 alternatePath.classList.add('unlocked');
  747.             } else {
  748.                 questionText.textContent = q.question;
  749.                 answersContainer.innerHTML = '';
  750.                
  751.                 q.answers.forEach((answer, index) => {
  752.                     const btn = createAnswerButton(answer, index, false);
  753.                     answersContainer.appendChild(btn);
  754.                 });
  755.                
  756.                 // Show alternate path hint if triggered
  757.                 if (q.alternatePath && gameState.memoryFragments.includes(q.alternatePath.hint)) {
  758.                    alternatePath.innerHTML = `<p style="color: #ff00ff;">🌀 ${q.alternatePath.hint}</p>`;
  759.                     alternatePath.classList.add('unlocked');
  760.                 } else {
  761.                     alternatePath.classList.remove('unlocked');
  762.                 }
  763.             }
  764.            
  765.             updateTimeline();
  766.         }
  767.        
  768.         function createAnswerButton(text, index, isShortcut) {
  769.             const btn = document.createElement('button');
  770.             btn.className = 'answer-btn';
  771.             btn.textContent = text;
  772.             btn.onclick = () => checkAnswer(index, isShortcut);
  773.             return btn;
  774.         }
  775.        
  776.         function checkAnswer(selectedIndex, isShortcut = false) {
  777.             const q = questions[gameState.currentQuestion];
  778.             const buttons = document.querySelectorAll('.answer-btn');
  779.            
  780.             let isCorrect;
  781.             if (isShortcut && q.shortcut) {
  782.                isCorrect = selectedIndex === q.shortcut.correct;
  783.             } else {
  784.                 isCorrect = selectedIndex === q.correct;
  785.                
  786.                 // Check for alternate path triggers
  787.                 if (q.alternatePath && selectedIndex === q.alternatePath.trigger) {
  788.                    if (!gameState.memoryFragments.includes(q.alternatePath.hint)) {
  789.                        gameState.memoryFragments.push(q.alternatePath.hint);
  790.                         gameState.unlockedPaths.push(q.alternatePath.unlocksAt);
  791.                         updateMemoryFragments();
  792.                     }
  793.                 }
  794.             }
  795.            
  796.             buttons[selectedIndex].classList.add(isCorrect ? 'correct' : 'wrong');
  797.            
  798.             if (isCorrect) {
  799.                 gameState.score++;
  800.                
  801.                 // Add memory fragment
  802.                 if (!gameState.memoryFragments.includes(q.fragment)) {
  803.                     gameState.memoryFragments.push(q.fragment);
  804.                     updateMemoryFragments();
  805.                 }
  806.                
  807.                 setTimeout(() => {
  808.                     gameState.currentQuestion++;
  809.                    
  810.                     if (gameState.currentQuestion >= questions.length) {
  811.                         victoryScreen();
  812.                     } else {
  813.                         loadQuestion();
  814.                     }
  815.                 }, 1000);
  816.             } else {
  817.                 gameState.perfectRun = false;
  818.                
  819.                 // Add hint fragment on wrong answer
  820.                 const hintFragment = `Loop ${gameState.currentLoop}: Wrong at Q${gameState.currentQuestion + 1} - "${q.answers[selectedIndex]}"`;
  821.                 if (!gameState.memoryFragments.includes(hintFragment)) {
  822.                     gameState.memoryFragments.push(hintFragment);
  823.                 }
  824.                
  825.                 setTimeout(() => {
  826.                     resetLoop();
  827.                 }, 1500);
  828.             }
  829.         }
  830.        
  831.         function resetLoop() {
  832.             gameState.currentLoop++;
  833.             gameState.currentQuestion = 0;
  834.             gameState.score = 0;
  835.            
  836.             document.getElementById('loopCount').textContent = gameState.currentLoop;
  837.             document.getElementById('progressCount').textContent = '0';
  838.            
  839.             updateMemoryFragments();
  840.             loadQuestion();
  841.         }
  842.        
  843.         function updateTimeline() {
  844.             const checkpoints = document.querySelectorAll('.checkpoint');
  845.             checkpoints.forEach((cp, index) => {
  846.                 cp.classList.remove('active', 'completed');
  847.                
  848.                 if (index === gameState.currentQuestion) {
  849.                     cp.classList.add('active');
  850.                     // Scroll active checkpoint into view
  851.                     cp.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
  852.                 } else if (index < gameState.currentQuestion) {
  853.                    cp.classList.add('completed');
  854.                }
  855.            });
  856.            
  857.            document.getElementById('progressCount').textContent = gameState.currentQuestion;
  858.        }
  859.        
  860.        function updateMemoryFragments() {
  861.            const container = document.getElementById('memoryContainer');
  862.            container.innerHTML = '';
  863.            
  864.            if (gameState.memoryFragments.length === 0) {
  865.                container.innerHTML = '<p style="color: rgba(255,255,255,0.5); font-style: italic;">No fragments collected yet...</p>';
  866.             } else {
  867.                 // Add loop wisdom based on attempt count
  868.                 if (gameState.currentLoop > 3 && !gameState.memoryFragments.includes('Loop Wisdom: Patterns emerge')) {
  869.                    gameState.memoryFragments.unshift('Loop Wisdom: Patterns emerge in repetition');
  870.                 }
  871.                 if (gameState.currentLoop > 6 && !gameState.memoryFragments.includes('Loop Wisdom: Time is your ally')) {
  872.                    gameState.memoryFragments.unshift('Loop Wisdom: Time is your ally, not your enemy');
  873.                 }
  874.                 if (gameState.currentLoop > 10 && !gameState.memoryFragments.includes('Loop Wisdom: Persistence conquers')) {
  875.                    gameState.memoryFragments.unshift('Loop Wisdom: Persistence conquers all timelines');
  876.                 }
  877.                
  878.                 gameState.memoryFragments.forEach(fragment => {
  879.                     const div = document.createElement('div');
  880.                     div.className = 'fragment';
  881.                     if (fragment.startsWith('Loop Wisdom:')) {
  882.                         div.style.borderColor = '#ff00ff';
  883.                         div.style.background = 'rgba(255, 0, 255, 0.2)';
  884.                     }
  885.                     div.textContent = fragment;
  886.                     container.appendChild(div);
  887.                 });
  888.             }
  889.         }
  890.        
  891.         function victoryScreen() {
  892.             document.getElementById('finalLoops').textContent = gameState.currentLoop;
  893.             document.getElementById('perfectTimeline').classList.add('active');
  894.         }
  895.        
  896.         function hardReset() {
  897.             gameState.currentLoop = 1;
  898.             gameState.currentQuestion = 0;
  899.             gameState.score = 0;
  900.             gameState.memoryFragments = [];
  901.             gameState.unlockedPaths = [];
  902.             gameState.questionHistory = [];
  903.             gameState.perfectRun = true;
  904.            
  905.             document.getElementById('loopCount').textContent = '1';
  906.             document.getElementById('progressCount').textContent = '0';
  907.             document.getElementById('perfectTimeline').classList.remove('active');
  908.            
  909.             initGame();
  910.         }
  911.        
  912.         // Initialize game
  913.         document.getElementById('totalQuestions').textContent = questions.length;
  914.         initGame();
  915.     </script>
  916. </body>
  917. </html>
  918.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!