Skip to content

Commit d4aa96e

Browse files
zmustaphazmustapha
authored
Merge pull request #659 from ccnmtl/sim1-mentorvoice-revision
Sim1 revisions to description, learning goals, corr slider, and sample size validation message
2 parents 503ea7b + f8a8776 commit d4aa96e

File tree

6 files changed

+92
-147
lines changed

6 files changed

+92
-147
lines changed

‎media/js/src/simulations/simulation1/simulationIntro.jsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,15 @@ export const SimIntro = ({plotType}) => {
2828
</header>
2929
<div className="simulation__step-content">
3030
<p>
31-
In this simulation, you&rsquo;ll learn about
31+
In this simulation, you&rsquo;ll revisit
3232
hypothesis testing for the population slope
33-
in simple and multiple regression models.
34-
You&rsquo;ll be able to visualize the relationship
35-
between two, or three variables, and generate
36-
data to test the null hypothesis that the
37-
population slope is equal to a specified value.
33+
in simple and multiple regression models. Using
34+
generated data, you&rsquo;ll review the
35+
methodology involved in hypothesis testing,
36+
including the interpretation of
37+
<Katex tex={'p'} className="katex-inline" />-values
38+
and <Katex tex={'critical~values'}
39+
className="katex-inline"/>.
3840
</p>
3941
<p>
4042
This glossary will help you review
@@ -60,24 +62,23 @@ export const SimIntro = ({plotType}) => {
6062
</header>
6163
{plotType === '2d' && (
6264
<div className="simulation__step-content">
63-
<p>
64-
The sample size <Katex tex={'n'}
65-
className="katex-inline"/> and the
66-
correlation between the dependent variable
67-
<Katex tex={'y'}
68-
className="katex-inline"/> and the
69-
independent variable <Katex tex={'x'}
70-
className="katex-inline"/> can
65+
<p>The learning goal is to understand that the
66+
sample size &mdash;<Katex tex={'n'}
67+
className="katex-inline"/>, and the
68+
correlation between the dependent and independent
69+
variables <Katex tex={'y'}
70+
className="katex-inline"/> and <Katex tex={'x'}
71+
className="katex-inline"/> &mdash; <Katex
72+
tex={'\\text{corr}(x,y)'}
73+
className="katex-inline"/> &mdash; can
7174
significantly influence the outcomes of your
72-
hypothesis tests about the population
73-
parameters.
74-
</p>
75-
<p>
76-
Consider how the choice of the correlation
77-
coefficient <Katex tex={'\\text{corr}(x,y)'}
78-
className="katex-inline"/> and/or the
79-
sample size can influence your decision
80-
regarding the null hypothesis.
75+
hypothesis tests on the population
76+
parameters.</p>
77+
<p>Consider how the choice
78+
of <Katex tex={'\\text{corr}(x,y)'}
79+
className="katex-inline"/> and <Katex tex={'n'}
80+
className="katex-inline"/> can influence your
81+
decision regarding the null hypothesis.
8182
</p>
8283
</div>
8384

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

Lines changed: 40 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -178,32 +178,20 @@ export const SimulationOne = () => {
178178
</header>
179179
<div className="simulation__step-content">
180180
{plotType === '2d' && (
181-
<p>
182-
Let&rsquo;s start by setting up your graph.
183-
First define the parameters for generating
184-
random data points. Specify the sample
185-
size <Katex tex={'n'}
186-
className="katex-inline"/> and
187-
the estimated correlation coefficient
188-
<Katex tex={'\\text{corr}(x,y)'}
189-
className="katex-inline" />.
190-
</p>
181+
<p>Let&rsquo;s start setting up the parameters
182+
to generate random data points for your
183+
graph.</p>
191184
)}
192185
{plotType === '3d' && (
193-
<p>
194-
Let&rsquo;s introduce another variable to
195-
your graph, <Katex tex={'x_2'}
196-
className="katex-inline"/>.
197-
Sample size <Katex tex={'n'}
198-
className="katex-inline"/> and
199-
<Katex tex={'\\text{corr}(x_1,y)'}
200-
className="katex-inline" /> are set
201-
in the previous section. Here, you
202-
can specify the estimated correlation
203-
coefficient <Katex
204-
tex={'\\text{corr}(x_1,x_2)'}
205-
className="katex-inline" />.
206-
</p>
186+
<p>Let&rsquo;s introduce another variable to
187+
your graph, <Katex tex={'x_2'}
188+
className="katex-inline"/> and <Katex
189+
tex={'\\text{corr}(x_1,x_2)'}
190+
className="katex-inline" />.
191+
<Katex tex={'n'} className="katex-inline"/> and
192+
<Katex tex={'\\text{corr}(x_1,y)'}
193+
className="katex-inline" /> are values from
194+
the previous section.</p>
207195
)}
208196
<div className="mt-4 d-flex">
209197
<label htmlFor="nSampleSize"
@@ -216,23 +204,29 @@ export const SimulationOne = () => {
216204
</label>
217205
<input type="number" min="50" max="500"
218206
id="nSampleSize"
219-
className="form-control short-input"
207+
className="form-control extra-short-input"
220208
disabled={
221209
is2DCompleted || lockControls}
222210
value={N}
223211
onBlur={handleNBlur}
224212
onChange={handleNChange} />
213+
{isNInvalid && (<>
214+
<div className="alert-incorrect-container
215+
ms-2">
216+
<div className="alert-incorrect">!</div>
217+
<div>
218+
<Katex tex={'50 \\leq n \\leq 500'}
219+
className="katex-inline" />
220+
</div>
221+
</div>
222+
</>)}
225223
</div>
226-
{isNInvalid && (
227-
<div className="text-danger mt-2">
228-
For practical purposes n is between 50 and 500
229-
</div>
230-
)}
231224
{plotType === '2d' && (
232225
<div className="mt-4">
233226
<label htmlFor="correlation"
234-
className="h2 form-label">
235-
Estimated <Katex tex={'\\text{corr}(x,y)'}
227+
className="h2 form-label">Correlation
228+
coefficient <Katex
229+
tex={'\\text{corr}(x,y)'}
236230
className="katex-inline" />:
237231
</label>
238232
<div className="slider-range__box">
@@ -249,32 +243,27 @@ export const SimulationOne = () => {
249243
handleYcorrelationChange} />
250244
<div className="scale-value">
251245
{slope !== null && (
252-
<Katex tex={
253-
`${
254-
appRvalue.toFixed(3)
255-
}`} />
246+
<div className="hi-val">
247+
<Katex tex={`${
248+
appRvalue.toFixed(
249+
3)}`}
250+
/>
251+
</div>
256252
)}
257253
</div>
258254
</div>
259255
<div className="slider-range__scale">
260256
<div className="unit"></div>
261257
<div className="unit"></div>
262-
<div className="unit"></div>
263-
<div className="unit"></div>
264-
<div className="unit"></div>
265-
<div className="unit"></div>
266-
<div className="unit"></div>
267-
<div className="unit"></div>
268-
<div className="unit"></div>
269258
</div>
270259
</div>
271260
</div>
272261
)}
273262
{plotType === '3d' && (
274263
<div className="mt-4">
275264
<label htmlFor="correlation"
276-
className="h2 form-label">
277-
Estimated <Katex
265+
className="h2 form-label">Correlation
266+
coefficient <Katex
278267
tex={'\\text{corr}(x_1,x_2)'}
279268
className="katex-inline" />:
280269
</label>
@@ -293,59 +282,22 @@ export const SimulationOne = () => {
293282
handleXcorrelationChange} />
294283
<div className="scale-value">
295284
{slopes.length > 0 && (
296-
<Katex tex={`${
297-
appRvalue3d.toFixed(3)}`
298-
} />
285+
<div className="hi-val">
286+
<Katex tex={
287+
`${appRvalue3d
288+
.toFixed(3)
289+
}`} />
290+
</div>
299291
)}
300292
</div>
301293
</div>
302294
<div className="slider-range__scale">
303295
<div className="unit"></div>
304296
<div className="unit"></div>
305-
<div className="unit"></div>
306-
<div className="unit"></div>
307-
<div className="unit"></div>
308-
<div className="unit"></div>
309-
<div className="unit"></div>
310-
<div className="unit"></div>
311-
<div className="unit"></div>
312297
</div>
313298
</div>
314299
</div>
315300
)}
316-
{slopes.length > 0 && plotType === '3d' && (
317-
<>
318-
<div className="mt-5 h2">
319-
Calculated <Katex
320-
tex={'\\text{corr}(x_1,x_2)'}
321-
className="katex-inline" />:
322-
<div
323-
className="hi-val ms-2">
324-
<Katex
325-
tex={
326-
`${appRvalue3d.toFixed(3)}`
327-
}
328-
className="katex-inline" />
329-
</div>
330-
</div>
331-
</>
332-
)}
333-
{slope !== null && (
334-
<>
335-
<div className="mt-5 h2">
336-
Calculated
337-
<Katex
338-
tex={'\\text{corr}(x,y)'}
339-
className="katex-inline" />:
340-
<div
341-
className="hi-val ms-2">
342-
<Katex
343-
tex={`${appRvalue.toFixed(3)}`}
344-
className="katex-inline" />
345-
</div>
346-
</div>
347-
</>
348-
)}
349301
</div>
350302
</div>
351303
</div> {/* div class=simulation__step-container */}

‎media/scss/_forms.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
.short-input {
22
width: 6rem;
3+
}
4+
5+
.extra-short-input {
6+
width: 5rem;
37
}

‎media/scss/_listset.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,8 @@
163163
align-self: center;
164164
}
165165

166-
.answer-incorrect-container {
166+
.answer-incorrect-container,
167+
.alert-incorrect-container {
167168
display: flex;
168169
flex-direction: row;
169170
align-items: center;
@@ -175,7 +176,12 @@
175176
font-size: 0.875rem;
176177
}
177178

178-
.answer-incorrect {
179+
.alert-incorrect-container {
180+
font-size: 0.875rem !important;
181+
}
182+
183+
.answer-incorrect,
184+
.alert-incorrect {
179185
display: inline-block;
180186
margin-right: 0.5rem;
181187
width: 1.25rem;
@@ -187,11 +193,12 @@
187193
font-family: "Gentium Plus", serif;
188194
font-weight: 700;
189195
line-height: 1.25rem;
190-
font-size: 2rem;
196+
font-size: 2rem !important;
191197
text-align: center;
192198
align-self: center;
193199
}
194200

201+
195202
.hypothesis-completed .status-complete {
196203
display: inline-block !important;
197204
}

‎media/scss/_rangescale.scss‎

Lines changed: 3 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
.slider-range__input {
22
display: flex;
33
width: 100%;
4-
margin-bottom: 0.5rem;
54
.form-range {
6-
width: calc(100% - 4rem);
5+
width: 22rem;
76
}
87
.scale-value {
9-
width: 3rem;
8+
width: 6rem;
109
padding-left: 1rem;
1110
text-align: left;
1211
}
@@ -23,7 +22,7 @@
2322
border-right: 0.0625rem solid $gray-md-600;
2423
border-collapse: separate;
2524
height: 0.25rem;
26-
width: calc(100%/8 - 0.6125rem);
25+
width: calc(22rem - 0.875rem);
2726
}
2827
& .unit:nth-child(1) {
2928
border-right: 0;
@@ -38,35 +37,6 @@
3837
}
3938
& .unit:nth-child(2) {
4039
border-right: 0;
41-
}
42-
& .unit:nth-child(3) {
43-
border-right: 0;
44-
}
45-
& .unit:nth-child(4) {
46-
border-right: 0;
47-
}
48-
& .unit:nth-child(5) {
49-
border-right: 0;
50-
height: 0.5rem;
51-
&::after {
52-
content: "0";
53-
position: absolute;
54-
bottom: -1.25rem;
55-
font: 0.75rem/1 sans-serif;
56-
margin-left: -0.25rem;
57-
}
58-
}
59-
& .unit:nth-child(6) {
60-
border-right: 0;
61-
}
62-
& .unit:nth-child(7) {
63-
border-right: 0;
64-
}
65-
& .unit:nth-child(8) {
66-
border-right: 0;
67-
}
68-
& .unit:nth-child(9) {
69-
border-right: 0;
7040
height: 0.5rem;
7141
width: 4rem;
7242
&::after {

‎media/scss/_simulation.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,3 +203,14 @@
203203
}
204204
}
205205

206+
.icon-exclamation {
207+
width: 1.5rem;
208+
height: 1.5rem;
209+
line-height: 1.5rem;
210+
border-radius: 50%;
211+
background-color: $danger;
212+
color: $white;
213+
align-self: center;
214+
text-align: center;
215+
font-weight: bold;
216+
}

0 commit comments

Comments
 (0)