-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
307 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { Unstable_Grid2 as Grid, Typography } from "@mui/material" | ||
import { type FC } from "react" | ||
import { LinkButton } from "codeforlife/components/router" | ||
|
||
import { paths } from "../../routes" | ||
|
||
export interface AboutRRProps {} | ||
|
||
const AboutRR: FC<AboutRRProps> = () => ( | ||
<Grid container columnSpacing={4}> | ||
<Grid xs={12}> | ||
<Typography variant="h4" textAlign="center"> | ||
About Rapid Router | ||
</Typography> | ||
</Grid> | ||
<Grid xs={12} md={6}> | ||
<Typography> | ||
Rapid Router is our shopping delivery game that teaches children aged | ||
5-14 to learn how to code using Blockly and Python. | ||
</Typography> | ||
<Typography> | ||
The game and lessons support the English National Curriculum Computing | ||
strand, and Teachers across the world love them. | ||
</Typography> | ||
<Typography> | ||
Now, we've made lessons available for parents and caregivers to | ||
teach at home, so we can #KeepKidsCoding. They're free and easy, | ||
but most of all, they're fun! | ||
</Typography> | ||
</Grid> | ||
<Grid xs={12} md={6}> | ||
<Typography> | ||
Read our learning guide and start at Level 1, unless your child has | ||
played before. To start playing, you need to first register as an | ||
independent student. This will ensure that the level progress is saved. | ||
</Typography> | ||
<Typography> | ||
If you would like to keep updated on our products and receive emails | ||
about Code for Life, please sign up to our updates. | ||
</Typography> | ||
</Grid> | ||
<Grid xs={12} className="flex-end-x"> | ||
<LinkButton to={paths.register._}>Register now</LinkButton> | ||
</Grid> | ||
</Grid> | ||
) | ||
|
||
export default AboutRR |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { type FC } from "react" | ||
|
||
import Level from "./Level" | ||
import RRAdvancedImage from "../../images/rr_advanced.png" | ||
|
||
export interface AdvancedProps {} | ||
|
||
const Advanced: FC<AdvancedProps> = () => ( | ||
<Level | ||
banner={{ | ||
difficulty: "Advanced", | ||
color: "White", | ||
bgcolor: theme.palette.primary.main, | ||
}} | ||
cardProps={{ | ||
mediaProps: { title: "RR advanced image", image: RRAdvancedImage }, | ||
text: { | ||
Check failure on line 17 in src/pages/homeLearning/Advanced.tsx GitHub Actions / main / test / test-js-code
|
||
title: "Advanced", | ||
content: | ||
"Let's get advanced! Learn about repeat loops and selection, variables, and how to create efficient code. Designed for children aged 12-14, but open to all.", | ||
}, | ||
buttonProps: { | ||
href: process.env.REACT_APP_INDEPENDENT_ADVANCED_HREF as string, | ||
}, | ||
}} | ||
text={{ | ||
levels: "29-109", | ||
sessions: [ | ||
{ | ||
ids: [1], | ||
body: "Recap earlier levels before looking at repeat loops. Encourage your child to plan ahead on the printable worksheet before writing more complex programs. If they're unsure about using loops, ask them to write the code without loops and then look for repeating patterns.", | ||
}, | ||
{ | ||
ids: [2], | ||
body: "A video and printable resources support this lesson, which builds your child's understanding of loops with a new loop, repeat-until.", | ||
}, | ||
{ | ||
ids: [3, 4], | ||
body: "Extra tasks for children who want a challenge! Watch the if...do video to learn about selection statements. Ask your child to explain how their finished program works!", | ||
}, | ||
{ | ||
ids: "Extended", | ||
body: "Build on everything learned so far with traffic lights, limited blocks, procedures and brain teasers. Older children might even like to start learning to program using the Python language using levels 80 onwards.", | ||
}, | ||
], | ||
}} | ||
/> | ||
) | ||
|
||
export default Advanced |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { type FC } from "react" | ||
|
||
import Level from "./Level" | ||
import RRBeginnerImage from "../../images/rr_beginner.png" | ||
|
||
export interface BeginnerProps {} | ||
|
||
const Beginner: FC<BeginnerProps> = () => ( | ||
<Level | ||
banner={{ | ||
difficulty: "Beginner", | ||
color: "White", | ||
bgcolor: theme.palette.tertiary.main, | ||
}} | ||
cardProps={{ | ||
mediaProps: { title: "RR beginner image", image: RRBeginnerImage }, | ||
text: { | ||
Check failure on line 17 in src/pages/homeLearning/Beginner.tsx GitHub Actions / main / test / test-js-code
|
||
title: "Beginner", | ||
content: | ||
"Teach your child about problem-solving and logical reasoning as they play. They'll explore algorithms, and learn how to create and debug simple programs. Designed for children aged 5-7, but start here if you've never played Rapid Router.", | ||
}, | ||
buttonProps: { | ||
href: process.env.REACT_APP_INDEPENDENT_BEGINNER_HREF as string, | ||
}, | ||
}} | ||
text={{ | ||
levels: "1-16", | ||
sessions: [ | ||
{ | ||
ids: [1], | ||
body: "Print off the worksheets, and cut them out to play offline. This helps children see that they need to give the computer clear instructions so it can understand how to move the van.", | ||
}, | ||
{ | ||
ids: [2], | ||
body: "Explore Rapid Router online and learn how to play. Print the left-right van on page 6, to help avoid any confusion between left and right. Once a child has understood the basics, they can work on levels 1 to 5.", | ||
}, | ||
{ | ||
ids: [3], | ||
body: "Plan longer routes with more turns to learn how to create more complex algorithms. The direct drive buttons make things a little easier for younger children, or those with learning difficulties while they build confidence.", | ||
}, | ||
{ | ||
ids: [4, 5], | ||
body: "Print off worksheets focusing on efficient routes and planning using levels 13 and 14. Levels 15-16 include routes where there is more than one delivery to make and some complex and tangled routes.", | ||
}, | ||
], | ||
}} | ||
/> | ||
) | ||
|
||
export default Beginner |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,24 @@ | ||
import * as pages from "codeforlife/components/page" | ||
import { type FC } from "react" | ||
|
||
import AboutRR from "./AboutRR" | ||
import HomeLearningHeroImage from "../../images/home_learning_hero_hexagon.png" | ||
|
||
export interface HomeLearningProps {} | ||
|
||
const HomeLearning: FC<HomeLearningProps> = () => { | ||
return <></> | ||
return ( | ||
<pages.Page> | ||
<pages.Banner | ||
imageProps={{ alt: "homeLearningHero", src: HomeLearningHeroImage }} | ||
header="Home learning" | ||
subheader="Whether you're a parent, a caregiver, or a curious student — our Rapid Router game is easy to use and free - forever." | ||
/> | ||
<pages.Section> | ||
<AboutRR /> | ||
</pages.Section> | ||
</pages.Page> | ||
) | ||
} | ||
|
||
export default HomeLearning |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import { type FC } from "react" | ||
|
||
import Level from "./Level" | ||
import RRIntermediateImage from "../../images/rr_intermediate.png" | ||
|
||
export interface IntermediateProps {} | ||
|
||
const Intermediate: FC<IntermediateProps> = () => ( | ||
<Level | ||
direction="row-reverse" | ||
banner={{ | ||
difficulty: "Intermediate", | ||
color: "Black", | ||
bgcolor: theme.palette.secondary.main, | ||
}} | ||
cardProps={{ | ||
mediaProps: { | ||
title: "RR intermediate image", | ||
image: RRIntermediateImage, | ||
}, | ||
text: { | ||
Check failure on line 21 in src/pages/homeLearning/Intermediate.tsx GitHub Actions / main / test / test-js-code
|
||
title: "Intermediate", | ||
content: | ||
"Children confident with coding can move up to the next challenge — more complex maps and new programming constructs. Designed for children aged 8-11, but anyone can progress here if ready.", | ||
}, | ||
buttonProps: { | ||
href: process.env.REACT_APP_INDEPENDENT_INTERMEDIATE_HREF as string, | ||
}, | ||
}} | ||
text={{ | ||
levels: "17-28", | ||
sessions: [ | ||
{ | ||
ids: [1], | ||
body: "Start delivering shopping to lots of different places. It can be easier to plan routes on the paper worksheets before trying on a computer.", | ||
}, | ||
{ | ||
ids: [2], | ||
body: "Print out the three lesson worksheets. Then, watch the video together to learn about repeat loops. Encourage your child to look for patterns in their code. If they spot a repeated pattern, they can use a repeat loop to make it shorter. Talk about repeated patterns away from the world of computers with poems and exercises.", | ||
}, | ||
{ | ||
ids: [3], | ||
body: "Get stuck in with more complex loops - even loops inside loops! The printable worksheets help your child plan their code before trying it in Rapid Router. Printable left-right vans can help overcome any confusions between left and right.", | ||
}, | ||
{ | ||
ids: [4, 5], | ||
body: "Guide your child through creating their own routes in Rapid Router. Perhaps you can join in and try each other's routes?", | ||
}, | ||
], | ||
}} | ||
/> | ||
) | ||
|
||
export default Intermediate |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
import * as pages from "codeforlife/components/page" | ||
import { | ||
Box, | ||
Unstable_Grid2 as Grid, | ||
type Grid2Props, | ||
Typography, | ||
} from "@mui/material" | ||
import { type FC } from "react" | ||
import { OpenInNew as OpenInNewIcon } from "@mui/icons-material" | ||
|
||
import { Card, type CardProps } from "../../components" | ||
|
||
export interface LevelProps extends Pick<Grid2Props, "direction"> { | ||
banner: { | ||
difficulty: string | ||
color: string | ||
bgcolor: string | ||
} | ||
cardProps: Omit<CardProps, "buttonProps"> & { | ||
buttonProps: { | ||
href: NonNullable<CardProps["buttonProps"]["href"]> | ||
} | ||
} | ||
text: { | ||
levels: string | ||
sessions: Array<{ | ||
ids: number[] | string | ||
body: string | ||
}> | ||
} | ||
} | ||
|
||
const Level: FC<LevelProps> = ({ direction, banner, cardProps, text }) => { | ||
return ( | ||
<> | ||
<pages.Section | ||
sx={{ paddingY: theme => theme.spacing(2) }} | ||
boxProps={{ bgcolor: banner.bgcolor }} | ||
> | ||
<Typography variant="h4" color={banner.color} mb={0}> | ||
< {banner.difficulty} > | ||
</Typography> | ||
</pages.Section> | ||
<pages.Section> | ||
<Grid | ||
container | ||
rowSpacing={{ xs: 2, md: 0 }} | ||
columnSpacing={{ xs: 0, md: 4 }} | ||
direction={direction} | ||
> | ||
<Grid xs={12} md={4}> | ||
<Card | ||
{...cardProps} | ||
style={{ | ||
...cardProps.style, | ||
minHeight: "auto", | ||
}} | ||
buttonProps={{ | ||
children: "Go to lessons", | ||
endIcon: <OpenInNewIcon />, | ||
target: "_blank", | ||
...cardProps.buttonProps, | ||
}} | ||
/> | ||
</Grid> | ||
<Grid xs={12} md={8}> | ||
<Typography variant="h5">Levels {text.levels}</Typography> | ||
{text.sessions.map((session, index) => ( | ||
<Box key={`session-${index}`}> | ||
<Typography variant="h6"> | ||
{typeof session.ids === "string" | ||
? session.ids | ||
: "Session " + session.ids.join(" & ")} | ||
</Typography> | ||
<Typography | ||
mb={index === text.sessions.length - 1 ? 0 : undefined} | ||
> | ||
{session.body} | ||
</Typography> | ||
</Box> | ||
))} | ||
</Grid> | ||
</Grid> | ||
</pages.Section> | ||
</> | ||
) | ||
} | ||
|
||
export default Level |