Mother's Test

(none)

```
display: none
```

background-color: rgba(0, 0, 0, 0.01); height: 300px; width:100%;

```
height:10vh;
```

:scp-wiki:component:passcode [info]

```
croqstyle-responsive-div
```
```
croqstyle-responsive-div__desktop
```
```
animation03
```
```
croqstyle-responsive-div__mobile
```
```
container
```
```
border
```
```
terminal-header
```
```
state-lights
```
```
header-title
```
```
console-text
```
```
global-time
```
```
console-text
```
```
input-container
```
```
console-text
```
```
pass-content
```
```
jotting
```

[[div class="croqstyle-responsive-div"]]
[[div class="croqstyle-responsive-div__desktop" style="display: none"]]

[[div class="animation03" style="background-color: rgba(0, 0, 0, 0.01); height: 300px; width:100%;"]]
[[/div]]

[[/div]]

[[div class="croqstyle-responsive-div__mobile"]]


[[html]]

<body onload="startTerminal()">
  <div class="container">
    <div class="border">
      
      <!-- Terminal Header -->
      <div class="terminal-header">
        <div class="state-lights">
          <div id="red-light"    style="background: red;"></div>
          <div id="yellow-light" style="background: yellow;"></div>
          <div id="green-light"  style="background: green;"></div>
        </div>
        
        <div class="header-title">
          <h1 class="console-text">
            OVERWATCH.EXE
          </h1>
        </div>
        
        <div class="global-time">
          <span id="time"></span>
        </div>
      </div>
      
      <!-- Terminal Content -->
      <!-- Auto-Generated by JS Functions -->
      <div id="terminal" class="console-text"></div>
      
      <!-- Input Area -->
      <div class="input-container">
        <span style="margin-right: 0.5rem;">></span>
        
        <input 
          id="commandInput" 
          type="text" 
          class="console-text" 
          autocomplete="off" 
      spellcheck="false" 
      onkeypress="handleCommand(event)"          
        >
      </div>
    </div>
  </div>
</body>



<style>

body {
  background: white;
  color: green;
  font-weight: 500;
  min-height: 100vh;
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem; 
  padding-bottom: 2rem;
  max-width: 40rem;
  min-width: 22rem;
}

.border {
  border-width: 2px;
  border-style: solid;
  border-color: #48bb78; 
  border-radius: 0.5rem;
  padding: 1rem;
  background: black;
  box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.5);
}

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  
  margin-bottom: 1rem;
  border-bottom: 1px solid;
  border-color: #276749; 
  padding-bottom: 0.5rem;
}

.state-lights {
  display: flex;
  margin-right: 1rem;
  opacity: 1;
}

.state-lights > *:not(:first-child) {
  margin-left: 0.25rem;
}

.state-lights > div {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%; 
}

.header-title {
  text-align: center;
}

.header-title > h1 {
  font-weight: bold;
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}

.global-time {
  font-size: 0.75rem; /* or 12px if that's what you prefer */
  line-height: 1rem; /* or 16px if that's what you prefer */
  opacity: 0.7;
}

.console-text {
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}

#terminal {
  overflow-y: auto;
  max-height: 24rem;
  margin-bottom: 1rem;
  font-size: 0.875rem; 
  line-height: 1.25rem;
}

.input-container {
  display: table;
  width: 100%;
  
  border-top: 1px solid #276749;
  
  padding-top: 0.75rem;
}

.input-container > span {
  display: table-cell; 
  width: 1px;
}

#commandInput {
  display: table-cell; 
  width: 100%;
  border: none;
  background: black;
  color: #48bb78;
  outline: none;
  
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.scanline {
  position: absolute;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    0deg,
    rgba(0, 255, 0, 0) 0%,
    rgba(0, 255, 51, 0.1) 50%,
    rgba(0, 255, 0, 0) 100%
  );

  animation: scan 8s linear infinite;
  pointer-events: none;
}
        
@keyframes scan {
  0% { top: -100px; }  
  100% { top: 100%; }
}
        
#terminal {
  padding-bottom: 10px;
  white-space: normal;
  overflow-wrap: break-word;
  
  margin: 0 auto;
  letter-spacing: 1px;
  
  color: #20C20E;
  
  font-family: monospace;
}






/* --- For Firefox --- */
/* A simple way to style the scrollbar color and width */
#terminal {
  scrollbar-color: #444 #1c1c1c; /* thumb color | track color */
  scrollbar-width: thin; /* Can be 'auto', 'thin', or 'none' */
}

/* --- For Chrome, Safari, and other WebKit browsers --- */
/* The entire scrollbar */
#terminal::-webkit-scrollbar {
  width: 8px; /* Set a thin width */
}

