Skip to content

Commit

Permalink
exercise3_tophalf_7
Browse files Browse the repository at this point in the history
  • Loading branch information
@YPandas
YPandas committed Jan 24, 2024
1 parent fc8263c commit 1aaf58a
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 120 deletions.
173 changes: 86 additions & 87 deletions src/pages/Exercise3.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {FC, useState} from 'react';
import { FC, useState } from 'react';
import AppWrapper from '../components/AppWrapper';
import { HeaderSections } from '../types/globalTypes';
import '../styles/Exercise3.scss';
Expand All @@ -8,92 +8,91 @@ import Grid from '../components/Grid';
import HintBox from '../components/HintBox';
import NavButtons from '../components/NavButtons';


const Exercise3: FC = () => {
const [confetti, setConfetti] = useState(false);
const nums = Array.from({length: 24}, (_, index)=>index+1);
const itemSpace = [1, 3, 1, 3, 2, 4, 2, 1, 1, 2, 1, 2, 1];
const selectedValue = '';
return(
<>
<AppWrapper section={HeaderSections.EXERCISE_3}>
<div className="page-wrapper">
<h1>Exercise 3</h1>
<p>
For this exercise, you will be helping Pipi
find the basketball that was stored in the
last lesson and replacing it with a soccer ball.
</p>
<h2>Instructions</h2>
<p>
Take PiPi to{' '}
<span className="highlight">Box I</span>
{' '}by clicking on the correct address.
</p>
<HintBox text=""/>
<div className="wrap">
<div className="Exercise-box">
<Grid
addressNums={nums}
itemSpaceArray={itemSpace}
size={40}
handleCorrect={setConfetti}
>
<div></div>
<Box letter="j" num={3} conf={false}></Box>
<div></div>
<Box letter="k" num={3} conf={false}></Box>
<div></div>
<Box letter="l" num={4} conf={confetti}></Box>
<div></div>
<Box letter="m" num={1} conf={false}></Box>
<div></div>
<Box letter="n" num={2} conf={false}></Box>
<div></div>
<Box letter="o" num={3} conf={false}></Box>
</Grid>
</div>
<img
className="pipi"
src={Pipi}
alt="Pipi"
style={{
position: 'absolute',
top: '620px', // Adjust as needed
left: '165px', // Adjust as needed
height: '150px', // Set desired height
width: 'auto', // Maintain aspect ratio
zIndex: 2
}}
/>
</div>
<h3>
Pipi now wants to replace the basketball with a soccer ball.
What is the corresponding code to do this?
</h3>
<div className="frame">
<p className='text1'>
SoccerBall soccerBall; // ignore the type difference here
</p>
<select
id="sampleDropdown"
className="button"
value={selectedValue}
//onChange={handleChange}
>
<option value="" disabled selected>Select</option>
<option value="option2">*basketballPtr = soccerBall;</option>
<option value="option3">basketballPtr = soccerBall;</option>
<option value="option4">basketballPtr = &soccerBall;</option>
<option value="option5">&basketballPtr = soccerBall;</option>
</select>
</div>
<div className='padding'></div>
</div>
</AppWrapper>
<NavButtons page={15}></NavButtons>
</>
);
const [confetti, setConfetti] = useState(false);
const nums = Array.from({ length: 24 }, (_, index) => index + 1);
const itemSpace = [1, 3, 1, 3, 2, 4, 2, 1, 1, 2, 1, 2, 1];
const selectedValue = '';
return (
<>
<AppWrapper section={HeaderSections.EXERCISE_3}>
<div className="page-wrapper">
<h1>Exercise 3</h1>
<p>
For this exercise, you will be helping Pipi find the basketball that
was stored in the last lesson and replacing it with a soccer ball.
</p>
<h2>Instructions</h2>
<p>
Take PiPi to <span className="highlight">Box I</span> by clicking on
the correct address.
</p>
<HintBox text="" />
<div className="wrap">
<div className="Exercise-box">
<Grid
addressNums={nums}
itemSpaceArray={itemSpace}
size={40}
handleCorrect={setConfetti}
>
<div></div>
<Box letter="j" num={3} conf={false}></Box>
<div></div>
<Box letter="k" num={3} conf={false}></Box>
<div></div>
<Box letter="l" num={4} conf={confetti}></Box>
<div></div>
<Box letter="m" num={1} conf={false}></Box>
<div></div>
<Box letter="n" num={2} conf={false}></Box>
<div></div>
<Box letter="o" num={3} conf={false}></Box>
</Grid>
</div>
<img
className="pipi"
src={Pipi}
alt="Pipi"
style={{
position: 'absolute',
top: '620px', // Adjust as needed
left: '165px', // Adjust as needed
height: '150px', // Set desired height
width: 'auto', // Maintain aspect ratio
zIndex: 2,
}}
/>
</div>
<h3>
Pipi now wants to replace the basketball with a soccer ball. What is
the corresponding code to do this?
</h3>
<div className="frame">
<p className="text1">
SoccerBall soccerBall; // ignore the type difference here
</p>
<select
id="sampleDropdown"
className="button"
value={selectedValue}
//onChange={handleChange}
>
<option value="" disabled selected>
Select
</option>
<option value="option2">*basketballPtr = soccerBall;</option>
<option value="option3">basketballPtr = soccerBall;</option>
<option value="option4">basketballPtr = &soccerBall;</option>
<option value="option5">&basketballPtr = soccerBall;</option>
</select>
</div>
<div className="padding"></div>
</div>
</AppWrapper>
<NavButtons page={15}></NavButtons>
</>
);
};

export default Exercise3;
export default Exercise3;
71 changes: 38 additions & 33 deletions src/styles/Exercise3.scss
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,50 @@
.wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-bottom: 2.5em;
margin-top: 2.5em;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-bottom: 2.5em;
margin-top: 2.5em;
}

.pipi{
position: absolute;
margin-top: -100px;
}

.frame {
background: #8596BE26;
border-radius: 5px;
height: 359px;
left: 161px;
position: absolute; /* This is crucial for top to work */
top: 900px; /* Adjust this value to move the frame */
width: 1118px;
z-index: 1;
background: #8596be26;
border-radius: 5px;
height: 359px;
left: 161px;
position: absolute; /* This is crucial for top to work */
top: 900px; /* Adjust this value to move the frame */
width: 1118px;
z-index: 1;
}

.text1{
height: 29px;
margin-left: 50px;
margin-top: 50px;
width: 1021px;
.text1 {
height: 29px;
margin-left: 50px;
margin-top: 50px;
width: 1021px;
}

.padding{
height: 10px;
margin-top: 400px;
z-index: 1;
.padding {
height: 10px;
margin-top: 400px;
z-index: 1;
}

.button {
background: #EEE;
border: 2px solid #A0A3A3;
border-radius: 4px;
color: #14396A;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 22px;
height: 40px;
margin-left: 50px;
padding: 2px 40px;
text-align: left;
width: 501px;
background: #eee;
border: 2px solid #a0a3a3;
border-radius: 4px;
color: #14396a;
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 22px;
height: 40px;
margin-left: 50px;
padding: 2px 40px;
text-align: left;
width: 501px;
}

0 comments on commit 1aaf58a

Please sign in to comment.