-
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.
* initial page and route * page * release button * fix: duplicate ids * fix spacing * add initial page and route * add images * initial * add remaining components * levels * fix levels * merge from dev * new cfl package * new cfl package * python den updates * new cfl package * fix cards * feedback
- Loading branch information
Showing
20 changed files
with
465 additions
and
124 deletions.
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
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
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
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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
|---|---|---|
|
|
@@ -2,7 +2,6 @@ import * as page from "codeforlife/components/page" | |
| import { ChevronRightRounded as ChevronRightRoundedIcon } from "@mui/icons-material" | ||
| import { type FC } from "react" | ||
| import { Unstable_Grid2 as Grid } from "@mui/material" | ||
| import { useNavigate } from "react-router-dom" | ||
|
|
||
| import Card from "../../components/Card" | ||
| import ClubsImg from "../../images/clubs.png" | ||
|
|
@@ -13,72 +12,65 @@ import { paths } from "../../routes" | |
|
|
||
| export interface GetInvolvedProps {} | ||
|
|
||
| const GetInvolved: FC<GetInvolvedProps> = () => { | ||
| const navigate = useNavigate() | ||
|
|
||
| return ( | ||
| <page.Page> | ||
| <page.Banner | ||
| header="Get involved" | ||
| subheader="How you can get involved with the creation of Code for Life products and resources" | ||
| imageProps={{ | ||
| title: "Adult teaching two children", | ||
| alt: "Adult teaching two children", | ||
| src: GetInvolvedHero, | ||
| }} | ||
| /> | ||
| <page.Section> | ||
| <Grid container spacing={4}> | ||
| <Grid xs={12} md={6} lg={4}> | ||
| <Card | ||
| title="Starting a coding club of your own" | ||
| description="Become a Code for Life ambassador by starting up a coding club. Find out more about how you can get involved with this by visiting our coding club page." | ||
| mediaProps={{ | ||
| title: "Student showing their work to teacher", | ||
| image: ClubsImg, | ||
| }} | ||
| buttonProps={{ | ||
| onClick: () => { | ||
| navigate(paths.codingClubs._) | ||
| }, | ||
| children: "Read more", | ||
| endIcon: <ChevronRightRoundedIcon />, | ||
| }} | ||
| /> | ||
| </Grid> | ||
| <Grid xs={12} md={6} lg={4}> | ||
| <Card | ||
| title="Contribute through code" | ||
| description="We welcome volunteers from all backgrounds to help us with our coding adventure. Take a look at our contribution guide to find out how to get involved in our open source projects." | ||
| mediaProps={{ title: "Github repository page", image: GithubImg }} | ||
| buttonProps={{ | ||
| onClick: () => { | ||
| navigate(paths.contribute._) | ||
| }, | ||
| children: "Read more", | ||
| endIcon: <ChevronRightRoundedIcon />, | ||
| }} | ||
| /> | ||
| </Grid> | ||
| <Grid xs={12} md={6} lg={4}> | ||
| <Card | ||
| title="University partnerships" | ||
| description="Please get in touch at [email protected] if you are interested in working on Code for Life projects with your students including coding, user experience, data analytics and new feature design." | ||
| mediaProps={{ | ||
| title: "Three students looking at laptops", | ||
| image: UniversitiesImg, | ||
| }} | ||
| buttonProps={{ | ||
| href: "mailto:[email protected]", | ||
| children: "Get in touch", | ||
| endIcon: <ChevronRightRoundedIcon />, | ||
| }} | ||
| /> | ||
| </Grid> | ||
| const GetInvolved: FC<GetInvolvedProps> = () => ( | ||
| <page.Page> | ||
| <page.Banner | ||
| header="Get involved" | ||
| subheader="How you can get involved with the creation of Code for Life products and resources" | ||
| imageProps={{ | ||
| title: "Adult teaching two children", | ||
| alt: "Adult teaching two children", | ||
| src: GetInvolvedHero, | ||
| }} | ||
| /> | ||
| <page.Section> | ||
| <Grid container spacing={4}> | ||
| <Grid xs={12} md={6} lg={4}> | ||
| <Card | ||
| title="Starting a coding club of your own" | ||
| description="Become a Code for Life ambassador by starting up a coding club. Find out more about how you can get involved with this by visiting our coding club page." | ||
| mediaProps={{ | ||
| title: "Student showing their work to teacher", | ||
| image: ClubsImg, | ||
| }} | ||
| linkButtonProps={{ | ||
| to: paths.codingClubs._, | ||
| children: "Read more", | ||
| endIcon: <ChevronRightRoundedIcon />, | ||
| }} | ||
| /> | ||
| </Grid> | ||
| <Grid xs={12} md={6} lg={4}> | ||
| <Card | ||
| title="Contribute through code" | ||
| description="We welcome volunteers from all backgrounds to help us with our coding adventure. Take a look at our contribution guide to find out how to get involved in our open source projects." | ||
| mediaProps={{ title: "Github repository page", image: GithubImg }} | ||
| linkButtonProps={{ | ||
| to: paths.contribute._, | ||
| children: "Read more", | ||
| endIcon: <ChevronRightRoundedIcon />, | ||
| }} | ||
| /> | ||
| </Grid> | ||
| <Grid xs={12} md={6} lg={4}> | ||
| <Card | ||
| title="University partnerships" | ||
| description="Please get in touch at [email protected] if you are interested in working on Code for Life projects with your students including coding, user experience, data analytics and new feature design." | ||
| mediaProps={{ | ||
| title: "Three students looking at laptops", | ||
| image: UniversitiesImg, | ||
| }} | ||
| linkButtonProps={{ | ||
| to: "mailto:[email protected]", | ||
| target: "_blank", | ||
| children: "Get in touch", | ||
| endIcon: <ChevronRightRoundedIcon />, | ||
| }} | ||
| /> | ||
| </Grid> | ||
| </page.Section> | ||
| </page.Page> | ||
| ) | ||
| } | ||
| </Grid> | ||
| </page.Section> | ||
| </page.Page> | ||
| ) | ||
|
|
||
| export default GetInvolved | ||
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,57 @@ | ||
| import { Unstable_Grid2 as Grid, Typography } from "@mui/material" | ||
| import { type FC } from "react" | ||
| import { LinkButton } from "codeforlife/components/router" | ||
| import { ScrollIntoViewLink } from "codeforlife/components" | ||
|
|
||
| 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. The pupils can then progress to | ||
| Python Den to continue to build up their skills. | ||
| </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{" "} | ||
| <ScrollIntoViewLink | ||
| elementId="register-to-newsletter-form" | ||
| options={{ behavior: "smooth" }} | ||
| > | ||
| sign up to our updates | ||
| </ScrollIntoViewLink> | ||
| . | ||
| </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,60 @@ | ||
| import { type FC } from "react" | ||
|
|
||
| import { LINK_HOME_LEARNING_ADVANCED } from "../../app/env" | ||
| import Levels from "./Levels" | ||
| import { Link } from "codeforlife/components/router" | ||
| import RRAdvancedImage from "../../images/rr_advanced.png" | ||
| import { paths } from "../../routes" | ||
|
|
||
| export interface AdvancedProps {} | ||
|
|
||
| const Advanced: FC<AdvancedProps> = () => ( | ||
| <Levels | ||
| banner={{ | ||
| difficulty: "Advanced", | ||
| color: "White", | ||
| bgcolor: "teacher.main", | ||
| }} | ||
| cardProps={{ | ||
| mediaProps: { title: "RR advanced image", image: RRAdvancedImage }, | ||
| title: "Advanced", | ||
| description: | ||
| "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.", | ||
| linkButtonProps: { to: LINK_HOME_LEARNING_ADVANCED }, | ||
| }} | ||
| text={{ | ||
| levels: "29-67", | ||
| 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: [5], | ||
| body: "Learn more about if...else through traffic lights. In the Traffic Lights levels in Rapid Router, traffic light is a variable that either contains red or green.", | ||
| }, | ||
| { | ||
| 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{" "} | ||
| <Link to={paths.pythonDen._}>Python Den</Link>. | ||
| </> | ||
| ), | ||
| }, | ||
| ], | ||
| }} | ||
| /> | ||
| ) | ||
|
|
||
| export default Advanced |
Oops, something went wrong.