From a8373248c0b646a7288520a4548a6cd8dd7764c1 Mon Sep 17 00:00:00 2001
From: ndittren <36773036+ndittren@users.noreply.github.com>
Date: Fri, 11 Oct 2024 13:10:09 -0400
Subject: [PATCH] Restructure folders

---
 media/js/src/app.jsx                          |   7 +-
 media/js/src/{ => containers}/dashboard.jsx   |   2 +-
 .../js/src/simulationTwo/hypothesisTest2.jsx  | 152 -------
 .../simulationTwo/nullHypothesisSection2.jsx  |  60 ---
 media/js/src/simulationTwo/quiz2.jsx          | 420 ------------------
 .../src/simulationTwo/simulationTwoQuiz.jsx   | 154 -------
 .../simulation1}/criticalValue.jsx            |   4 +-
 .../src/simulations/simulation1/glossary.jsx  |  12 +
 .../simulation1}/graphCoefficientsSection.jsx |   2 +-
 .../simulation1}/hypothesisTest.jsx           |   2 +-
 .../simulation1}/modalCV.jsx                  |   2 +-
 .../simulation1}/modalGlossary.jsx            |   2 +-
 .../simulation1}/modalPvalue.jsx              |   2 +-
 .../simulation1}/multipleChoiceQuestion.jsx   |   2 +-
 .../simulation1}/nullHypothesisSection.jsx    |   2 +-
 .../simulation1}/pvalueComponent.jsx          |   4 +-
 .../simulation1}/quiz.jsx                     |   0
 .../simulation1}/scatterPlot.jsx              |   0
 .../simulation1}/simulationIntro.jsx          |  10 +-
 .../simulation1}/simulationOne.jsx            |   4 +-
 .../simulation1}/simulationOneQuiz.jsx        |   4 +-
 .../components}/controlVariable.jsx           |   4 +-
 .../simulation2/components}/learningGoals.jsx |   2 +-
 .../components}/multipleChoiceQuestion2.jsx   |   2 +-
 .../simulation2/components}/scatterPlot2.jsx  |   0
 .../simulation2/components}/simulationTwo.jsx |   8 +-
 .../simulation2/components}/variables.jsx     |   2 +-
 .../simulation2}/dataAttr.jsx                 |   2 +-
 .../simulations/simulation2}/datasets.json    |   0
 .../simulation2/tests}/dataAttr.test.jsx      |   3 +-
 media/js/src/{ => utils}/katexComponent.jsx   |   0
 media/js/src/{ => utils}/utils.jsx            |   0
 media/js/src/{ => utils}/utils.test.jsx       |   0
 33 files changed, 47 insertions(+), 823 deletions(-)
 rename media/js/src/{ => containers}/dashboard.jsx (99%)
 delete mode 100644 media/js/src/simulationTwo/hypothesisTest2.jsx
 delete mode 100644 media/js/src/simulationTwo/nullHypothesisSection2.jsx
 delete mode 100644 media/js/src/simulationTwo/quiz2.jsx
 delete mode 100644 media/js/src/simulationTwo/simulationTwoQuiz.jsx
 rename media/js/src/{simulationOne => simulations/simulation1}/criticalValue.jsx (99%)
 create mode 100644 media/js/src/simulations/simulation1/glossary.jsx
 rename media/js/src/{simulationOne => simulations/simulation1}/graphCoefficientsSection.jsx (99%)
 rename media/js/src/{simulationOne => simulations/simulation1}/hypothesisTest.jsx (99%)
 rename media/js/src/{simulationOne => simulations/simulation1}/modalCV.jsx (99%)
 rename media/js/src/{simulationOne => simulations/simulation1}/modalGlossary.jsx (99%)
 rename media/js/src/{simulationOne => simulations/simulation1}/modalPvalue.jsx (99%)
 rename media/js/src/{ => simulations/simulation1}/multipleChoiceQuestion.jsx (98%)
 rename media/js/src/{simulationOne => simulations/simulation1}/nullHypothesisSection.jsx (99%)
 rename media/js/src/{simulationOne => simulations/simulation1}/pvalueComponent.jsx (99%)
 rename media/js/src/{simulationOne => simulations/simulation1}/quiz.jsx (100%)
 rename media/js/src/{simulationOne => simulations/simulation1}/scatterPlot.jsx (100%)
 rename media/js/src/{simulationOne => simulations/simulation1}/simulationIntro.jsx (94%)
 rename media/js/src/{simulationOne => simulations/simulation1}/simulationOne.jsx (99%)
 rename media/js/src/{simulationOne => simulations/simulation1}/simulationOneQuiz.jsx (99%)
 rename media/js/src/{simulationTwo => simulations/simulation2/components}/controlVariable.jsx (98%)
 rename media/js/src/{simulationTwo => simulations/simulation2/components}/learningGoals.jsx (98%)
 rename media/js/src/{ => simulations/simulation2/components}/multipleChoiceQuestion2.jsx (99%)
 rename media/js/src/{simulationTwo => simulations/simulation2/components}/scatterPlot2.jsx (100%)
 rename media/js/src/{simulationTwo => simulations/simulation2/components}/simulationTwo.jsx (97%)
 rename media/js/src/{simulationTwo => simulations/simulation2/components}/variables.jsx (94%)
 rename media/js/src/{ => simulations/simulation2}/dataAttr.jsx (99%)
 rename {json => media/js/src/simulations/simulation2}/datasets.json (100%)
 rename media/js/src/{ => simulations/simulation2/tests}/dataAttr.test.jsx (98%)
 rename media/js/src/{ => utils}/katexComponent.jsx (100%)
 rename media/js/src/{ => utils}/utils.jsx (100%)
 rename media/js/src/{ => utils}/utils.test.jsx (100%)

diff --git a/media/js/src/app.jsx b/media/js/src/app.jsx
index df5e37ec..e3b0a374 100644
--- a/media/js/src/app.jsx
+++ b/media/js/src/app.jsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Route, Routes  } from 'react-router-dom';
-import { Dashboard } from './dashboard';
-import { SimulationOne } from './simulationOne/simulationOne';
-import { SimulationTwo } from './simulationTwo/simulationTwo';
+import { Dashboard } from './containers/dashboard';
+import { SimulationOne} from './simulations/simulation1/simulationOne';
+// eslint-disable-next-line max-len
+import { SimulationTwo } from './simulations/simulation2/components/simulationTwo';
 
 const isSuperUser = window.MetricsMentor.currentUser.is_superuser;
 
