Skip to content

Commit

Permalink
initial
Browse files Browse the repository at this point in the history
  • Loading branch information
SKairinos committed Oct 2, 2024
1 parent 25a2bbf commit f779093
Show file tree
Hide file tree
Showing 6 changed files with 307 additions and 1 deletion.
48 changes: 48 additions & 0 deletions src/pages/homeLearning/AboutRR.tsx
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&apos;ve made lessons available for parents and caregivers to
teach at home, so we can #KeepKidsCoding. They&apos;re free and easy,
but most of all, they&apos;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
50 changes: 50 additions & 0 deletions src/pages/homeLearning/Advanced.tsx
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,

Check failure on line 13 in src/pages/homeLearning/Advanced.tsx

View workflow job for this annotation

GitHub Actions / main / test / test-js-code

Cannot find name 'theme'.
}}
cardProps={{
mediaProps: { title: "RR advanced image", image: RRAdvancedImage },
text: {

Check failure on line 17 in src/pages/homeLearning/Advanced.tsx

View workflow job for this annotation

GitHub Actions / main / test / test-js-code

Object literal may only specify known properties, and 'text' does not exist in type 'Omit<CardProps, "buttonProps"> & { buttonProps: { href: string; }; }'.
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
50 changes: 50 additions & 0 deletions src/pages/homeLearning/Beginner.tsx
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,

Check failure on line 13 in src/pages/homeLearning/Beginner.tsx

View workflow job for this annotation

GitHub Actions / main / test / test-js-code

Cannot find name 'theme'.
}}
cardProps={{
mediaProps: { title: "RR beginner image", image: RRBeginnerImage },
text: {

Check failure on line 17 in src/pages/homeLearning/Beginner.tsx

View workflow job for this annotation

GitHub Actions / main / test / test-js-code

Object literal may only specify known properties, and 'text' does not exist in type 'Omit<CardProps, "buttonProps"> & { buttonProps: { href: string; }; }'.
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
17 changes: 16 additions & 1 deletion src/pages/homeLearning/HomeLearning.tsx
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
54 changes: 54 additions & 0 deletions src/pages/homeLearning/Intermediate.tsx
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,

Check failure on line 14 in src/pages/homeLearning/Intermediate.tsx

View workflow job for this annotation

GitHub Actions / main / test / test-js-code

Cannot find name 'theme'.
}}
cardProps={{
mediaProps: {
title: "RR intermediate image",
image: RRIntermediateImage,
},
text: {

Check failure on line 21 in src/pages/homeLearning/Intermediate.tsx

View workflow job for this annotation

GitHub Actions / main / test / test-js-code

Object literal may only specify known properties, and 'text' does not exist in type 'Omit<CardProps, "buttonProps"> & { buttonProps: { href: string; }; }'.
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
89 changes: 89 additions & 0 deletions src/pages/homeLearning/Level.tsx
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}>
&lt; {banner.difficulty} &gt;
</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

0 comments on commit f779093

Please sign in to comment.