Merge pull request #568 from ccnmtl/seeding

Remove seeding

cypress/e2e/2.Sim1/sim1.cy.js

@@ -21,7 +21,6 @@ describe('Graph Data', () => {
     it('Graph Seeding', () => {
         cy.get('h2.h2-primary')
             .should('contain', 'Graph seeding');
-        // cy.get('label input[value="seedString"]').should('exist');
     });
     it('Graph Coefficients', () => {
         cy.get('h2.h2-primary')
@@ -32,5 +31,4 @@ describe('Graph Data', () => {
         cy.get('h2.h2-primary')
             .should('contain', 'Defining null hypothesis');
     });
-
 });

media/js/src/simulations/simulation1/scatterPlot.jsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import Plot from 'react-plotly.js';
-import seedrandom from 'seedrandom';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 
 
-export const ScatterPlot = ({ N, yCorrelation, seed, setAppRvalue,
+export const ScatterPlot = ({ N, yCorrelation, setAppRvalue,
     setSlope, setIntercept, setStderror, plotType, setSlopes,
     setStderrs, xCorrelation, setAppRvalue3d, setIntercept3d
 }) => {
@@ -16,14 +15,14 @@ export const ScatterPlot = ({ N, yCorrelation, seed, setAppRvalue,
         if (N < 50 || N > 500) {
             return [];
         }
-        const rng = seedrandom(seed);
 
         let generatedData = [];
         if (typeof yCorrelation === 'number') {
             for (let i = 0; i < N; i++) {
-                const x = Math.round((rng() * 100 - 50) * 2);
+                const x = Math.round((Math.random() * 100 - 50) * 2);
                 const y = Math.round(yCorrelation * x + Math.sqrt(
-                    1 - Math.pow(yCorrelation, 2)) * (rng() * 100 - 50) * 2);
+                    1 - Math.pow(yCorrelation, 2)) *
+                    (Math.random() * 100 - 50) * 2);
                 generatedData.push({ x, y });
             }
         }
@@ -32,7 +31,8 @@ export const ScatterPlot = ({ N, yCorrelation, seed, setAppRvalue,
             generatedData = generatedData.map(point => ({
                 ...point,
                 z: Math.round(xCorrelation * point.x + Math.sqrt(
-                    1 - Math.pow(xCorrelation, 2)) * (rng() * 100 - 50) * 2)
+                    1 - Math.pow(xCorrelation, 2)) *
+                    (Math.random() * 100 - 50) * 2)
             }));
         }
 
@@ -124,7 +124,7 @@ export const ScatterPlot = ({ N, yCorrelation, seed, setAppRvalue,
         if (N) {
             setData(generateData());
         }
-    }, [N, yCorrelation, xCorrelation, seed, plotType]);
+    }, [N, yCorrelation, xCorrelation, plotType]);
 
     useEffect(() => {
         if (data.length > 0) {
@@ -205,7 +205,6 @@ export const ScatterPlot = ({ N, yCorrelation, seed, setAppRvalue,
 ScatterPlot.propTypes = {
     N: PropTypes.number.isRequired,
     yCorrelation: PropTypes.number.isRequired,
-    seed: PropTypes.string.isRequired,
     setAppRvalue: PropTypes.func,
     setSlope: PropTypes.func,
     setIntercept: PropTypes.func,

media/js/src/simulations/simulation1/simulationOne.jsx

@@ -19,8 +19,6 @@ export const SimulationOne = () => {
     const [N, setN] = useState(50);
     const [yCorrelation, setYcorrelation] = useState(0.3);
     const [xCorrelation, setXcorrelation] = useState(0.3);
-    // eslint-disable-next-line no-unused-vars
-    const [seed, setSeed] = useState('seedString');
     const [slope, setSlope] = useState(null);
     const [intercept, setIntercept] = useState(null);
     const [intercept3d, setIntercept3d] = useState(null);
@@ -46,10 +44,10 @@ export const SimulationOne = () => {
     const createSubmission = async() => {
         // Define the data to be saved based on the plot type
         const data = plotType === '2d' ? {
-            N, yCorrelation, seed, slope, intercept, stderror, appRvalue,
+            N, yCorrelation, slope, intercept, stderror, appRvalue,
             tvalue, hypothesizedSlope
         } : {
-            N, yCorrelation, seed, slope, intercept, stderror, appRvalue,
+            N, yCorrelation, slope, intercept, stderror, appRvalue,
             tvalue, hypothesizedSlope, slopes, stderrs, xCorrelation,
             appRvalue3d, intercept3d
         };
@@ -127,10 +125,6 @@ export const SimulationOne = () => {
         setXcorrelation(parseFloat(e.target.value));
     };
 
-    // const handleSeedChange = (e) => {
-    //     setSeed(e.target.value);
-    // };
-
     const handlePlotTypeChange = (type) => {
         setPlotType(type);
         setSelectedAltHypothesis(null);
@@ -348,15 +342,6 @@ export const SimulationOne = () => {
                                     </div>
                                 </>
                             )}
-                            {/* <div className="mt-3">
-                                <label className="dev-only"> Seed ID:
-                                    <input type="text"
-                                        value={seed}
-                                        // disabled={startQuiz}
-                                        className="ms-1 mt-2 dev-only" size="10"
-                                        onChange={handleSeedChange} />
-                                </label>
-                            </div> */}
                         </div>
                     </div>
                 </div> {/* div class=simulation__step-container */}
@@ -483,7 +468,6 @@ export const SimulationOne = () => {
                     N={N}
                     yCorrelation={yCorrelation}
                     xCorrelation={xCorrelation}
-                    seed={seed}
                     setSlopes={setSlopes}
                     setSlope={setSlope}
                     setStderrs={setStderrs}

media/js/src/simulations/simulation2/components/controlVariable.jsx

@@ -6,9 +6,8 @@ import { Katex } from '../../../utils/katexComponent';
 
 
 export const ControlVariable = ({
-    controls, data, handleControls, controlText
+    controls, data, handleControls, controlText, index
 }) => {
-    // const baseData = data.lines[data.y];
     return (
         <>
             <p>
@@ -52,16 +51,16 @@ export const ControlVariable = ({
             {/* container for all variables */}
             <div className="choice-list ms-0">
                 {/* original variables y and x1 below */}
-                {Object.entries(data).slice(0,2)
+                {[['y', index.y], ['x_1', index.x_1]]
                     .map((dType, i) => (
                         <div key={i} className="dataset-variable-item ps-4">
                             {inlineKatex(`${dType[0]}
                                 \\text{ (${labelIndex[dType[1]]})}`)}
                         </div>
                     ))}
                 {/* control variables below */}
-                {data.option.map((dType, i) => {
-                    const selectData = data.lines[dType];
+                {index.option.map((dType, i) => {
+                    const selectData = data[dType];
                     return (
                         <div key={i}
                             className={'form-check dataset-variable-item'}
@@ -93,10 +92,10 @@ export const ControlVariable = ({
                             {controls[dType] === true && [
                                 {
                                     title: 'Regression line equation',
-                                    body: [`\\widehat{${labelIndex[data.y]}
+                                    body: [`\\widehat{${labelIndex[index.y]}
                                         _i} = ${selectData.intercept} +
                                         ${selectData.slope_x1 +
-                                            labelIndex[data.x_1]}_i +
+                                            labelIndex[index.x_1]}_i +
                                         ${selectData.slope_x2 +
                                             labelIndex[dType]}_i`],
                                 },
@@ -105,7 +104,7 @@ export const ControlVariable = ({
                                         coefficient
                                         for {inlineKatex('x_1')}</>,
                                     body: [`\\hat{\\beta_1} =
-                                        ${data.lines[data.x_1].slope}`],
+                                        ${data[index.x_1].slope}`],
                                 },
                                 {
                                     title: <>New sample slope coefficient
@@ -153,4 +152,5 @@ ControlVariable.propTypes = {
     data: PropTypes.object.isRequired,
     handleControls: PropTypes.func.isRequired,
     controlText: PropTypes.object.isRequired,
+    index: PropTypes.object.isRequired,
 };

media/js/src/simulations/simulation2/components/multipleChoiceQuestion2.jsx

@@ -10,8 +10,8 @@ export const MultipleChoiceQuestion2 = ({isSubmitted, setIsSubmitted, takeaways,
     const [selected, setSelected] = useState({});
     const [results, setResults] = useState({});
 
-    const handleOptionSelect = (topic, option) => {
-        setSelected({...selected, [topic]: option});
+    const handleOptionSelect = (topic, choice) => {
+        setSelected({...selected, [topic]: choice});
     };
 
     const asyncSave = async function() {
@@ -28,7 +28,7 @@ export const MultipleChoiceQuestion2 = ({isSubmitted, setIsSubmitted, takeaways,
         setIsSubmitted(true);
         const correct = {};
         for (let topic in takeaways) {
-            correct[topic] = $(`input[name="${topic}-options"]:checked`)
+            correct[topic] = $(`input[name="${topic}-choices"]:checked`)
                 .val() === takeaways[topic].answer;
         }
         setResults({...correct});
@@ -66,29 +66,29 @@ export const MultipleChoiceQuestion2 = ({isSubmitted, setIsSubmitted, takeaways,
     return (
         <>
             {Object.entries(takeaways)
-                .map(([topic, {prompt, options, answer, feedback_bad,
+                .map(([topic, {prompt, choices, answer, feedback_bad,
                     feedback_good}], i) => (
                     <div key={i}>
                         <p className={`mb-3 ${i > 0 ? 'mt-5' : ''}`}>
                             {prompt}
                         </p>
                         <div className="choice-list ms-0">
-                            {options.map((option, index) => (
+                            {choices.map((choice, index) => (
                                 <div key={index} className="form-check">
                                     <input
                                         className="form-check-input"
                                         type='radio'
-                                        id={`${topic}-option-${index}`}
-                                        name={`${topic}-options`}
-                                        value={option}
-                                        checked={selected[topic] === option}
+                                        id={`${topic}-choice-${index}`}
+                                        name={`${topic}-choices`}
+                                        value={choice}
+                                        checked={selected[topic] === choice}
                                         onChange={() => handleOptionSelect(
-                                            topic, option)}
+                                            topic, choice)}
                                     />
                                     <label className="form-check-label"
-                                        htmlFor={`${topic}-option-${index}`}
+                                        htmlFor={`${topic}-choice-${index}`}
                                     >
-                                        {option}
+                                        {choice}
                                     </label>
                                 </div>
                             ))}

media/js/src/simulations/simulation2/components/scatterPlot2.jsx

@@ -3,13 +3,13 @@ import Plot from 'react-plotly.js';
 import PropTypes from 'prop-types';
 
 
-export const ScatterPlot2 = ({controls, data, labelIndex, param}) => {
+export const ScatterPlot2 = ({controls, data, labelIndex, param, index}) => {
 
     let x1_values = [];
     let y_values = [];
     if (data) {
-        x1_values = data[param.x_1];
-        y_values = data[param.y];
+        x1_values = data[index.x_1];
+        y_values = data[index.y];
     }
 
     const [selectedAltLines, setSelectedAltLines] = useState([]);
@@ -19,7 +19,7 @@ export const ScatterPlot2 = ({controls, data, labelIndex, param}) => {
         if (controls) {
             Object.entries(controls).forEach(([key, value]) => {
                 if (value) {
-                    altLines.push(param.lines[key]);
+                    altLines.push(param[key]);
                 }
             });
         }
@@ -71,9 +71,9 @@ export const ScatterPlot2 = ({controls, data, labelIndex, param}) => {
                         textfont: { color: 'black' },
                         textposition: 'top center',
                         x: [labelPos(param.xRange)],
-                        y: [param.lines[param.x_1].y[1]],
+                        y: [param[index.x_1].y[1]],
                     },
-                    linedata(param.lines[param.x_1].y, 'black'),
+                    linedata(param[index.x_1].y, 'black'),
                     ...selectedAltLines.map((line) =>
                         linedata(line.y, line.color)),
                     ...selectedAltLines.map((line) =>
@@ -82,9 +82,9 @@ export const ScatterPlot2 = ({controls, data, labelIndex, param}) => {
                 layout={{
                     title: 'Omitted Variable Bias',
                     showlegend: false,
-                    xaxis: { title: labelIndex[param.x_1], minallowed: 0},
+                    xaxis: { title: labelIndex[index.x_1], minallowed: 0},
                     yaxis: {
-                        title: labelIndex[param.y],
+                        title: labelIndex[index.y],
                         scaleratio: 1,
                         minallowed: 0,
                     },
@@ -135,4 +135,5 @@ ScatterPlot2.propTypes = {
     data: PropTypes.object,
     labelIndex: PropTypes.object.isRequired,
     param: PropTypes.object,
+    index: PropTypes.object.isRequired,
 };

media/js/src/simulations/simulation2/components/simulationTwo.jsx

@@ -8,7 +8,8 @@ import { LearningGoals } from './learningGoals';
 import { MultipleChoiceQuestion2 } from './multipleChoiceQuestion2';
 import { authedFetch } from '../../../utils/utils.jsx';
 import { dataAttr, labelIndex, takeaways2, sim2TextVariable as varText,
-    sim2TextControl as controlText, sim2Information as info
+    sim2TextControl as controlText, sim2Information as info, dataRange,
+    dataIndex
 } from '../dataAttr';
 
 const simContainer = document.querySelector('#react-root');
@@ -156,14 +157,15 @@ export const SimulationTwo = () => {
                         {
                             title: 'Variables of Interest',
                             body: <Variables params={{
-                                ...dataAttr[choice],
+                                ...dataAttr[choice], ...dataIndex[choice],
                                 varText: varText[choice]}} />
                         },
                         {
                             title: 'Control Variables',
                             body: <ControlVariable data={dataAttr[choice]}
                                 {...{controls, handleControls,
-                                    controlText: controlText[choice]}}/>
+                                    controlText: controlText[choice],
+                                    index: dataIndex[choice],}}/>
                         },
                     ].map((step, i) =>
                         <Step key={i} header={step.header} title={step.title}>
@@ -200,7 +202,8 @@ export const SimulationTwo = () => {
             <div className="simulation__graphspace">
                 <ScatterPlot2
                     {...{controls, data, labelIndex}}
-                    param={dataAttr[choice]}
+                    param={dataRange[choice]}
+                    index={dataIndex[choice]}
                 />
                 {choice && <div className="container text-center">
                     <p className="mx-auto px-5">{info[choice]}</p>

media/js/src/simulations/simulation2/components/variables.jsx

@@ -6,7 +6,7 @@ import { labelIndex as label } from '../dataAttr';
 // If this get's implemented into other Simulations, rewrite as a JSX component
 
 export const Variables = ({params}) => {
-    const vars = params.lines[params.x_1];
+    const vars = params[params['x_1']];
     return (<>
         <p>
             {params.varText}