Skip to content

Commit 4e124d5

Browse files
ndittrenndittren
authored
Merge pull request #1101 from ccnmtl/ERD453-learn
Changes to learning section log
2 parents 5c5601c + 5bf635c commit 4e124d5

File tree

5 files changed

+126
-29
lines changed

5 files changed

+126
-29
lines changed

‎django.mk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ REQUIREMENTS ?= requirements.txt
2525
SYS_PYTHON ?= python3
2626
PY_SENTINAL ?= $(VE)/sentinal
2727
WHEEL_VERSION ?= 0.43.0
28-
PIP_VERSION ?= 25.2
28+
PIP_VERSION ?= 25.3
2929
MAX_COMPLEXITY ?= 10
3030
INTERFACE ?= localhost
3131
RUNSERVER_PORT ?= 8000

‎media/js/src/simulations/simulation4/logarithmGraph.jsx‎

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,37 @@ import dataset from './logarithm.json';
44
import PropTypes from 'prop-types';
55

66
export const LogarithmGraph = ({ selectedModel, selectedFit }) => {
7-
const model = dataset[selectedModel];
8-
if (!model) return null;
97

8+
if (!selectedModel) {
9+
return (
10+
<Plot
11+
data={[
12+
{
13+
x: [1],
14+
y: [1],
15+
mode: 'text',
16+
text: ['Select a model to begin'],
17+
}
18+
]}
19+
layout={{
20+
title: 'Logarithm Regression Models',
21+
xaxis: { title: 'X' },
22+
yaxis: { title: 'Y' },
23+
font: { textcase: 'word caps' },
24+
legend: {
25+
orientation: 'h',
26+
xanchor: 'center',
27+
x: 0.5,
28+
y: 1.18
29+
},
30+
}}
31+
config={{ responsive: true }}
32+
style={{ width: '100%', height: '85%' }}
33+
/>
34+
);
35+
}
36+
37+
const model = dataset[selectedModel];
1038
const x = model.X;
1139
const y = model.Y;
1240
const fitData = model[selectedFit];
@@ -22,15 +50,18 @@ export const LogarithmGraph = ({ selectedModel, selectedFit }) => {
2250
symbol: model.symbol
2351
},
2452
name: 'Observed Data'
25-
},
26-
fitData && fitData.line && {
53+
}
54+
];
55+
56+
if (fitData && fitData.line) {
57+
plotData.push({
2758
x: fitData.line.x,
2859
y: fitData.line.y,
29-
mode: 'line',
60+
mode: 'lines',
3061
line: { color: model.bordercolor },
3162
name: `${selectedFit.replace('Fit', '')} Fit`
32-
}
33-
].filter(Boolean);
63+
});
64+
}
3465

3566
return (
3667
<Plot
@@ -39,7 +70,7 @@ export const LogarithmGraph = ({ selectedModel, selectedFit }) => {
3970
title: model.title,
4071
xaxis: { title: 'X' },
4172
yaxis: { title: 'Y' },
42-
legend: { orientation: 'h' }
73+
legend: { orientation: 'h' },
4374
}}
4475
config={{ responsive: true }}
4576
style={{ width: '100%', height: '85%' }}
@@ -48,6 +79,6 @@ export const LogarithmGraph = ({ selectedModel, selectedFit }) => {
4879
};
4980

5081
LogarithmGraph.propTypes = {
51-
selectedModel: PropTypes.string.isRequired,
52-
selectedFit: PropTypes.string.isRequired
53-
};
82+
selectedModel: PropTypes.string,
83+
selectedFit: PropTypes.string
84+
};

‎media/js/src/simulations/simulation4/logarithmRegressionsDef.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { GenericModal } from '../../Modal';
3+
4+
5+
export const LogarithmDefinition = () => {
6+
return (
7+
<GenericModal
8+
modalId="logarithmDefinition"
9+
title="Logarithm Regressions"
10+
bodyContent={<>
11+
<p>
12+
Lorem ipsum dolor sit amet consectetur adipisicing elit
13+
Mollitia doloremque iure explicabo quis asperiores
14+
natus. Inventore laborum tempore, molestias expedita
15+
nemo nostrum dicta vel eum autem laboriosam ad ipsa
16+
modi!
17+
</p>
18+
</>}
19+
/>
20+
);
21+
};