diff --git a/media/js/src/dashboard.jsx b/media/js/src/containers/dashboard.jsx
similarity index 99%
rename from media/js/src/dashboard.jsx
rename to media/js/src/containers/dashboard.jsx
index fa4a3ed4..6e65629a 100644
--- a/media/js/src/dashboard.jsx
+++ b/media/js/src/containers/dashboard.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { Footer } from './footer';
+import { Footer } from '../footer';
 import PropTypes from 'prop-types';
 
 
diff --git a/media/js/src/simulationTwo/hypothesisTest2.jsx b/media/js/src/simulationTwo/hypothesisTest2.jsx
deleted file mode 100644
index ec694a60..00000000
--- a/media/js/src/simulationTwo/hypothesisTest2.jsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Katex } from '../katexComponent';
-import PropTypes from 'prop-types';
-import { Quiz2 } from './quiz2';
-import axios from 'axios';
-
-export const HypothesisTest2 = ({
-    selectedOption, appRvalue, tvalue, hypothesizedSlope, n, onComplete,
-    completedChoices
-}) => {
-    const [pvalues, setPvalues] = useState(null);
-    const [alpha, setAlpha] = useState(null);
-    const [alphaSelected, setAlphaSelected] = useState(false);
-    let hypothesis;
-    let hypothesisTest;
-
-    const nullHypothesis = `\\Eta_0: {\\beta_1} = ${hypothesizedSlope}`;
-
-    switch (selectedOption) {
-    case 'A':
-        hypothesis = `\\Eta_1: {\\beta_1}{\\neq } ${hypothesizedSlope}`;
-        hypothesisTest = 'value_two_sided';
-        break;
-    case 'B':
-        hypothesis = `\\Eta_1: {\\beta_1}{\\gt} ${hypothesizedSlope}`;
-        hypothesisTest = 'value_right';
-        break;
-    case 'C':
-        hypothesis =  `\\Eta_1: {\\beta_1}{\\lt} ${hypothesizedSlope}`;
-        hypothesisTest = 'value_left';
-        break;
-    default:
-        hypothesis = '';
-    }
-
-    const handleAlphaChange = (event) => {
-        const newAlpha = parseFloat(event.target.value);
-        setAlpha(newAlpha);
-        setAlphaSelected(true);
-    };
-
-
-    const calculatePvalue = async() => {
-
-        try {
-            const response = await axios.post('/calculate_pvalue/',
-                {n, tvalue});
-
-            setPvalues(response.data);
-
-        } catch (error) {
-            console.error('Error calculating pvalue:', error);
-        }
-    };
-    let pvalue;
-    if (pvalues) {
-        pvalue = pvalues[hypothesisTest].toFixed(4);
-    }
-
-    useEffect(() => {
-        calculatePvalue();
-    }, []);
-
-    return (
-        <>
-            <div className="simulation__step-container d-flex">
-                <div className="simulation__step-num">
-                    &bull;
-                </div>
-                <div className="simulation__step-toggle--down"></div>
-                <div className="simulation__step-body">
-                    <header className="simulation__step-header">
-                        <h2>Hypothesis test</h2>
-                    </header>
-                    <div className="simulation__step-content">
-                        <div>
-                            <Katex tex={nullHypothesis} />
-                        </div>
-                        <div><Katex tex={hypothesis} /></div>
-                        <div>r: {appRvalue.toFixed(3)}</div>
-                        <div>t: {tvalue}</div>
-                        <p>Choose significance level, alpha:</p>
-                        <div>
-                            <div>
-                                <input
-                                    type="radio"
-                                    id="significance1"
-                                    name="significance"
-                                    value={0.01}
-                                    checked={alpha === 0.01}
-                                    onChange={handleAlphaChange}
-                                    disabled={alphaSelected}
-                                />
-                                <label htmlFor="significance1">1% (0.01)</label>
-                            </div>
-                            <div>
-                                <input
-                                    type="radio"
-                                    id="significance5"
-                                    name="significance"
-                                    value={0.05}
-                                    checked={alpha === 0.05}
-                                    onChange={handleAlphaChange}
-                                    disabled={alphaSelected}
-                                />
-                                <label htmlFor="significance5">5% (0.05)</label>
-                            </div>
-                            <div>
-                                <input
-                                    type="radio"
-                                    id="significance10"
-                                    name="significance"
-                                    value={0.10}
-                                    checked={alpha === 0.10}
-                                    onChange={handleAlphaChange}
-                                    disabled={alphaSelected}
-                                />
-                                <label
-                                    htmlFor="significance10">10% (0.10)</label>
-                            </div>
-                        </div>
-                        {alphaSelected && (
-                            <Quiz2
-                                hypothesisTest={hypothesisTest}
-                                appRvalue={appRvalue}
-                                tvalue={tvalue}
-                                pvalue={parseFloat(pvalue)}
-                                alpha={alpha}
-                                hypothesis={hypothesis}
-                                nullHypothesis={nullHypothesis}
-                                n={n}
-                                onComplete={onComplete}
-                                completedChoices={completedChoices}
-                            />
-                        )}
-                    </div>
-                </div>
-            </div>
-        </>
-    );
-};
-
-HypothesisTest2.propTypes = {
-    selectedOption: PropTypes.string.isRequired,
-    appRvalue: PropTypes.number.isRequired,
-    tvalue: PropTypes.number.isRequired,
-    coursePK: PropTypes.number,
-    hypothesizedSlope: PropTypes.any.isRequired,
-    n: PropTypes.number.isRequired,
-    onComplete: PropTypes.func.isRequired,
-    completedChoices: PropTypes.array.isRequired,
-};
\ No newline at end of file
diff --git a/media/js/src/simulationTwo/nullHypothesisSection2.jsx b/media/js/src/simulationTwo/nullHypothesisSection2.jsx
deleted file mode 100644
index 076ea66d..00000000
--- a/media/js/src/simulationTwo/nullHypothesisSection2.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { Katex } from '../katexComponent';
-import PropTypes from 'prop-types';
-
-
-export const NullHypothesisSection2 = ({
-    slope, stderror, tvalue, tEquation, hypothesizedSlope,
-    handleNullHypothesis, startQuiz
-}) => {
-    return (
-        <div className="simulation__step-container d-flex">
-            <div className="simulation__step-num">
-            &bull;
-            </div>
-            <div className="simulation__step-toggle--down">
-            </div>
-            <div className="simulation__step-body">
-                <header className="simulation__step-header">
-                    <h2 className="h2-primary">
-                    Null hypothesis</h2>
-                </header>
-                <div className="simulation__step-content">
-                    <div className="row">
-                        <label className="col-3">
-                            <Katex tex={
-                                '{\\Eta_0} : {\\beta_1} ='
-                            } />
-                        </label>
-                        <input size="10" className="col-9 w-25"
-                            type="number" min="-5" max="5"
-                            disabled={startQuiz}
-                            value={hypothesizedSlope}
-                            onChange={handleNullHypothesis} />
-                    </div>
-                    <div className="row my-3">
-                        <Katex tex={tEquation} />
-                    </div>
-                    <div className="row">
-                        <div className="input-group my-3">
-                            <Katex tex={
-                                // eslint-disable-next-line max-len
-                                `t = \\cfrac{${slope.toFixed(3)} - ${hypothesizedSlope}}{${stderror.toFixed(3)}} = ${tvalue}`
-                            } />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-NullHypothesisSection2.propTypes = {
-    slope: PropTypes.number,
-    stderror: PropTypes.number,
-    tvalue: PropTypes.string,
-    tEquation: PropTypes.string,
-    hypothesizedSlope: PropTypes.number,
-    handleNullHypothesis: PropTypes.func,
-    startQuiz: PropTypes.bool
-};
\ No newline at end of file
diff --git a/media/js/src/simulationTwo/quiz2.jsx b/media/js/src/simulationTwo/quiz2.jsx
deleted file mode 100644
index 61f946ee..00000000
--- a/media/js/src/simulationTwo/quiz2.jsx
+++ /dev/null
@@ -1,420 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Katex } from '../katexComponent';
-import axios from 'axios';
-
-export const Quiz2 = ({
-    appRvalue, tvalue, pvalue, alpha, hypothesisTest, hypothesis,
-    nullHypothesis, n, onComplete, completedChoices
-}) => {
-
-    const [criticalValues, setCriticalValues] = useState(null);
-    const [userPvalue, setUserPvalue] = useState('');
-    const [pvalueComparison, setPvalueComparison] = useState(null);
-    const [isPvalCompareCorrect, setIsPvalCompareCorrect] = useState(null);
-    // eslint-disable-next-line max-len
-    const [nullHypothesisChoice1, setNullHypothesisChoice1] = useState(null);
-    const [nullHypothesisChoice2, setNullHypothesisChoice2] = useState(null);
-    // eslint-disable-next-line max-len
-    const [hypothesisTest1validate, setHypothesisTest1validate] = useState(null);
-    // eslint-disable-next-line max-len
-    const [hypothesisTest2validate, setHypothesisTest2validate] = useState(null);
-    const [userCriticalValue, setUserCriticalValue] = useState('');
-    const [compareCritical, setCompareCritical] = useState(null);
-    // eslint-disable-next-line max-len
-    const [isCriticalCompareCorrect, setIsCriticalCompareCorrect] = useState(null);
-    const [isCriticalValueCorrect, setIsCriticalValueCorrect] = useState(null);
-    const [isPvalueCorrect, setIsPvalueCorrect] = useState(null);
-
-
-    useEffect(() => {
-        calculateCriticalValue();
-    }, []);
-
-    // P-Value Logic
-    const handleUserPvalueChange = (e) => {
-        // Allow number and decimal point
-        const value = e.target.value.replace(/[^\d.-]/g, '');
-
-        // Make sure there is only one decimal point
-        const decimalCount = value.split('.').length - 1;
-        if (decimalCount > 1) return;
-
-        // Check that the negative is at the beginning of the number
-        const negativeCount = value.split('-').length - 1;
-        if (negativeCount > 1 ||
-            (negativeCount === 1 && value.indexOf('-') !== 0))
-        {
-            return;
-        }
-
-        setUserPvalue(value);
-        validatePvalue(value);
-    };
-
-    const handlePvalueComparisonChange = (event) => {
-        const newValue = event.target.value;
-        setPvalueComparison(newValue);
-        validatePvalueComparison(newValue);
-    };
-
-    const validatePvalueComparison = (value) => {
-        setIsPvalCompareCorrect(
-            value === (pvalue < alpha ? 'lessThan' : 'greaterThan')
-        );
-    };
-
-    const validatePvalue = (value) => {
-        setIsPvalueCorrect(parseFloat(value) === pvalue);
-    };
-
-    const handleNullHypothesisChoice1Change = (event) => {
-        setNullHypothesisChoice1(event.target.value);
-        validateHypothesisTest1(event.target.value);
-    };
-
-    const validateHypothesisTest1 = (value) => {
-        const correctDecision =
-        (pvalue < alpha && value === 'reject') ||
-                    (pvalue > alpha && value === 'failToReject');
-
-        setHypothesisTest1validate((correctDecision));
-    };
-
-
-    // Critical Value Logic
-    const calculateCriticalValue = async() => {
-
-        try {
-            const response = await axios.post('/calculate_critical/',
-                {n, alpha});
-
-            setCriticalValues(response.data);
-
-        } catch (error) {
-            console.error('Error calculating pvalue:', error);
-        }
-    };
-
-    let criticalValue;
-    if (criticalValues) {
-        criticalValue = criticalValues[hypothesisTest];
-    }
-
-    const handleUserCriticalvalueChange = (e) => {
-        // Allow number and decimal point
-        const value = e.target.value.replace(/[^\d.-]/g, '');
-
-        // Make sure there is only one decimal point
-        const decimalCount = value.split('.').length - 1;
-        if (decimalCount > 1) return;
-
-        // Check that the negative is at the beginning of the number
-        const negativeCount = value.split('-').length - 1;
-        if (negativeCount > 1 ||
-            (negativeCount === 1 && value.indexOf('-') !== 0))
-        {
-            return;
-        }
-
-        setUserCriticalValue(value);
-        validateCriticalValue(value);
-
-    };
-
-    const validateCriticalValue = (value) => {
-        setIsCriticalValueCorrect(parseFloat(value) === criticalValue);
-    };
-
-    const handleComparingCritical = (event) => {
-        const newValue = event.target.value;
-        setCompareCritical(newValue);
-        validateCriticalComparison(newValue);
-    };
-
-    const validateCriticalComparison = (value) => {
-        const correctComparison =
-        (Math.abs(tvalue) > criticalValue && value === 'greaterThan') ||
-        (Math.abs(tvalue) <= criticalValue && value === 'lessThan');
-
-        setIsCriticalCompareCorrect(correctComparison);
-    };
-
-    const handleNullHypothesisChoice2Change = (event) => {
-        setNullHypothesisChoice2(event.target.value);
-        validateHypothesisTest2(event.target.value);
-    };
-
-    const validateHypothesisTest2 = (value) => {
-        const correctDecision =
-        (Math.abs(tvalue) > criticalValue && value === 'reject') ||
-                (Math.abs(tvalue) <= criticalValue && value === 'failToReject');
-
-        setHypothesisTest2validate(correctDecision);
-
-    };
-
-
-    return (
-        <>
-            <div className="solving-p-set border border-primary p-3 mt-3">
-                <div className="input-p">
-                    <p>Look up p value for t-stat</p>
-                p value from table:
-                    <div>
-                        <label htmlFor="pValue">p = </label>
-                        <input
-                            type="text"
-                            id="pValue"
-                            value={userPvalue}
-                            disabled={isPvalueCorrect}
-                            onChange={handleUserPvalueChange}
-                        />
-                    </div>
-                </div>{/*input-p*/}
-                {isPvalueCorrect && (
-                    <div>
-                        <span style={{ color: 'green' }}>Correct</span>
-                    </div>
-                )}
-                {!isPvalueCorrect && isPvalueCorrect !== null && (
-                    <div>
-                        <span style={{ color: 'red' }}>Incorrect</span>
-                    </div>
-                )}
-
-                {isPvalueCorrect && (
-                    <div className="p-to-alpha border border-warning p-3 mt-3">
-                Comparing p values to &alpha;:
-                        <div>
-                            <input
-                                type="radio"
-                                id="pGreaterThanAlpha"
-                                name="comparison"
-                                value="greaterThan"
-                                disabled={isPvalCompareCorrect}
-                                checked={pvalueComparison === 'greaterThan'}
-                                onChange={handlePvalueComparisonChange}
-                            />
-                            <label htmlFor="pGreaterThanAlpha">
-                        p &gt; alpha
-                            </label>
-                        </div>
-                        <div>
-                            <input
-                                type="radio"
-                                id="pLessThanAlpha"
-                                name="comparison"
-                                value="lessThan"
-                                disabled={isPvalCompareCorrect}
-                                checked={pvalueComparison === 'lessThan'}
-                                onChange={handlePvalueComparisonChange}
-                            />
-                            <label htmlFor="pLessThanAlpha">p &lt; alpha
-                            </label>
-                        </div>
-                    </div>//compare-p-to-alpha
-                )}
-                {isPvalCompareCorrect && (
-                    <div>
-                        <span style={{ color: 'green' }}>Correct</span>
-                    </div>
-                )}
-
-                {!isPvalCompareCorrect && isPvalCompareCorrect !== null && (
-                    <div>
-                        <span style={{ color: 'red' }}>Incorrect</span>
-                    </div>
-                )}
-
-                {isPvalCompareCorrect && (
-                    <div className="p-val-concl border border-info p-3 mt-3">
-                        <Katex tex={nullHypothesis} />
-                        <Katex tex={hypothesis} />
-                        <div>
-                            <input
-                                type="radio"
-                                id="rejectHypothesis"
-                                name="decision"
-                                value="reject"
-                                disabled={hypothesisTest1validate}
-                                checked={nullHypothesisChoice1 === 'reject'}
-                                onChange={handleNullHypothesisChoice1Change}
-                            />
-                            <label htmlFor="rejectHypothesis">
-                            Reject the Null Hypothesis</label>
-                        </div>
-                        <div>
-                            <input
-                                type="radio"
-                                id="failToRejectHypothesis"
-                                name="decision"
-                                value="failToReject"
-                                disabled={hypothesisTest1validate}
-                                checked={
-                                    nullHypothesisChoice1 === 'failToReject'
-                                }
-                                onChange={handleNullHypothesisChoice1Change}
-                            />
-                            <label htmlFor="failToRejectHypothesis">
-                            Fail to Reject the Null Hypothesis</label>
-                        </div>
-                        {hypothesisTest1validate && (
-                            <div>
-                                {hypothesisTest1validate ? (
-                                    <span style={{ color: 'green' }}>
-                                        Correct</span>
-                                ) : (
-                                    <span style={{ color: 'red' }}>
-                                        Incorrect</span>
-                                )}
-                            </div>
-                        )}
-                    </div>
-                )}
-            </div> {/* solving-p-set */}
-            <div className="solving-p-set border border-primary p-3 mt-3">
-                {hypothesisTest1validate && (
-                    <div className="input-p">
-                        <p>Look up critical value for t-stat</p>
-
-                        <p>Critical value from table for {alpha} :</p>
-                        <div>
-                            <label htmlFor="criticalvalue">
-                                critical value = </label>
-                            <input
-                                type="text"
-                                id="criticalvalue"
-                                value={userCriticalValue}
-                                disabled={isCriticalValueCorrect}
-                                onChange={handleUserCriticalvalueChange}
-                            />
-                        </div>
-                    </div>
-                )}{/*input-criticalvalue*/}
-                {isCriticalValueCorrect &&(
-                    <div>
-                        <span style={{ color: 'green' }}>Correct</span>
-                    </div>
-                )}
-
-                {!isCriticalValueCorrect && isCriticalValueCorrect !== null && (
-                    <div>
-                        <span style={{ color: 'red' }}>Incorrect</span>
-                    </div>
-                )}
-                {isCriticalValueCorrect && (
-                    <div className="p-val-concl border border-info p-3 mt-3">
-                        <p>Comparing |t| value to critical value:</p>
-                        <div>
-                            <input
-                                type="radio"
-                                id="tGreaterThanCritical"
-                                name="criticalcomparison"
-                                value="greaterThan"
-                                disabled={isCriticalCompareCorrect}
-                                checked={compareCritical === 'greaterThan'}
-                                onChange={handleComparingCritical}
-                            />
-                            <label htmlFor="tGreaterThanCritical">
-                            |t| &gt; critical value</label>
-                        </div>
-                        <div>
-                            <input
-                                type="radio"
-                                id="tLessThanCritical"
-                                name="criticalcomparison"
-                                value="lessThan"
-                                disabled={isCriticalCompareCorrect}
-                                checked={compareCritical === 'lessThan'}
-                                onChange={handleComparingCritical}
-                            />
-                            <label htmlFor="tLessThanCritical">
-                        |t| &lt; critical value</label>
-                        </div>
-                    </div>
-                    //compare-t-to-criticalvalue
-                )}
-                {isCriticalCompareCorrect && (
-                    <div>
-                        <span style={{ color: 'green' }}>Correct</span>
-                    </div>
-                )}
-
-                {!isCriticalCompareCorrect && isCriticalCompareCorrect !== null
-                 && (
-                     <div>
-                         <span style={{ color: 'red' }}>Incorrect</span>
-                     </div>
-                 )}
-
-                {isCriticalCompareCorrect && (
-                    <div className="p-val-concl border border-info p-3 mt-3">
-                        <Katex tex={nullHypothesis} />
-                        <Katex tex={hypothesis} />
-                        <div>
-                            <input
-                                type="radio"
-                                id="rejectHypothesis2"
-                                name="decision2"
-                                value="reject"
-                                disabled={hypothesisTest2validate}
-                                checked={nullHypothesisChoice2 === 'reject'}
-                                onChange={handleNullHypothesisChoice2Change}
-                            />
-                            <label htmlFor="rejectHypothesis2">
-                            Reject the Null Hypothesis</label>
-                        </div>
-                        <div>
-                            <input
-                                type="radio"
-                                id="failToRejectHypothesis2"
-                                name="decision2"
-                                value="failToReject"
-                                disabled={hypothesisTest2validate}
-                                checked={
-                                    nullHypothesisChoice2 === 'failToReject'
-                                }
-                                onChange={handleNullHypothesisChoice2Change}
-                            />
-                            <label htmlFor="failToRejectHypothesis2">
-                            Fail to Reject the Null Hypothesis</label>
-                        </div>
-                        {hypothesisTest2validate && (
-                            <>
-                                <div>
-                                    {hypothesisTest2validate ? (
-                                        <span style={{ color: 'green' }}>
-                                        Correct</span>
-                                    ) : (
-                                        <span style={{ color: 'red' }}>
-                                        Incorrect</span>
-                                    )}
-                                </div>
-                                <button className=
-                                    "btn btn-sm btn-success"
-                                onClick={onComplete}>
-                                    Next
-                                </button>
-                            </>
-                        )}
-                    </div>
-                )}
-
-            </div>
-        </>
-    );
-};
-
-Quiz2.propTypes = {
-    appRvalue: PropTypes.number.isRequired,
-    tvalue: PropTypes.number.isRequired,
-    pvalue: PropTypes.number.isRequired,
-    alpha: PropTypes.number.isRequired,
-    hypothesisTest: PropTypes.string.isRequired,
-    hypothesis: PropTypes.string.isRequired,
-    nullHypothesis: PropTypes.string.isRequired,
-    n: PropTypes.number.isRequired,
-    onComplete: PropTypes.func.isRequired,
-    completedChoices: PropTypes.array.isRequired,
-};
diff --git a/media/js/src/simulationTwo/simulationTwoQuiz.jsx b/media/js/src/simulationTwo/simulationTwoQuiz.jsx
deleted file mode 100644
index 53d9de67..00000000
--- a/media/js/src/simulationTwo/simulationTwoQuiz.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-// import React, { useEffect, useState } from 'react';
-import React from 'react';
-// import { Katex } from '../katexComponent';
-// import { HypothesisTest2 } from './hypothesisTest2';
-import { MultipleChoiceQuestion } from '../multipleChoiceQuestion';
-import PropTypes from 'prop-types';
-
-export const SimulationTwoQuiz = ({
-    appRvalue, tvalue, hypothesizedSlope, setIs2DCompleted, // n,
-    is2DCompleted
-}) => {
-    // const [selectedOption, setSelectedOption] = useState(null);
-    // const [completedChoices, setCompletedChoices] = useState([]);
-
-    // const allChoicesCompleted = ['A', 'B', 'C'].every(
-    //     choice => completedChoices.includes(choice));
-
-    // const handleChoiceCompletion = () => {
-    //     setCompletedChoices([...completedChoices, selectedOption]);
-    //     setSelectedOption(null);
-    // };
-
-    // const is2dCompleted = () => {
-    //     if (allChoicesCompleted) {
-    //         setIs2DCompleted(true);
-    //     }
-    // };
-
-    // useEffect(() => {
-    //     is2dCompleted();
-    // },[completedChoices, allChoicesCompleted]);
-
-    return (
-        <>
-            <div className="simulation__step-container d-flex">
-                <div className="simulation__step-num">
-                    &bull;
-                </div>
-                <div className="simulation__step-toggle--down"></div>
-                <div className="simulation__step-body">
-                    <header className="simulation__step-header">
-                        <h2 className="h2-primary">Alternative hypothesis</h2>
-                    </header>
-                    <div className="simulation__step-content">
-                        <p>
-                            The alternative hypothesis is claim believed to be
-                            true. In this simulation, there are three
-                            alternative hypothesis. Choose one lorem ipsum
-                            dolor sit amet.
-                        </p>
-
-
-                        {/* <ol className="listset-alpha listset-alpha-listnum">
-                            <li className="listset-alpha-card">
-                                <div className="listset-alpha-card__title">
-                                    <Katex tex={
-                                    // eslint-disable-next-line max-len
-                                        `\\Eta_1: {\\beta_1}{\\neq} ${hypothesizedSlope}`
-                                    } />
-                                </div>
-                                <button className="btn btn-sm btn-primary"
-                                    disabled={completedChoices.includes('A')}
-                                    onClick={() => setSelectedOption('A')}>
-                                        Do This
-                                </button>
-                            </li>
-                            <li className="listset-alpha-card">
-                                <div className="listset-alpha-card__title">
-                                    <Katex tex={
-                                    // eslint-disable-next-line max-len
-                                        `\\Eta_1: {\\beta_1}{\\gt} ${hypothesizedSlope}`
-                                    } />
-                                </div>
-                                <button className="btn btn-sm btn-primary"
-                                // eslint-disable-next-line max-len
-                                    disabled={completedChoices.includes('B')}
-                                    onClick={() => setSelectedOption('B')}>
-                                        Do This
-                                </button>
-                            </li>
-                            <li className="listset-alpha-card">
-                                <div className="listset-alpha-card__title">
-                                    <Katex tex={
-                                    // eslint-disable-next-line max-len
-                                        `\\Eta_1: {\\beta_1}{\\lt} ${hypothesizedSlope}`
-                                    } />
-                                </div>
-                                <button className="btn btn-sm btn-primary"
-                                    disabled={completedChoices.includes('C')}
-                                    onClick={() => setSelectedOption('C')}>
-                                        Do This
-                                </button>
-                            </li>
-                        </ol> */}
-                    </div>
-                </div>
-            </div>
-
-            {/* {selectedOption && (
-                <HypothesisTest2
-                    selectedOption={selectedOption}
-                    hypothesizedSlope={hypothesizedSlope}
-                    appRvalue={appRvalue}
-                    tvalue={parseFloat(tvalue)}
-                    onComplete={handleChoiceCompletion}
-                    n={parseInt(n)}
-                    completedChoices={completedChoices}
-                />
-            )} */}
-            { (
-                <div className="container my-1">
-                    <MultipleChoiceQuestion
-                        question={'Which of the following causes a higher '
-                            + 'change in the slope of the variable of '
-                            + 'interest (X1)'}
-                        options={[
-                            'High correlation between Y and X1.',
-                            'High correlation between X1 and the omitted '
-                                + 'variable.',
-                            'High correlation between the omitted variable '
-                                + 'and the dependent variable.',
-                            'Both (b) and (c)',
-                            'Both (a) and (c)']}
-                        answer={'Both (a) and (c)'}
-                    />
-                    <MultipleChoiceQuestion
-                        question={'If the correlation between the omitted '
-                            + 'variable and the variable of interest (𝑋1) is '
-                            + 'high and the correlation between the omitted '
-                            + 'variable and the dependent variable is high, '
-                            + 'the sample slope of the variable of interest '
-                            + 'will be wrong, because'}
-                        options={[
-                            'Sample selection bias',
-                            'Simultaneous causality bias',
-                            'Omitted variable bias',
-                            'Wrong functional form',
-                            'Errors-in-variables']}
-                        answer={'Omitted variable bias'}
-                    />
-                </div>
-            )}
-        </>
-    );
-};
-
-SimulationTwoQuiz.propTypes = {
-    appRvalue: PropTypes.number,
-    tvalue: PropTypes.string,
-    hypothesizedSlope: PropTypes.any,
-    // n: PropTypes.any.isRequired,
-    setIs2DCompleted: PropTypes.func,
-    is2DCompleted: PropTypes.bool,
-};
\ No newline at end of file
diff --git a/media/js/src/simulationOne/criticalValue.jsx b/media/js/src/simulations/simulation1/criticalValue.jsx
similarity index 99%
rename from media/js/src/simulationOne/criticalValue.jsx
rename to media/js/src/simulations/simulation1/criticalValue.jsx
index e6c5f20f..c362645a 100644
--- a/media/js/src/simulationOne/criticalValue.jsx
+++ b/media/js/src/simulations/simulation1/criticalValue.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Katex } from '../katexComponent';
-import { saveAnswer } from '../utils';
+import { Katex } from '../../utils/katexComponent';
+import { saveAnswer } from '../../utils/utils';
 
 export const CriticalValue = ({
     hypothesisTest2validate, tvalue, n, alpha, hypothesisTest, hypothesis,
diff --git a/media/js/src/simulations/simulation1/glossary.jsx b/media/js/src/simulations/simulation1/glossary.jsx
new file mode 100644
index 00000000..5dde1856
--- /dev/null
+++ b/media/js/src/simulations/simulation1/glossary.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const GlossaryButton = () => {
+    return (
+        <button
+            className="btn btn-sm btn-primary"
+            data-bs-toggle="modal"
+            data-bs-target="#glossaryModal">
+            Glossary
+        </button>
+    );
+};
\ No newline at end of file
diff --git a/media/js/src/simulationOne/graphCoefficientsSection.jsx b/media/js/src/simulations/simulation1/graphCoefficientsSection.jsx
similarity index 99%
rename from media/js/src/simulationOne/graphCoefficientsSection.jsx
rename to media/js/src/simulations/simulation1/graphCoefficientsSection.jsx
index ab82c635..8996d35b 100644
--- a/media/js/src/simulationOne/graphCoefficientsSection.jsx
+++ b/media/js/src/simulations/simulation1/graphCoefficientsSection.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Katex } from '../katexComponent';
+import { Katex } from '../../utils/katexComponent';
 import PropTypes from 'prop-types';
 
 export const GraphCoefficients = ({
diff --git a/media/js/src/simulationOne/hypothesisTest.jsx b/media/js/src/simulations/simulation1/hypothesisTest.jsx
similarity index 99%
rename from media/js/src/simulationOne/hypothesisTest.jsx
rename to media/js/src/simulations/simulation1/hypothesisTest.jsx
index 6af226e2..d7c529a1 100644
--- a/media/js/src/simulationOne/hypothesisTest.jsx
+++ b/media/js/src/simulations/simulation1/hypothesisTest.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Katex } from '../katexComponent';
+import { Katex } from '../../utils/katexComponent';
 import PropTypes from 'prop-types';
 import { Quiz } from './quiz';
 import axios from 'axios';
diff --git a/media/js/src/simulationOne/modalCV.jsx b/media/js/src/simulations/simulation1/modalCV.jsx
similarity index 99%
rename from media/js/src/simulationOne/modalCV.jsx
rename to media/js/src/simulations/simulation1/modalCV.jsx
index 3d74e060..61609321 100644
--- a/media/js/src/simulationOne/modalCV.jsx
+++ b/media/js/src/simulations/simulation1/modalCV.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Katex } from '../katexComponent';
+import { Katex } from '../../utils/katexComponent';
 
 export const STATIC_URL = window.MetricsMentor.staticUrl;
 
diff --git a/media/js/src/simulationOne/modalGlossary.jsx b/media/js/src/simulations/simulation1/modalGlossary.jsx
similarity index 99%
rename from media/js/src/simulationOne/modalGlossary.jsx
rename to media/js/src/simulations/simulation1/modalGlossary.jsx
index 489ce190..17982c9b 100644
--- a/media/js/src/simulationOne/modalGlossary.jsx
+++ b/media/js/src/simulations/simulation1/modalGlossary.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Katex } from '../katexComponent';
+import { Katex } from '../../utils/katexComponent';
 
 export const STATIC_URL = window.MetricsMentor.staticUrl;
 