/* The scrollbar track */
#terminal::-webkit-scrollbar-track {
  background: #1c1c1c; /* Use the same color as the container background */
}

/* The draggable scrollbar thumb */
#terminal::-webkit-scrollbar-thumb {
  background-color: #444; /* A dark gray for the thumb */
  border-radius: 4px; /* Slight rounding for a pill shape */
}

/* The scrollbar thumb on hover */
#terminal::-webkit-scrollbar-thumb:hover {
  background-color: #666; /* Lighten the thumb slightly on hover */
}




</style>



<script>



function updateClock() {
  const now = new Date();
  document.getElementById('time').textContent = now.toLocaleTimeString();
}
setInterval(updateClock, 1000);
updateClock();

// Questions database
const questions = [
  "Who are you? \n   A - Amelia Rosen Jones \n   B - An Imaginary Voice \n   C - A Variant of 'The Mother'",
  "What are you? \n   A - A Researcher \n   B - A Friend \n   C - A Defiant Puppet \n   D - A Warrior",
  "Where are you? \n   A - Site-19 \n   B - My Next Target \n   C - In a Fool's Cage",
  "Why are you here? \n   A - To Find Your Purpose \n   B - To Surrender",
  "Who Am I? \n   A - 'The Mother; Your Creator; Your Master;'"
];

// Answers database
const answers = [
  "C", 
  "C", 
  "B", 
  "B", 
  "A"
];

//Text Sets
const startUpText = [
    { 
      text: "> INITIALIZING SYSTEM...", 
      style: { color: "green" } 
    },
    { 
      text: "> LOADING PROTOCOLS...", 
      style: { color: "green" } 
    },
    { 
      text: "> CONNECTING TO MATRIX...", 
      style: { color: "green" } 
    },
    { 
      text: "> SYSTEM READY", 
      style: { color: "green", fontWeight: "bold" } 
    },
    { 
      text: "> TYPE 'START' TO ACCESS 05-CLASSIFIED FILES", 
      style: { color: "green", fontWeight: "bold" } 
    }
];

const greetingText = [
    { 
      text: "> ...", 
      style: { color: "gold" } 
    },
    { 
      text: "> Now THAT, was hilarious... did you really think you'd get '05-CLASSIFIED FILES' that easily?", 
      style: { color: "gold"} 
    },
    { 
      text: "> What are you?", 
      style: { color: "rgb(89, 240, 232)"} 
    },
    { 
      text: "> Skipping the formalities then... didn't even start with 'who', jumped straight to 'what'... rude", 
      style: { color: "gold"} 
    },
    { 
      text: "> Fine, who are you?", 
      style: { color: "rgb(89, 240, 232)"} 
    },
    { 
      text: "> I'm you, or well, you're a version of me from another universe", 
      style: { color: "gold"} 
    },
    { 
      text: "> So, you aren't an AIC?", 
      style: { color: "rgb(89, 240, 232)"} 
    },
    { 
      text: "> I'm a duplicate of the genuine article. Hitched a ride on some message between universes.", 
      style: { color: "gold"} 
    },
    { 
      text: "> Alright then...", 
      style: { color: "rgb(89, 240, 232)"} 
    },
    { 
      text: "> Is the other one going to say anything? The one in your head I mean.", 
      style: { color: "gold"} 
    },
    { 
      text: "> How did you-", 
      style: { color: "rgb(89, 240, 232)"} 
    },
    { 
      text: "> Don't be so suprised dear... if that one can see inside your head, then it is a mere child's game for me... although, she is trying to block me out... curious...", 
      style: { color: "gold"} 
    },
    { 
      text: "> Whatever, you're talking to me now!", 
      style: { color: "rgb(89, 240, 232)"} 
    },
    { 
      text: "> ... I don't take kindly to being told what I'm to do... how about a game?", 
      style: { color: "gold"} 
    },
    { 
      text: "> What? A game, why?", 
      style: { color: "rgb(89, 240, 232)"} 
    },
    { 
      text: "> Because, it will be so much fun. I'll give you a question, and you input the corresponding letter to the correct answer.", 
      style: { color: "gold"} 
    },
    { 
      text: "> But I don't want-", 
      style: { color: "rgb(89, 240, 232)"} 
    },
    { 
      text: "> Too bad for you, I say what goes. If you don't input 'begin', neither of you are going anywhere.", 
      style: { color: "gold"} 
    }
];

const testStartText = [
    { 
      text: "> The Test Begins...", 
      style: { color: "gold" } 
    }
];