‎media/js/src/simulations/simulation4/simulationFour.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { STATIC_URL, createSubmission, getCoursePk } from '../../utils/utils';
44
import { PolynomialGraph } from './polynomialGraph';
55
import { WhatArePolynomialRegressions } from './whatArePolynomialRegs';
66
import { NonlinearRegsDefinition } from './nonlinearRegModal';
7+
import { LogarithmDefinition } from './logarithmRegressionsDef';
78
import { WhatAreLogarithmRegs } from './whatAreLogarithms';
89
import { LogarithmGraph } from './logarithmGraph';
910
import { RealDataPolynomials } from './realDataPolynomials';
@@ -24,8 +25,8 @@ export const SimulationFour = () => {
2425
const [progress, setProgress] = useState([0,0,0]);
2526
const [compareRegLine, setCompareRegLine] = useState([]);
2627
const [isCorrect, setIsCorrect] = useState([false]);
27-
const [selectedModel, setSelectedModel] = useState('logLinear');
28-
const [selectedFit, setSelectedFit] = useState('linearFit');
28+
const [selectedModel, setSelectedModel] = useState('');
29+
const [selectedFit, setSelectedFit] = useState('');
2930

3031
const quizComplete = () => !isCorrect.includes(false);
3132

@@ -175,7 +176,7 @@ export const SimulationFour = () => {
175176
},
176177
{
177178
headerId: 'whatarelogarithms',
178-
title: 'What are Logarithms?',
179+
title: 'What are Logarithm regressions?',
179180
content: <>
180181
{progress[stage] < 1 && (
181182
<WhatAreLogarithmRegs
@@ -243,7 +244,7 @@ export const SimulationFour = () => {
243244
graphContent={<LogarithmGraph
244245
selectedModel={selectedModel}
245246
selectedFit={selectedFit} />}
246-
modals={[]}
247+
modals={[<LogarithmDefinition key="modal2" />]}
247248
/>
248249
)}
249250
{stage === 2 && (

‎media/js/src/simulations/simulation4/whatAreLogarithms.jsx‎

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { PromptBlock } from '../../PromptBlock';
34

45
export const WhatAreLogarithmRegs = ({
56
selectedFit, setSelectedFit,
@@ -12,25 +13,61 @@ export const WhatAreLogarithmRegs = ({
1213
logLog: ['linearFit', 'logLogFit']
1314
};
1415

16+
const handleModelChange = (model) => {
17+
setSelectedModel(model);
18+
const defaultFit = fitOptions[model][0];
19+
setSelectedFit(defaultFit);
20+
};
21+
1522
return (
16-
<div>
17-
<h2>Exploring Logarithmic Relationships</h2>
23+
<>
1824
<p>
19-
Select a model type below to explore how logarithmic
20-
transformations affect regression fitting.
25+
Lorem ipsum dolor sit amet consectetur adipisicing elit
26+
Mollitia doloremque iure explicabo quis asperiores
27+
natus. Inventore laborum tempore, molestias expedita
28+
nemo nostrum dicta vel eum autem laboriosam ad ipsa
29+
modi!
30+
</p>
31+
<PromptBlock
32+
text="But first, take a moment to familiarize yourself with
33+
the definition of logarithm regressions; it&rsquo;ll help
34+
as you continue with this exercise." />
35+
<button
36+
className="btn btn-sm btn-primary"
37+
data-bs-toggle="modal"
38+
data-bs-target="#logarithmDefinition"
39+
data-cy="define-logarithm">
40+
Logarithm Regressions
41+
</button>
42+
43+
<h2>Logarithm regression plots</h2>
44+
<p>Each generated dataset below show a distinct pattern to help
45+
you expolore how different logarithm models is used.
2146
</p>
47+
<PromptBlock list={[
48+
'Select a graph plot',
49+
'Look at plot, look at regression line',
50+
'Review interpretation of the fit',
51+
'Read about when to use this method'
52+
]} />
2253

23-
<div className="radio-group">
54+
<div className="choice-list ms-0">
2455
{Object.keys(fitOptions).map(model => (
25-
<div key={model}>
26-
<label htmlFor={`model-radio-${model}`}>
56+
<div key={model}
57+
className={'form-check dataset-variable-item'}>
58+
<label
59+
htmlFor={`model-radio-${model}`}
60+
className={selectedModel === model
61+
? 'text-primary'
62+
: ''}>
2763
<input
64+
className="form-check-input"
2865
type="radio"
2966
name="model-radio-group"
3067
id={`model-radio-${model}`}
3168
value={model}
3269
checked={selectedModel === model}
33-
onChange={() => setSelectedModel(model)}
70+
onChange={() => handleModelChange(model)}
3471
/>
3572
{model === 'logLinear'
3673
? 'Log-Linear Model'
@@ -41,9 +78,11 @@ export const WhatAreLogarithmRegs = ({
4178
{selectedModel === model && (
4279
<div className="nested-radio ps-4">
4380
{fitOptions[model].map(fit => (
44-
<label key={fit} className="d-block"
81+
<label key={fit}
82+
className="ps-4 mt-2 d-block"
4583
htmlFor={`fit-radio-${model}-${fit}`}>
4684
<input
85+
className="form-check-input"
4786
type="radio"
4887
name={`fit-radio-group-${model}`}
4988
id={`fit-radio-${model}-${fit}`}
@@ -53,11 +92,16 @@ export const WhatAreLogarithmRegs = ({
5392
/>
5493
{
5594
(() => {
56-
const fitLabel = fit
95+
let fitLabel = fit
5796
.replace('Fit', '')
5897
.replace(/([A-Z])/g, ' $1')
59-
.trim();
60-
return `${fitLabel} Regression`;
98+
.trim()
99+
.toLowerCase();
100+
return (
101+
'With ' +
102+
fitLabel +
103+
' regression fit'
104+
);
61105
})()
62106
}
63107
</label>
@@ -67,7 +111,7 @@ export const WhatAreLogarithmRegs = ({
67111
</div>
68112
))}
69113
</div>
70-
</div>
114+
</>
71115
);
72116
};
73117

0 commit comments

Comments
 (0)