diff --git a/media/js/src/simulationOne/modalPvalue.jsx b/media/js/src/simulations/simulation1/modalPvalue.jsx
similarity index 99%
rename from media/js/src/simulationOne/modalPvalue.jsx
rename to media/js/src/simulations/simulation1/modalPvalue.jsx
index 90e8cc97..507bb6ab 100644
--- a/media/js/src/simulationOne/modalPvalue.jsx
+++ b/media/js/src/simulations/simulation1/modalPvalue.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Katex } from '../katexComponent';
+import { Katex } from '../../utils/katexComponent';
 
 export const STATIC_URL = window.MetricsMentor.staticUrl;
 
diff --git a/media/js/src/multipleChoiceQuestion.jsx b/media/js/src/simulations/simulation1/multipleChoiceQuestion.jsx
similarity index 98%
rename from media/js/src/multipleChoiceQuestion.jsx
rename to media/js/src/simulations/simulation1/multipleChoiceQuestion.jsx
index 9415d3df..38878e51 100644
--- a/media/js/src/multipleChoiceQuestion.jsx
+++ b/media/js/src/simulations/simulation1/multipleChoiceQuestion.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { saveAnswer, extractTextContent } from './utils';
+import { saveAnswer, extractTextContent } from './../../utils/utils';
 
 export const MultipleChoiceQuestion = ({
     isSubmitted, setIsSubmitted, submissionId, questionNumber,
diff --git a/media/js/src/simulationOne/nullHypothesisSection.jsx b/media/js/src/simulations/simulation1/nullHypothesisSection.jsx
similarity index 99%
rename from media/js/src/simulationOne/nullHypothesisSection.jsx
rename to media/js/src/simulations/simulation1/nullHypothesisSection.jsx
index 2100e2ea..1a9a75fc 100644
--- a/media/js/src/simulationOne/nullHypothesisSection.jsx
+++ b/media/js/src/simulations/simulation1/nullHypothesisSection.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Katex } from '../katexComponent';
+import { Katex } from '../../utils/katexComponent';
 import PropTypes from 'prop-types';
 
 
diff --git a/media/js/src/simulationOne/pvalueComponent.jsx b/media/js/src/simulations/simulation1/pvalueComponent.jsx
similarity index 99%
rename from media/js/src/simulationOne/pvalueComponent.jsx
rename to media/js/src/simulations/simulation1/pvalueComponent.jsx
index 3ca9f0e7..2bdffc7d 100644
--- a/media/js/src/simulationOne/pvalueComponent.jsx
+++ b/media/js/src/simulations/simulation1/pvalueComponent.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Katex } from '../katexComponent';
-import { saveAnswer } from '../utils';
+import { Katex } from '../../utils/katexComponent';
+import { saveAnswer } from '../../utils/utils';
 import PropTypes from 'prop-types';
 
 