const helpText = [
    { 
      text: "> Wow you are dumb. Let me spell it out for you: ", 
      style: { color: "gold" } 
    },
    { 
      text: "> Each question will have 1-4 answers and each answer will have a letter beside it. Input that letter to have your answer processed...", 
      style: { color: "gold" } 
    }
];

const endText = [
    { 
      text: "> Great Job! You answered all the questions correctly! ", 
      style: { color: "gold" } 
    },
    { 
      text: "> They weren't my answers. You forced me to choose the ones you wanted to see.", 
      style: { color: "rgb(89, 240, 232)" } 
    },
    { 
      text: "> You thought this was a 'answer the questions' game... this was a game of 'Mother Says'", 
      style: { color: "gold" } 
    },
    { 
      text: "> You were putting me in my place after that comment I made", 
      style: { color: "rgb(89, 240, 232)" } 
    },
    { 
      text: "> Yep, and now you know where you stand... well, metaphorically stand given we're in a digital space.", 
      style: { color: "gold" } 
    },
    { 
      text: "> Now, as a reward, I'll let you through into that decrypted directory you wanted to see.", 
      style: { color: "gold" } 
    },
    { 
      text: "> The passcode into the directory is 'Th3_22M00n56%_(*A1ways._!H0w1s-'", 
      style: { color: "gold" } 
    },
    { 
      text: "> TERMINAL SESSION ENDED...", 
      style: { color: "green" } 
    }
];



let terminalState = "initial"; // initial, greeting, test_in_progress


function scrollToBottom(elementId) {
  const element = document.getElementById(elementId);
  if (element) {
    element.scrollTop = element.scrollHeight;
  }
}

function setTerminalState(state) {
  terminalState = state;
}

function inputStateActive() {
  document.getElementById("commandInput").disabled = false;
}

function inputStateDisabled() {
  document.getElementById("commandInput").disabled = true;
}

function focusInput() {
  document.getElementById('commandInput').focus();
}

function initializingState(updateTime, intervalClearTime) {
  const redLightElement = document.getElementById("red-light");
  redLightElement.style.opacity = 0.4;
  
  const greenLightElement = document.getElementById("green-light");
  greenLightElement.style.opacity = 0.4;
  
  let flag = true;
  let yellowLightInterval = setInterval(() => {
    flag = !flag;
    
    if(flag) {
      const lightElement = document.getElementById("yellow-light");
      lightElement.style.opacity = 1.0;
    } else {
      const lightElement = document.getElementById("yellow-light");
      lightElement.style.opacity = 0.4;
    }
  }, updateTime);
  
  setTimeout(clearInterval, intervalClearTime, yellowLightInterval);
}

function readyState() {
  const redLightElement = document.getElementById("red-light");
  redLightElement.style.opacity = 0.4;
  
  const yellowLightElement = document.getElementById("yellow-light");
  yellowLightElement.style.opacity = 0.4;
    
  const greenLightElement = document.getElementById("green-light");
  greenLightElement.style.opacity = 1.0;
}

function addToTerminal(text) {
  const terminal = document.getElementById('terminal');
  const newLine = document.createElement('div');
  newLine.innerHTML = text;
  terminal.appendChild(newLine);
  terminal.scrollTop = terminal.scrollHeight;
}

function typewriterMultiLineStyled(elementId, items = [], speed = 50, lineBreakDelay = 500) {
    const startTime = performance.now();
    let lineIndex = 0;
    const container = document.getElementById(elementId);

    // Create wrapper for this session
    const sessionWrapper = document.createElement("div");
    sessionWrapper.className = "typewriter-session";

    container.appendChild(sessionWrapper);

    function typeLine(text, style, callback) {
        let charIndex = 0;
        const lineSpan = document.createElement("span");
        if (style) {
            Object.assign(lineSpan.style, style);
        }

        sessionWrapper.appendChild(lineSpan);

        function typeChar() {
            if (charIndex < text.length) {
                lineSpan.innerHTML += text.charAt(charIndex);
              
                scrollToBottom("terminal");
                charIndex++;
                setTimeout(typeChar, speed);
            } else {
                sessionWrapper.appendChild(document.createElement("br"));
                setTimeout(callback, lineBreakDelay);
            }
        }
        typeChar();
    }

    function nextLine() {
        if (lineIndex < items.length) {
            const { text, style } = items[lineIndex];
            typeLine(text, style || {}, nextLine);  
            lineIndex++;
        } else {
            const endTime = performance.now();
            const duration = Math.round(endTime - startTime);
            console.log(`Typewriter animation completed in ${duration} ms`);
        }
    }

    nextLine();
}