diff --git a/media/js/src/simulationOne/quiz.jsx b/media/js/src/simulations/simulation1/quiz.jsx
similarity index 100%
rename from media/js/src/simulationOne/quiz.jsx
rename to media/js/src/simulations/simulation1/quiz.jsx
diff --git a/media/js/src/simulationOne/scatterPlot.jsx b/media/js/src/simulations/simulation1/scatterPlot.jsx
similarity index 100%
rename from media/js/src/simulationOne/scatterPlot.jsx
rename to media/js/src/simulations/simulation1/scatterPlot.jsx
diff --git a/media/js/src/simulationOne/simulationIntro.jsx b/media/js/src/simulations/simulation1/simulationIntro.jsx
similarity index 94%
rename from media/js/src/simulationOne/simulationIntro.jsx
rename to media/js/src/simulations/simulation1/simulationIntro.jsx
index 0a58a43c..1178f3c2 100644
--- a/media/js/src/simulationOne/simulationIntro.jsx
+++ b/media/js/src/simulations/simulation1/simulationIntro.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Katex } from '../katexComponent';
+import { Katex } from '../../utils/katexComponent';
+import { GlossaryModal } from './modalGlossary';
 
 export const STATIC_URL = window.MetricsMentor.staticUrl;
 
@@ -38,12 +39,7 @@ export const SimIntro = ({plotType}) => {
                             This glossary will help you review
                             the key terms used here.
                         </p>
-                        <button
-                            className="btn btn-sm btn-primary"
-                            data-bs-toggle="modal"
-                            data-bs-target="#glossaryModal">
-                        Glossary
-                        </button>
+                        <GlossaryModal />
                     </div>
                 </div>
             </div>
diff --git a/media/js/src/simulationOne/simulationOne.jsx b/media/js/src/simulations/simulation1/simulationOne.jsx
similarity index 99%
rename from media/js/src/simulationOne/simulationOne.jsx
rename to media/js/src/simulations/simulation1/simulationOne.jsx
index 424f7d3c..4249f36c 100644
--- a/media/js/src/simulationOne/simulationOne.jsx
+++ b/media/js/src/simulations/simulation1/simulationOne.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ScatterPlot } from './scatterPlot';
-import { Katex } from '../katexComponent';
-import { authedFetch } from '../utils';
+import { Katex } from '../../utils/katexComponent';
+import { authedFetch } from '../../utils/utils';
 import { SimulationOneQuiz } from './simulationOneQuiz';
 import { SimIntro } from './simulationIntro';
 import { GraphCoefficients } from './graphCoefficientsSection';
diff --git a/media/js/src/simulationOne/simulationOneQuiz.jsx b/media/js/src/simulations/simulation1/simulationOneQuiz.jsx
similarity index 99%
rename from media/js/src/simulationOne/simulationOneQuiz.jsx
rename to media/js/src/simulations/simulation1/simulationOneQuiz.jsx
index 4baa6dc8..6998cd64 100644
--- a/media/js/src/simulationOne/simulationOneQuiz.jsx
+++ b/media/js/src/simulations/simulation1/simulationOneQuiz.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Katex } from '../katexComponent';
+import { Katex } from '../../utils/katexComponent';
 import { HypothesisTest } from './hypothesisTest';
-import { MultipleChoiceQuestion } from '../multipleChoiceQuestion';
+import { MultipleChoiceQuestion } from './multipleChoiceQuestion';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
diff --git a/media/js/src/simulationTwo/controlVariable.jsx b/media/js/src/simulations/simulation2/components/controlVariable.jsx
similarity index 98%
rename from media/js/src/simulationTwo/controlVariable.jsx
rename to media/js/src/simulations/simulation2/components/controlVariable.jsx
index 33da2e18..cc43d506 100644
--- a/media/js/src/simulationTwo/controlVariable.jsx
+++ b/media/js/src/simulations/simulation2/components/controlVariable.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { formulaText, inlineKatex } from '../utils';
+import { formulaText, inlineKatex } from '../../../utils/utils';
 import { labelIndex } from '../dataAttr';