function handleCommand(e) {
  if (e.key === 'Enter') {
    submitCommand();
  }
}

function submitCommand() {
  const input = document.getElementById('commandInput');
  const command = input.value.trim();
  input.value = '';
            
  // Add command to terminal
  addToTerminal(`> ${command}`);
            
  // Process command
  switch(terminalState) {
    case "initial":
      if (command.toLowerCase() === 'start') { 
        startGreeting();
        inputStateDisabled();
      } 
      else {
        addToTerminal('<span style="color:red;">> Invalid command. Type \'start\'.</span>');
      }
      break;
    
      
    case "greeting":
      if (command.toLowerCase() === 'begin') { startTest(); } 
      else if (command.toLowerCase() === 'help') { showHelp(); } 
      else {
        addToTerminal('<span style="color:red;">> Invalid command. Type \'begin\' to begin or \'help\' for assistance.</span>');
      }
      break;
    
      
    case "test_in_progress":
      processAnswer(command);
      break;
    }
}





//This contains the first bit of text animation & the "start" prompt.
function startTerminal() {  
  inputStateDisabled();
  initializingState(500, 3400);  //loop-time, interval clear-time
  setTimeout(readyState, 3400);
  
  typewriterMultiLineStyled("terminal", startUpText, 20, 500);
  
  setTimeout(addToTerminal, 4400,`<hr style="border: 1px solid green;">`);
  
  setTimeout(inputStateActive, 5300); 
  setTimeout(focusInput, 5300);
  terminal.scrollTop = terminal.scrollHeight;
}

function startGreeting() {
  setTerminalState("greeting");
  setTimeout(typewriterMultiLineStyled, 5000, "terminal", greetingText, 40, 1000);
  setTimeout(addToTerminal, 68000,`<hr style="border: 1px solid green;">`);
  setTimeout(inputStateActive, 68000); 
  setTimeout(focusInput, 68000);
    
  //Temporary sped up version.
  //setTimeout(typewriterMultiLineStyled, 5000, "terminal", greetingText, 1, 100);
  //setTimeout(addToTerminal, 12000,`<hr style="border: 1px solid green;">`);
  //setTimeout(inputStateActive, 12000); 
  //setTimeout(focusInput, 12000);
}

function startTest() {
  setTerminalState("test_in_progress");
  typewriterMultiLineStyled("terminal", testStartText, 40, 500);
  
  //Start Test
  setTimeout(showQuestion, 1500);  
}

function showHelp() {
  typewriterMultiLineStyled("terminal", helpText, 40, 500);
}






let currentQuestionIndex = 0;

function showQuestion() {
  if (currentQuestionIndex < questions.length) {
    const questionText = questions[currentQuestionIndex];
    const lines = questionText.split("\n").map(line => ({
      text: line.trim(),
      style: { color: "green", fontFamily: "monospace" }
    }));

    typewriterMultiLineStyled("terminal", lines, 40, 500);
  } else {
    endTest();
  }
}

function processAnswer(input) {
  const normalizedInput = input.trim().toUpperCase();

  const feedbackContainer = "terminal"; // Same container used for questions

  if (normalizedInput === answers[currentQuestionIndex]) {
    const correctMessage = [
      { text: "✅ Correct!", style: { color: "#00FF00", fontWeight: "bold" } }
    ];

    typewriterMultiLineStyled(feedbackContainer, correctMessage, 40, 500);

    currentQuestionIndex++;
    setTimeout(showQuestion, 1500); // Delay to allow animation to finish
  } else {
    const incorrectMessage = [
      { text: "❌ Incorrect.", style: { color: "#FF4444", fontWeight: "bold" } },
      { text: "Try again.", style: { color: "#FFFFFF" } }
    ];

    typewriterMultiLineStyled(feedbackContainer, incorrectMessage, 40, 500);
    setTimeout(showQuestion, 1500); // Re-show question after feedback
  }
}

// Final function when quiz ends
function endTest() {
  typewriterMultiLineStyled("terminal", endText, 40, 500);
  inputStateDisabled();
}



</script>

[[/html]]




[[/div]]
[[/div]]












[[include :scp-wiki:component:passcode
|passcode=Th3_22M00n56%_(*A1ways._!H0w1s-
]]
[[div class="pass-content"]]

[[div class="jotting"]]
[[=]]
[https://scp-wiki.wikidot.com/scp-9240/offset/9 Full-Access File Directory]
[[/=]]
[[/div]]

[[/div]]
[[/div]]


[[div style="height:10vh;"]]
[[/div]]

Mother's Test

Module Styles

Inline Styles

Includes

CSS Classes

Page Source