-import { Katex } from '../katexComponent';
+import { Katex } from '../../../utils/katexComponent';
 
 
 export const ControlVariable = ({
diff --git a/media/js/src/simulationTwo/learningGoals.jsx b/media/js/src/simulations/simulation2/components/learningGoals.jsx
similarity index 98%
rename from media/js/src/simulationTwo/learningGoals.jsx
rename to media/js/src/simulations/simulation2/components/learningGoals.jsx
index 0dffb9b0..26227a2a 100644
--- a/media/js/src/simulationTwo/learningGoals.jsx
+++ b/media/js/src/simulations/simulation2/components/learningGoals.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { labelIndex } from '../dataAttr';
-import { inlineKatex } from '../utils';
+import { inlineKatex } from '../../../utils/utils';
 
 
 export const LearningGoals = ({
diff --git a/media/js/src/multipleChoiceQuestion2.jsx b/media/js/src/simulations/simulation2/components/multipleChoiceQuestion2.jsx
similarity index 99%
rename from media/js/src/multipleChoiceQuestion2.jsx
rename to media/js/src/simulations/simulation2/components/multipleChoiceQuestion2.jsx
index a1bfbc90..1d999bbb 100644
--- a/media/js/src/multipleChoiceQuestion2.jsx
+++ b/media/js/src/simulations/simulation2/components/multipleChoiceQuestion2.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { saveAnswer } from './utils';
+import { saveAnswer } from '../../../utils/utils';
 
 
 export const MultipleChoiceQuestion2 = ({isSubmitted, setIsSubmitted, takeaways,
diff --git a/media/js/src/simulationTwo/scatterPlot2.jsx b/media/js/src/simulations/simulation2/components/scatterPlot2.jsx
similarity index 100%
rename from media/js/src/simulationTwo/scatterPlot2.jsx
rename to media/js/src/simulations/simulation2/components/scatterPlot2.jsx
diff --git a/media/js/src/simulationTwo/simulationTwo.jsx b/media/js/src/simulations/simulation2/components/simulationTwo.jsx
similarity index 97%
rename from media/js/src/simulationTwo/simulationTwo.jsx
rename to media/js/src/simulations/simulation2/components/simulationTwo.jsx
index f0795a7a..880af987 100644
--- a/media/js/src/simulationTwo/simulationTwo.jsx
+++ b/media/js/src/simulations/simulation2/components/simulationTwo.jsx
@@ -2,11 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { ScatterPlot2 } from './scatterPlot2';
 import { Variables } from './variables';
 import { ControlVariable } from './controlVariable';
-import DATASETS from '../../../../json/datasets.json';
-import { Step } from '../step';
+import DATASETS from '../datasets.json';
+import { Step } from '../../../step.jsx';
 import { LearningGoals } from './learningGoals';
-import { MultipleChoiceQuestion2 } from '../multipleChoiceQuestion2';
-import { authedFetch } from '../utils';
+import { MultipleChoiceQuestion2 } from './multipleChoiceQuestion2';
+import { authedFetch } from '../../../utils/utils.jsx';
 import { dataAttr, labelIndex, takeaways2, sim2TextVariable as varText,
     sim2TextControl as controlText, sim2Information as info
 } from '../dataAttr';
diff --git a/media/js/src/simulationTwo/variables.jsx b/media/js/src/simulations/simulation2/components/variables.jsx
similarity index 94%
rename from media/js/src/simulationTwo/variables.jsx
rename to media/js/src/simulations/simulation2/components/variables.jsx
index 7757afaa..4086034d 100644
--- a/media/js/src/simulationTwo/variables.jsx
+++ b/media/js/src/simulations/simulation2/components/variables.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { inlineKatex, formulaText } from '../utils';
+import { inlineKatex, formulaText } from '../../../utils/utils';
 import { labelIndex as label } from '../dataAttr';
 
 // If this get's implemented into other Simulations, rewrite as a JSX component
diff --git a/media/js/src/dataAttr.jsx b/media/js/src/simulations/simulation2/dataAttr.jsx
similarity index 99%
rename from media/js/src/dataAttr.jsx
rename to media/js/src/simulations/simulation2/dataAttr.jsx
index 1db05a03..4ae96237 100644
--- a/media/js/src/dataAttr.jsx
+++ b/media/js/src/simulations/simulation2/dataAttr.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { inlineKatex } from './utils';
+import { inlineKatex } from '../../utils/utils';
 
 export const dataAttr = {
     affairs_sim2: {
diff --git a/json/datasets.json b/media/js/src/simulations/simulation2/datasets.json
similarity index 100%
rename from json/datasets.json
rename to media/js/src/simulations/simulation2/datasets.json
diff --git a/media/js/src/dataAttr.test.jsx b/media/js/src/simulations/simulation2/tests/dataAttr.test.jsx
similarity index 98%
rename from media/js/src/dataAttr.test.jsx
rename to media/js/src/simulations/simulation2/tests/dataAttr.test.jsx
index e8338938..92b6e08e 100644
--- a/media/js/src/dataAttr.test.jsx
+++ b/media/js/src/simulations/simulation2/tests/dataAttr.test.jsx
@@ -1,6 +1,7 @@
 
 import { dataAttr, labelIndex, takeaways2, sim2TextVariable as varText,
-    sim2TextControl as controlText, sim2Information as info } from './dataAttr';
+    sim2TextControl as controlText,
+    sim2Information as info } from '../dataAttr';
 
 describe('Simulation 2 Object types', () => {
     test('dataAttr object is defined', () => {
diff --git a/media/js/src/katexComponent.jsx b/media/js/src/utils/katexComponent.jsx
similarity index 100%
rename from media/js/src/katexComponent.jsx
rename to media/js/src/utils/katexComponent.jsx
diff --git a/media/js/src/utils.jsx b/media/js/src/utils/utils.jsx
similarity index 100%
rename from media/js/src/utils.jsx
rename to media/js/src/utils/utils.jsx
diff --git a/media/js/src/utils.test.jsx b/media/js/src/utils/utils.test.jsx
similarity index 100%
rename from media/js/src/utils.test.jsx
rename to media/js/src/utils/utils.test.jsx