diff --git a/package.json b/package.json index 95f3814e..0b5ee681 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "babel-core": "^6.26.0", "babel-eslint": "^7.2.3", "babel-loader": "^7.1.1", + "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "classnames": "2.2.5", @@ -42,6 +43,7 @@ "html-loader": "^0.5.1", "html-webpack-plugin": "2.30.1", "json-loader": "^0.5.7", + "lodash.debounce": "4.0.8", "lodash.defaults": "4.2.0", "node-sass": "^4.5.3", "postcss-loader": "^2.0.6", @@ -52,6 +54,7 @@ "react-router-prop-types": "0.0.1", "react-slick": "0.15.4", "react-twitter-widgets": "1.5.1", + "rrc": "0.10.1", "sass-lint": "^1.11.1", "sass-loader": "^6.0.6", "slick-carousel": "1.7.1", diff --git a/src/components/scrollmanager/scrollmanager.jsx b/src/components/scrollmanager/scrollmanager.jsx new file mode 100644 index 00000000..8a6deebb --- /dev/null +++ b/src/components/scrollmanager/scrollmanager.jsx @@ -0,0 +1,151 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {withRouter} from 'react-router-dom'; +import ReactRouterPropTypes from 'react-router-prop-types'; +import debounceFn from 'lodash.debounce'; + +class ScrollManager extends React.Component { + + constructor (props) { + super(props); + + this.scrollSyncData = { + x: 0, + y: 0, + attemptsRemaining: props.scrollSyncAttemptLimit + }; + + const scrollCapture = () => { + requestAnimationFrame(() => { + const {pageXOffset: x, pageYOffset: y} = window; + let {pathname} = this.props.location; + + // router location does not include basename, since this function is setting + // window.location later, pathname needs basename prepended + if (typeof (this.props.basename) === 'string') { + pathname = this.props.basename + pathname; + } + + // use browser history instead of router history to avoid infinite + // history.replace loop + const historyState = window.history.state || {}; + const { + state = {} + } = historyState; + if (!state.scroll || state.scroll.x !== pageXOffset || state.scroll.y !== pageYOffset) { + window.history.replaceState({ + ...historyState, + state: { + ...state, + scroll: {x, y} + } + }, null, pathname); + } + }); + }; + + const _scrollSync = () => { + requestAnimationFrame(() => { + const {x, y, attemptsRemaining} = this.scrollSyncData; + + if (attemptsRemaining < 1) { + return; + } + + const {pageXOffset, pageYOffset} = window; + if (y < window.document.body.scrollHeight && (x !== pageXOffset || y !== pageYOffset)) { + window.scrollTo(x, y); + this.scrollSyncData.attemptsRemaining = attemptsRemaining - 1; + _scrollSync(); + } + }); + }; + + const scrollSync = (x = 0, y = 0) => { + this.scrollSyncData = { + x, + y, + attemptsRemaining: this.props.scrollSyncAttemptLimit + }; + _scrollSync(); + }; + + this.debouncedScroll = debounceFn(scrollCapture, props.scrollCaptureDebounce); + this.debouncedScrollSync = debounceFn(scrollSync, props.scrollSyncDebounce); + } + + componentWillMount () { + const {location, onLocationChange} = this.props; + if (onLocationChange) { + onLocationChange(location); + } + } + + componentDidMount () { + this.onPop(this.props); + window.addEventListener('scroll', this.debouncedScroll, {passive: true}); + } + + componentWillReceiveProps (nextProps) { + switch (nextProps.history.action) { + case 'PUSH': + case 'REPLACE': + this.onPush(nextProps); + break; + case 'POP': + this.onPop(nextProps); + break; + default: + console.warn( // eslint-disable-line no-console + `Unrecognized location change action! "${nextProps.history.action}"` + ); + } + if (nextProps.onLocationChange) { + nextProps.onLocationChange(nextProps.location); + } + } + + componentWillUnmount () { + this.scrollSyncPending = false; + window.removeEventListener('scroll', this.debouncedScroll, {passive: true}); + } + + onPush ({location}) { + if (!location.hash) { + this.debouncedScrollSync(0, 0); + } + } + + onPop ({ + location: { + state = {} + } + }) { + // attempt location restore + const { + x = 0, + y = 0 + } = state.scroll || {}; + this.debouncedScrollSync(x, y); + } + + render () { + return this.props.children; + } +} +ScrollManager.propTypes = { + basename: PropTypes.string, + children: PropTypes.node.isRequired, + history: ReactRouterPropTypes.history.isRequired, + location: ReactRouterPropTypes.location, + onLocationChange: PropTypes.func, + scrollCaptureDebounce: PropTypes.number, + scrollSyncAttemptLimit: PropTypes.number, + scrollSyncDebounce: PropTypes.number +}; +ScrollManager.defaultProps = { + scrollCaptureDebounce: 50, + scrollSyncDebounce: 100, + scrollSyncAttemptLimit: 5 +}; +export default withRouter(ScrollManager); diff --git a/src/components/scrolltotoponmount/scrolltotoponmount.jsx b/src/components/scrolltotoponmount/scrolltotoponmount.jsx deleted file mode 100644 index 78b90ec2..00000000 --- a/src/components/scrolltotoponmount/scrolltotoponmount.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import {withRouter} from 'react-router-dom'; - -class ScrollToTopOnMount extends React.Component { - componentDidMount () { - window.scrollTo(0, 0); - } - - render () { - return null; - } -} -export default withRouter(ScrollToTopOnMount); diff --git a/src/components/sectionitem/section.jsx b/src/components/sectionitem/section.jsx index 08cde11d..046442e5 100644 --- a/src/components/sectionitem/section.jsx +++ b/src/components/sectionitem/section.jsx @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import './sectionitem.scss'; import TxDiv from '../transifex/txdiv.jsx'; -import ScrollToTopOnMount from '../scrolltotoponmount/scrolltotoponmount.jsx'; const Section = ({ children, @@ -18,7 +17,6 @@ const Section = ({ id={id} txContent={txContent} > -
{title}
diff --git a/src/views/teach/assessments.jsx b/src/views/teach/assessments.jsx index 9e3759ec..ac164a40 100644 --- a/src/views/teach/assessments.jsx +++ b/src/views/teach/assessments.jsx @@ -4,14 +4,25 @@ import ReactRouterPropTypes from 'react-router-prop-types'; import AssessmentsHomeSection from './assessments/home.jsx'; import SolveitSection from './assessments/solveit.jsx'; +import AnswerSheetHtml from './assessments/answersheet.jsx'; +import ReverseEngineeringHtml from './assessments/reverseengineering.jsx'; const AssessmentsSection = ({match}) => (
+ +
diff --git a/src/views/teach/assessments/answersheet.jsx b/src/views/teach/assessments/answersheet.jsx new file mode 100644 index 00000000..5aa0341b --- /dev/null +++ b/src/views/teach/assessments/answersheet.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import htmlContent from './student_answer_sheet.html'; + +import '../print.css'; +import '../../../components/sectionitem/sectionitem.scss'; + +const AnswerSheetHtml = () => ( +
// eslint-disable-line react/no-danger +); +export default AnswerSheetHtml; diff --git a/src/views/teach/assessments/home.jsx b/src/views/teach/assessments/home.jsx index 6b928620..9fa60cb9 100644 --- a/src/views/teach/assessments/home.jsx +++ b/src/views/teach/assessments/home.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import StaticLinkSectionItem from '../../../components/sectionitem/staticlinksectionitem.jsx'; import LinkedSectionItem from '../../../components/sectionitem/linkedsectionitem.jsx'; import TxDiv from '../../../components/transifex/txdiv.jsx'; @@ -29,11 +28,11 @@ const AssessmentsHome = () => ( on their understanding of programming concepts. - In this more in-depth assessment, students can build on the @@ -42,8 +41,14 @@ const AssessmentsHome = () => ( able to project videos on a projector. Students view a full-screen ScratchJr project without seeing the code for the characters' programs. They then reconstruct the scripts of the project - using pre-printed blocks, provided at the end of the document... - + using + pre-printed blocks + , provided at the end of the document... + ); export default AssessmentsHome; diff --git a/src/views/teach/assessments/images/answersheet/image001.png b/src/views/teach/assessments/images/answersheet/image001.png new file mode 100755 index 00000000..f424518b Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image001.png differ diff --git a/src/views/teach/assessments/images/answersheet/image002.png b/src/views/teach/assessments/images/answersheet/image002.png new file mode 100755 index 00000000..b3898766 Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image002.png differ diff --git a/src/views/teach/assessments/images/answersheet/image003.png b/src/views/teach/assessments/images/answersheet/image003.png new file mode 100755 index 00000000..0315238b Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image003.png differ diff --git a/src/views/teach/assessments/images/answersheet/image004.png b/src/views/teach/assessments/images/answersheet/image004.png new file mode 100755 index 00000000..b7c3913d Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image004.png differ diff --git a/src/views/teach/assessments/images/answersheet/image005.png b/src/views/teach/assessments/images/answersheet/image005.png new file mode 100755 index 00000000..b9fd9ee1 Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image005.png differ diff --git a/src/views/teach/assessments/images/answersheet/image006.png b/src/views/teach/assessments/images/answersheet/image006.png new file mode 100755 index 00000000..57d4b7e4 Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image006.png differ diff --git a/src/views/teach/assessments/images/answersheet/image007.png b/src/views/teach/assessments/images/answersheet/image007.png new file mode 100755 index 00000000..87f3339e Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image007.png differ diff --git a/src/views/teach/assessments/images/answersheet/image008.png b/src/views/teach/assessments/images/answersheet/image008.png new file mode 100755 index 00000000..c4237c51 Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image008.png differ diff --git a/src/views/teach/assessments/images/answersheet/image009.png b/src/views/teach/assessments/images/answersheet/image009.png new file mode 100755 index 00000000..c4985ddb Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image009.png differ diff --git a/src/views/teach/assessments/images/answersheet/image010.png b/src/views/teach/assessments/images/answersheet/image010.png new file mode 100755 index 00000000..c307dd8e Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image010.png differ diff --git a/src/views/teach/assessments/images/answersheet/image011.png b/src/views/teach/assessments/images/answersheet/image011.png new file mode 100755 index 00000000..dc9a4c60 Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image011.png differ diff --git a/src/views/teach/assessments/images/answersheet/image012.png b/src/views/teach/assessments/images/answersheet/image012.png new file mode 100755 index 00000000..78a049fb Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image012.png differ diff --git a/src/views/teach/assessments/images/answersheet/image013.png b/src/views/teach/assessments/images/answersheet/image013.png new file mode 100755 index 00000000..a59ba8df Binary files /dev/null and b/src/views/teach/assessments/images/answersheet/image013.png differ diff --git a/src/views/teach/assessments/images/reverseengineering/image002.png b/src/views/teach/assessments/images/reverseengineering/image002.png new file mode 100755 index 00000000..064eb010 Binary files /dev/null and b/src/views/teach/assessments/images/reverseengineering/image002.png differ diff --git a/src/views/teach/assessments/images/reverseengineering/image004.png b/src/views/teach/assessments/images/reverseengineering/image004.png new file mode 100755 index 00000000..cbef7857 Binary files /dev/null and b/src/views/teach/assessments/images/reverseengineering/image004.png differ diff --git a/src/views/teach/assessments/images/reverseengineering/image006.png b/src/views/teach/assessments/images/reverseengineering/image006.png new file mode 100755 index 00000000..12e7017c Binary files /dev/null and b/src/views/teach/assessments/images/reverseengineering/image006.png differ diff --git a/src/views/teach/assessments/images/reverseengineering/image008.png b/src/views/teach/assessments/images/reverseengineering/image008.png new file mode 100755 index 00000000..abb21767 Binary files /dev/null and b/src/views/teach/assessments/images/reverseengineering/image008.png differ diff --git a/src/views/teach/assessments/images/reverseengineering/image010.png b/src/views/teach/assessments/images/reverseengineering/image010.png new file mode 100755 index 00000000..f5fdf929 Binary files /dev/null and b/src/views/teach/assessments/images/reverseengineering/image010.png differ diff --git a/src/views/teach/assessments/images/reverseengineering/image012.png b/src/views/teach/assessments/images/reverseengineering/image012.png new file mode 100755 index 00000000..490b5acc Binary files /dev/null and b/src/views/teach/assessments/images/reverseengineering/image012.png differ diff --git a/src/views/teach/assessments/images/reverseengineering/image014.png b/src/views/teach/assessments/images/reverseengineering/image014.png new file mode 100755 index 00000000..173461a7 Binary files /dev/null and b/src/views/teach/assessments/images/reverseengineering/image014.png differ diff --git a/src/views/teach/assessments/images/reverseengineering/image016.png b/src/views/teach/assessments/images/reverseengineering/image016.png new file mode 100755 index 00000000..83edceae Binary files /dev/null and b/src/views/teach/assessments/images/reverseengineering/image016.png differ diff --git a/src/views/teach/assessments/images/reverseengineering/image018.png b/src/views/teach/assessments/images/reverseengineering/image018.png new file mode 100755 index 00000000..fd88b659 Binary files /dev/null and b/src/views/teach/assessments/images/reverseengineering/image018.png differ diff --git a/src/views/teach/assessments/reverse_engineering.html b/src/views/teach/assessments/reverse_engineering.html new file mode 100755 index 00000000..8a978b1d --- /dev/null +++ b/src/views/teach/assessments/reverse_engineering.html @@ -0,0 +1,261 @@ + + +
+ +
+ + +
+
+

+ Assessment: + Reverse Engineering +

+ +
+
+ + +
+ +
+

1 Overview +

+ + +

This guide outlines how to assess students’ understanding and sequencing of the programming blocks in the ScratchJr iPad app. This assessment was originally designed to + evaluate student learning in K‐2 classrooms after finishing the ScratchJr “Animated Genres” curriculum (http://www.scratchjr.org/teach.html#animated-genres), but the + method could be adapted to any ScratchJr curriculum.

+ + +

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

+ + +

2 Setting Up +

+ + +

To conduct this assessment, you will need the following:

+ + +
    +
  • an iPad with ScratchJr installed
  • + + +
  • a projector, preferably with a “blank screen” capability, to display the iPad's screen
  • + + +
  • each “Solve‐It” project pre-programmed on the iPad (see below)
  • + + +
  • an answer sheet for each student
  • + + +
  • stickers with ScratchJr blocks – You will need one page of stickers for each student. Print + the + block sheet + found on the ScratchJr website onto 1” x 4” address labels + (Avery 5161). Then cut the sheet vertically so that every column of stickers is separated from the next column. Do not cut all the way down on the last 3 columns to avoid + cutting the “repeat” block.
  • +
+ + +

Make sure you know how to run and re-run all of the Solve-Its in Presentation Mode (tap the “Presentation Mode” icon; tap the first page on the multi-page + Solve-It to return to the first page.)

+ + +

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

+ + +

3 The Assessment +

+ + +

Students view a ScratchJr project as it runs in “Presentation Mode” (so that they cannot see the blocks), and they re-construct the project's scripts using + stickers with pre-printed ScratchJr blocks.

+ + +

Before beginning the assessment, instruct the students as follows:

+ + +
    +
  1. Write your name clearly at the top of the page.
  2. + + +
  3. We will show you a ScratchJr project, and you will reconstruct its scripts on a piece of paper using stickers that have ScratchJr programming blocks on them.
  4. + + +
  5. You do not need to fill in numbers for the blocks or words for the “Say” block. Just use the sticker as it is, with a blank number or word.
  6. + + +
  7. The time we give for each project will be limited. When we go on to the next project, turn your full attention to it or you will miss it. Do not try to finish up the + previous project.
  8. + + +
  9. All answers should be your own. Do not look at anyone else's paper.
  10. +
+ + +

+

+ + +

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

+ + +

4 Running the Assessment +

+ + +

For each of the seven “Solve-Its” do the following:

+ + +
    +
  1. Announce the number of the “Solve-It” so the students know where on the assessment paper to put their stickers.
  2. + + +
  3. Display the project in “Presentation Mode.” Note: do not display the project on the projector's screen until you have put the project in Presentation Mode so + that the students do not see the blocks that are being used in the project. If you have a projector with a “blank” button, you can blank the screen until you are + ready. Otherwise, block the projector's lens from displaying on the screen or disconnect the iPad from the projector until you have put the project in Presentation Mode.
  4. + + +
  5. Make sure the class sees how you start running the program (whether by tapping a character or by tapping the green flag).
  6. + + +
  7. Re-run the program 2 more times so that the students get to see it run a total of three times.
  8. +
+ + +

<>· If the “Solve‐It” is rated “Easy” wait 30 seconds between each run. Wait 1 minute for + “Medium” “Solve-Its” and 2 minutes for “Hard ”Solve‐Its.”

+ + +

<>· If the program starts with a green flag, the characters will reset themselves to their original positions when the green + flag is tapped. If the program starts by tapping a character, you will have to tap the green flag first in order to have all of the characters return to their original + positions. Make sure the class knows that the green flag is not part of the program in that case-- it is only being used to return the characters to their starting + positions (or, press the green flag while the iPad is not being projected on the screen).

+ + +
    +
  1. At the end of the assessment collect the handouts. Note: Students may omit the red “End” block except in the following cases:
  2. +
+ + +

<>· where it leads to another page

+ + +

<>· where it causes the program to repeat infinitely.

+ + +

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

+ + +

5 The Solve-It Programs +

+ + +

1. Disappear, Then Reappear

+ + +

This is a warm-up exercise to let the students become familiar with the “Circle the Blocks” activity. Review the answer when you are finished with this Solve-It + to make sure the students understand what they need to do for the remaining Solve-Its.

+ + +

Difficulty: Easy

+ + +

+ + +

2. Hop Twice, Wait, Hop Again

+ + +

Difficulty: Easy

+ + +

+ + +

3. Turn Right and Left, Go Up and Down

+ + +

Difficulty: Medium

+ + +

+ + +

4. Walk, then Run

+ + +

Note: manually move cat to left side of stage before you program it.

+ + +

Difficulty: Medium

+ + +

+ + +

5. Grow, Shrink, then Go To Outer Space

+ + +

Difficulty: Medium

+ + +

+ +
+ +

6. When Cat Touches Dog, Dog Disappears

+ + +

Difficulty: Hard

+ + +

Cat Program:

+ + +

+ + +

Dog Program:

+ + +

+ + +

7. Cat says “Do this” and Dances; Dog says “OK” and Mimics the Dance

+ + +

Difficulty: Hard

+ + +

Cat Program:

+ + +

+ + +

Dog Program:

+ + +

+
+ + +
+ +
+ +
+ + \ No newline at end of file diff --git a/src/views/teach/assessments/reverseengineering.jsx b/src/views/teach/assessments/reverseengineering.jsx new file mode 100644 index 00000000..adb968de --- /dev/null +++ b/src/views/teach/assessments/reverseengineering.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import htmlContent from './reverse_engineering.html'; + +import '../print.css'; +import '../../../components/sectionitem/sectionitem.scss'; + +const ReverseEngineeringHtml = () => ( +
// eslint-disable-line react/no-danger +); +export default ReverseEngineeringHtml; diff --git a/src/views/teach/assessments/solveit.jsx b/src/views/teach/assessments/solveit.jsx index 193fe270..4b1c44a6 100644 --- a/src/views/teach/assessments/solveit.jsx +++ b/src/views/teach/assessments/solveit.jsx @@ -1,7 +1,9 @@ import React from 'react'; +import ReactRouterPropTypes from 'react-router-prop-types'; +import {Link} from 'react-router-dom'; import Section from '../../../components/sectionitem/section.jsx'; -const SolveitSection = () => ( +const SolveitSection = ({match}) => (
(
  • - - Student answer sheet - + Student answer sheet
  • (
  • ); +SolveitSection.propTypes = { + match: ReactRouterPropTypes.match.isRequired +}; export default SolveitSection; diff --git a/src/views/teach/assessments/student_answer_sheet.html b/src/views/teach/assessments/student_answer_sheet.html new file mode 100755 index 00000000..5c629093 --- /dev/null +++ b/src/views/teach/assessments/student_answer_sheet.html @@ -0,0 +1,74 @@ + + + +
    + +
    + + +
    +
    +

    + ScratchJr Solve-It Answer Sheet +

    + +
    +
    + + +
    + +
    +
    +

    Name of Student:_______________________________

    +

    FIX THE PROGRAM

    + +

    Question 1: Remove a block

    + +

    Circle a block to remove

    + +

    Question 2:Add a block

    + +

    Circle a block to add

    + +

    Question 3: Remove a block AND add a block

    + +

    Circle a block to remove

    + +

    Circle a block to add

    + +
    + +

    Category: Circle the block

    +

    Question 1:

    + +

    Question 2:

    + +

    Question 3:

    + +

    Category: Match the program

    +

    Question 1:

    + +
    + +

    Question 2:

    + +

    Querstion 3:

    + +
    +

    Category: Match the program

    +

    Question 1:

    +











    +

    Question 2:

    +











    +

    Question 3:

    +











    + +
    +
    +
    +
    + +
    + + \ No newline at end of file diff --git a/src/views/teach/curricula/animatedgenres.jsx b/src/views/teach/curricula/animatedgenres.jsx index 6cd688bb..9cc67d48 100644 --- a/src/views/teach/curricula/animatedgenres.jsx +++ b/src/views/teach/curricula/animatedgenres.jsx @@ -1,81 +1,22 @@ import React from 'react'; -import Section from '../../../components/sectionitem/section.jsx'; +import {Route, Switch} from 'react-router-dom'; +import ReactRouterPropTypes from 'react-router-prop-types'; -const AnimatedGenres = () => ( -
    -
    - Download all lessons as one file -
    -
    - Introduction and Summary -
    -
    - Module 1 - Making a ScratchJr Collage -
    -
    - In this module, students learn how to navigate around the ScratchJr - iPad app, and they learn simple programming commands that will animate - their characters. At the end of the module, students will create a - ScratchJr collage project. -
    - - Lesson 1 - Instructions, Sequencing, and an Introduction to the ScratchJr iPad App -
    - - Lesson 2 - Same Block Sequencing and Motion -
    - - Lesson 3 - Start on Green Flag Block, End Block, and Choosing Characters -
    - - Lesson 4 - Backgrounds and Review of Programming Multiple Characters -
    - - Collage Project -
    -
    -
    - Module 2 - Making a ScratchJr Story -
    -
    - In this module, students learn how to define more specific behavior - for their characters, and they use tools such as speech bubbles and - pages to help them weave a narrative. At the end of the module, - students will create a ScratchJr story project. -
    - - Lesson 5 - Speed -
    - - Lesson 6 - Numbers and Repeating Sentences -
    - - Lesson 7 - Speech Bubbles, Sounds, Pages and Wait -
    - - Story Project -
    -
    -
    - Module 3 - Making a ScratchJr Game -
    -
    - In this module, students learn more advanced concepts in ScratchJr. - Most importantly, they discover how to program characters that - interact with each other and with the iPad user. At the end of - the module, students will create a ScratchJr game project. -
    - Lesson 8 - Start on - Bump, Start on Tap, Send and Receive Messages, Stop -
    - Game Project -
    -
    -
    +import AnimatedGenresHtml from './animatedgenres/full.jsx'; +import AnimatedGenresHome from './animatedgenres/home.jsx'; + +const AnimatedGenresSection = ({match}) => ( +
    + + + + +
    ); -export default AnimatedGenres; +AnimatedGenresSection.propTypes = { + match: ReactRouterPropTypes.match.isRequired +}; +export default AnimatedGenresSection; diff --git a/src/views/teach/curricula/animatedgenres/animatedgenres.html b/src/views/teach/curricula/animatedgenres/animatedgenres.html new file mode 100644 index 00000000..414e5112 --- /dev/null +++ b/src/views/teach/curricula/animatedgenres/animatedgenres.html @@ -0,0 +1,2391 @@ +
    +
    +
    +
    +

    + Animated Ge­nres +
    + Classroom Curriculum +
    + for Grades K-2 +

    +

    +

    +
    +
    + +
    +
    +
    + Animated Genres Curriculum + Introduction +
    +
    +

    This curriculum introduces powerful ideas from engineering and computer science that are not usually highlighted in early childhood education. The term “powerful + idea” refers to a concept that children can learn through a curriculum that will serve them beyond the lifetime of a specific classroom technology. In this case, the + curriculum revolves around the ScratchJr iPad application. Powerful ideas may be applied to many disciplines and will be rewarding in students’ academic and personal + futures. Throughout the following curriculum, both activities and lessons will seek to illustrate these powerful ideas.

    + + +

    The curriculum will be divided into three modules based on three interactive genres of ScratchJr-based projects. These genres are collage, story, and game. Each of these + modules is comprised of two units:

    + + +

    1. A series of lessons that introduce ScratchJr features and programming blocks

    + + +

    2. An opportunity for children to create their own projects by applying concepts learned in module lessons

    + + +

    This curriculum requires one iPad per student. Occasionally, additional materials are required, and they are noted where necessary.

    + + +

    About ScratchJr +

    + + +

    ScratchJr is a developmentally appropriate programming language for children ages five through seven. Using the ScratchJr iPad application, children can create their own + interactive collages, animated stories, and games. The application is the product of the DevTech Research Group at the Eliot-Pearson Department of Child Development at Tufts + University, directed by Professor Marina Bers, and the Lifelong Kindergarten Group at the MIT Media Lab, directed by Professor Mitchel Resnick. Funded by the National Science + Foundation (NSF DRL-1118664), the ScratchJr iPad application was released in July 2014.

    + + +

    Pacing +

    + + +

    This curriculum is designed to take place over the course of six weeks. Every week, two one-hour lessons are to be taught. While this particular curriculum is described in + detail over the following pages, we acknowledge that teachers know their students best. Therefore, teachers should adjust activities and lessons to accommodate both the + classroom culture and students’ technological experience and developmental levels.

    +
    +
    +
    + +
    +
    +
    Overview
    +
    + +

    Module 1 – Interactive Collage +

    +

    Lessons (1 hour each): +

    +

    1. Instructions, Sequencing, and an Introduction to the ScratchJr iPad Application

    +

    2. Same Block Sequencing and Motion

    +

    3. Start on Green Flag Block, End Block, and Choosing Characters

    +

    4. Backgrounds and Review of Programming Multiple Characters

    +

    Module 1 Project: Collage

    +

    Total Lesson and Project Time: 5 hours

    + + + + + + + + + +
    +

    ScratchJr Blocks Learned: +

    + + +
      +
    • Motion: Right, Left, Up, Down, Turn Clockwise, Turn Counterclockwise, Jump, Go Home
    • + + +
    • Looks: Bigger, Smaller, Visible, Invisible, Reset Size
    • +
    + + +
      +
    • Start on Green Flag
    • +
    + + +
      +
    • End
    • +
    +
    +

    ScratchJr Skills Learned: +

    + + +
      +
    • Drag block to scripting area
    • + + +
    • Connect blocks
    • + + +
    • Choose character
    • + + +
    • Create new character
    • + + +
    • Start program with green flag
    • + + +
    • Stop program with red end block
    • + + +
    • Choose backgrounds
    • + + +
    • Create new backgrounds
    • +
    +
    + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + +
    + +

    Module 2 - Interactive Story +

    +

    Lessons (1 hour each): +

    +

    5. Speed

    +

    6. Numbers and Repeating Sequences

    +

    7. Speech Bubbles, Sounds, Pages, Wait for

    +

    Module 2 Project: Story (two one-hour lessons)

    +

    Total Lesson and Project Time: 5 hours

    + + + + + + + +
    +

    ScratchJr Blocks Learned: +

    +
      +
    • Speed
    • +
    • Repeat
    • +
    +
      +
    • Repeat forever
    • +
    +
      +
    • Voice recorder
    • +
    • Speech bubble
    • +
    +
      +
    • Change page
    • +
    • Wait for
    • +
    +
    +

    ScratchJr Skills Learned: +

    +
      +
    • Program characters to move at different speeds
    • +
    • Use numbers on motion blocks to reduce the number of motion blocks used
    • +
    • Use the repeat and repeat forever blocks to make a program repeat
    • +
    • Record sounds and add them to projects
    • +
    • Create speech bubbles for characters
    • +
    • Add additional pages to a project
    • +
    • Pause a character’s program for a certain amount of time
    • +
    +
    +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + +

    Module 3 - Game +

    + + +

    Lesson (1 hour each): +

    + + +

    8. Start on Bump, Start on Tap, Send and Receive Messages, Stop

    + + +

    Module 3 Project: Game

    + + +

    Total Lesson and Project Time: 2 hours

    + + + + + + + + + +
    +

    ScratchJr Blocks Learned: +

    + +

    · Start on bump

    + +

    · Start on tap

    + +

    · Send message

    + +

    · Receive message

    + +

    · Stop

    +
    +

    ScratchJr Skills Learned: +

    +
      +
    • Use the start on bump block to activate another character’s program
    • + +
    • Use the start on tap block to activate a character’s program
    • + +
    • Use the send and receive message blocks to initiate another character’s program
    • + +
    • Terminate particular characters’ programs with the stop block
    • +
    +
    +
    +
    +
    + +
    +
    +
    + Animated Genres Curriculum Module 1 + Lesson 1: Instructions, Sequencing, and an Introduction to ScratchJr +
    +
    +

    Summary +

    +

    In this lesson, children will be introduced to two concepts that will create a foundation for understanding programming: instructions and sequencing. Through various + interactive activities, students will acquire a basic understanding of these two concepts. The lesson will conclude with an introduction to the ScratchJr interface.

    + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • Appropriate iPad use
    • + + +
    • The concept of programming
    • + + +
    • The concept of instructions
    • + + +
    • The concept of sequencing
    • + + +
    • The basic features of the ScratchJr interface
    • +
    +
    +

    General

    + + +
      +
    • Give specific instructions
    • + + +
    • Sequence instructions to achieve simple objectives
    • +
    + + +

    ScratchJr

    + + +
      +
    • Move blocks into the scripting area
    • + + +
    • Use blocks in scripting area as buttons
    • + + +
    • Select a block category
    • + + +
    • Save a project
    • +
    +
    +
    + + + + + + + + + + + + + + + +
    +

    Programming Blocks Introduced in this Lesson +

    +
    +
      +
    • Right
    • + + +
    • Left
    • + + +
    • Up
    • + + +
    • Down
    • + + +
    • Bigger
    • + + +
    • Smaller
    • + + +
    • Visible
    • + + +
    • Invisible
    • +
    +
    +

     

    + + +

    +

    +
    + +

    Additional Materials: Rule board +

    + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + +
    + +

    Schedule +

    +

    Introduction (2.5 minutes): The lesson should begin with the teacher introducing him/herself to the class. The teacher should explain why s/he would like + to teach the students about programming. S/he should briefly ask students what they know about programming.

    +

    Simon Says (10 minutes): The teacher should play Simon Says with the class. S/he should discuss how this activity is dependent on properly being able to + give and follow instructions. S/he should then explain how providing clear instructions is critical to computer programming.

    + +

    Program the Teacher (15 minutes): In this activity, students will be responsible for verbally directing their teacher to special destinations in the + classroom (e.g. to a bookcase or a closet). The instructions the students give to the teacher must be specific. For example, students should not simply say, “Move + forward.” They should instead say, “Move forward ____ steps.” When sequences of instructions do not work (perhaps because the number of steps taken were + incorrect), students should alter their instructions. After the activity is over, the teacher should discuss how important it is to be specific and how important order is in + programming.

    + + +

    2nd grade: Small groups determine a sequence of instructions +

    + + +

    Kindergarten and 1st grade: As a class +

    + + +

    Classroom Rules (5 minutes): The teacher should explain to students how important it is to respect each other and the equipment used in the classroom. With + the students, s/he should create a list of classroom rules governing iPad use. The teacher should write these rules down on the rule board, and hang these rules in the + classroom every time the class is working with ScratchJr.

    + + +

    Materials: Rule board +

    + + +

    Getting Started with ScratchJr (2.5 minutes): The teacher should hand out the iPads to the children, and show them how to begin a new + project in ScratchJr.

    + + +

    Using ScratchJr Blocks (10 minutes): Everyone in the class should watch the teacher as s/he moves a motion block (right, left, up, down) to the scripting + area and presses the block to make the Scratch cat move. The children should duplicate this task. The teacher should request that students raise their hands when they are + finished with this task. Do this for each motion block. Do the same for the resize blocks (bigger and smaller) and visibility blocks.

    + + +

    ScratchJr Exploration (10 minutes): The teacher should encourage students to explore the application by placing blocks in the scripting area and seeing + where the cat moves.

    + + +

    Wrap Up (5 minutes): The teacher should demonstrate how to save a project. Every child should save his project. The teacher should provide students with a + brief explanation of what will occur during the next lesson. Collect iPads.

    +
    +
    +
    + +
    +
    +
    + Animated Genres Curriculum Module 1 + Lesson 2: Motion +
    +
    +
    +

    Summary +

    + + +

    Students will review the concepts of instructions and sequences. They will learn how to create sequences of the same motion block (e.g. left, left, left). They will also + learn to create sequences using a variety of different motion blocks (e.g. right, down, jump, go home).

    + + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn that the ... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • Number of motion blocks in a programmed sequence corresponds to the number of actions performed by a character
    • + + +
    • Order of commands in a programmed sequence directly corresponds to the order of actions performed by a character
    • +
    +
    +
      +
    • Combine different motion blocks into programmed sequences
    • +
    +
    +
    + +
    + + + + + + + + + + + + + +
    +

    New Programming Blocks +

    +
    +
      +
    • Jump
    • + + +
    • Go Home
    • +
    + + +
      +
    • Reset Size
    • + + +
    • Turn clockwise
    • +
    + + +
      +
    • Turn counterclockwise
    • +
    +
    +

    +

    +
    +
    + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    +

    +

    +

    Schedule +

    + +

    Review (5 minutes): +

    + +
      +
    • During our last lesson, we played Simon Says. What did you learn from that activity?
    • + +
    • When you programmed your teacher, you had him/her go to a certain spot in the classroom. How did you get your teacher from one spot in the classroom to another? What did + you find hard about this activity?
    • + +
    • What is a program?
    • + +
    • We also worked with ScratchJr on the iPad. What was something you liked? What was something hard?
      +
    • +
    + +
    + +

    Kindergarten +

    + +

    Programmer Says (5 minutes): The directions for this game are the same as those for Simon Says, except sequences of three instructions are given (e.g. step + forward, step back, jump). The teacher should emphasize the importance of following directions and the order of instructions.

    + +

    +

    + +

    1st and 2nd grade +

    + +

    Guess the Program (5 minutes): The teacher should act out several short programs. Students should then be given the opportunity to guess what the program + acted out is (e.g. step forward, step back, jump).

    + + +
    +
    +

    All grades +

    + +

    Program the Teacher (15 minutes): Students will be responsible for directing their teacher to a specific location in the classroom. However, during this + lesson, students will only be able to use a specific set of possible instructions instead of simply using plain English. Examples of these specific instructions are:

    + + +
      +
    • Step forward
    • + +
    • Step backward
    • + +
    • Turn right
    • + +
    • Turn left
    • + +
    • Turn until you see something
    • +
    + +

    This activity will work the same way as it did in the prior lesson. However, this time students are encouraged to use this exact instruction set.

    + +

    Introduction to New ScratchJr Blocks (10 minutes): The teacher should demonstrate to children how to use the following blocks:

    + +
      +
    • Hop
    • +
    • Go Home
    • +
    + +
      +
    • Reset Size
    • + +
    • Turn clockwise
    • + +
    • Turn counterclockwise
    • +
    + +

    Materials: iPad for teacher only. +

    + +

    Sequencing in ScratchJr (10 minutes): The teacher should begin a new project in ScratchJr. S/he should place the Scratch cat and the treasure chest + characters on the same line on the screen (on a horizontal or vertical line). S/he should then ask students which blocks need to be placed next to each other in order for the + cat to successfully move toward the treasure chest. Three different scenarios should be set up (e.g. cat in the upper left corner and treasure chest in lower left corner; cat + in the lower left corner and the treasure chest in the bottom right corner) for the students to solve together as a class.

    + + +

    Materials: iPad for teacher only. +

    + +
    + +

    ScratchJr Exploration (10 minutes): The teacher should then hand out the iPads and allow students to explore the ScratchJr iPad + application. Encourage them to experiment with recently learned blocks, as well as with blocks that have not yet been taught. Have them practice putting different programming + blocks next to each other to make the cat move in different directions.

    + + +


    + Wrap Up (5 minutes): Make sure that students save their projects. Provide a preview of what will be taught in the next lesson. Collect iPads.

    +
    +
    +
    +
    + + +
    +
    +
    + Animated Genres Curriculum Module 1 + Lesson 3: Green Flag, End Block, Choosing Characters +
    +
    +
    +

    Summary +

    + + +

    In this lesson, students will learn to use the start on green flag and end blocks, as well as how to choose new characters. Through various interactive activities, children + will learn how to incorporate the green flag and end blocks into their programs, and will also become familiar with how to program more than one character using the green + flag.
    +

    + + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn that... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • A green flag goes at the beginning of a sequence of programming blocks
    • + + +
    • A red end block goes at the end of a sequence of programming blocks
    • + + +
    • Multiple programs can take place at once
    • +
    +
    +
      +
    • Program a character to start when the green flag is touched
    • +
    + + +
      +
    • Use the end block to signify the end of a program
    • + + +
    • Choose a new character
    • + + +
    • Program multiple characters to start when the green flag is touched
    • +
    +
    +
    + + +
    + + + + + + + + + + + + + +
    +

    New Programming Blocks +

    +
    +
      +
    • Start on Green Flag
    • + + +
    • End
    • +
    +
    +

    +

    +
    +
    + + +

    Additional Materials: Green flag card, red stop sign card
    +

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + +
    + + +

    Schedule +

    + + +

    +

    + + +

    Review (5 minutes): +

    + + +
      +
    • Can someone tell me what we learned during our lessons last week?
    • + + +
    • What was your favorite activity that we played? What did you learn from it?
    • + + +
    • Can you tell me what a program is?
    • + + +
    • What were some of the ScratchJr blocks you learned about?
    • +
    + + +


    + Kindergarten +

    + + +

    Instruction Stations (10 minutes): Split the class into four groups and assign them to four different stations. Each station will correspond to an + instruction to follow (e.g. clap your hands, stomp your feet, jump up and down, tap your hands on your head). When the teacher raises the green flag card, students follow the + instruction at their station. They stop when the teacher raises the red stop sign card. Students should then rotate to a different station. Repeat this activity until all + students have moved through each station once. The teacher should explain how the green flag signifies the start of a program, while the red stop sign signifies the end of a + program.

    + + +

    Materials: Green flag card, red stop sign card +

    + + +

    +

    +
    + + +

    +

    + + +
    +

    Program the Teacher (10 minutes): Students should program their teacher to arrive at a particular destination in the classroom. In order for the teacher to + begin following directions, students must hold up the green flag card. When the teacher is finished following instructions, students should hold up the red stop sign card.

    + + +

    Materials: Green flag card, red stop sign card +

    + + +

    1st and 2nd Grade
    + Program the Teacher(s) (20 minutes): Begin by programming the teacher as has been done in prior lessons. Begin with an easy program (have the teacher arrive + at a nearby location). Then program the teacher to arrive at a location that is farther away and has obstacles to move around. Afterwards, have students program two teachers + to arrive at two different locations. Introduce the idea of the green flag and red blocks. Then have both teachers follow their program when the green flag card is held up, + and end their program when the red stop sign card is held up. 

    + + +

    Materials: Green flag card, red stop sign card +

    + + +

    All +

    + + +

    Choosing Characters (2 minutes): Demonstrate to children how to choose a new character from the character library. Also make sure to teach them how to + delete a character (by holding a finger on the character until an “x” appears and then pressing the “x”).
    +

    + + +

    Programming with ScratchJr (15 minutes): The teacher should hand out the iPads and then write a program for students to copy onto their + own iPads. Begin with a simple warm up program that does not introduce new blocks. Then create a program for children to copy that uses the start on green flag and end blocks. + Lastly, create a program for children to copy that involves programming two different characters. Now encourage students to write their own programs for two different + characters.

    + +
    + + +


    + ScratchJr Exploration (15 minutes): Allow students to explore the ScratchJr iPad application. Encourage them to experiment with programming more than one + character at a time.

    + + +


    + Wrap Up (3 minutes): Make sure that everyone saves their projects. Ask students what they learned today. Also ask students what the purpose of the start on + green flag is. Collect iPads.

    +
    +
    +
    +
    + +
    +
    +
    + Animated Genres Curriculum Module 1 + Lesson 4: Choosing Backgrounds and Review of Multiple Characters +
    +
    + +
    +

    Summary +

    + + +

    In this lesson, students will learn how to choose and create different backgrounds for their projects. They will also review how to program multiple characters at once. + During the lesson, children will have the opportunity to explore ScratchJr on their iPads, practicing the skills that they have acquired during prior lessons.

    + + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn that... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • They can use backgrounds in their projects
    • + + +
    • That they can create their own backgrounds
    • +
    +
    +
      +
    • Use and create backgrounds in their projects
    • + + +
    • Review how to program multiple characters at once
    • +
    +
    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    Schedule +

    + + +

    Review (5 minutes): +

    + + +
      +
    • What was your favorite activity that we played during our last lesson?
    • + + +
    • What does the green flag do when it is included in a program?
    • + + +
    • What does the red end block tell a sequence of instructions to do?
    • + + +
    • Which block do you enjoy using most? Why?
    • +
    + + +

    Design the Program (10 minutes): During this activity, the teacher should ask students to help him/her program two different characters on his/her iPad. + S/he should provide the students with one scenario for each character (e.g. have one character move up five spaces and then jump three times, while the other character jumps + five times and then disappears). The teacher should then ask students to tell him/her which blocks to place down for each character. Remember to use the green flag and red + end blocks.

    + + +

    Materials: iPad for teacher only

    + + +

    ScratchJr Detectives (15 minutes): During this activity, the teacher should create a program for two different characters. Then in full screen mode, s/he + should show the students what the characters are doing. Note: the teacher should not show the students which programming blocks were used. Hand out the + ipads. The teacher should then ask the students to figure out which programming blocks s/he used to create those two programs by duplicating the sequence on their own + iPads. Complete this activity twice with two different programs for the characters.

    + +
    + +

    Backgrounds (5 minutes): The teacher should demonstrate to children how to choose backgrounds for their projects. S/he should also show students how they + can create their own backgrounds using the iPad camera.

    + + +

    +

    + + +

    iPad Exploration (20 minutes): Allow students to explore the ScratchJr iPad application. Encourage them to practice using blocks that they have already + learned, as well as explore programming blocks that they have not yet learned.

    + + +

    Wrap Up (5 minutes):Make sure that everyone saves their projects. Collect iPads.

    +
    +
    +
    +
    + + + + +
    +
    +
    + Animated Genres Curriculum Module 1 + Project 1: Collage +
    +
    +
    +

    Summary +

    + + +

    On Collage Project Day, students will be creating their own collages on ScratchJr. The lesson will begin with a brief introduction to a ScratchJr collage and a review of + the programming blocks learned in prior lessons. During the lesson, students will design and create their own collages. At the end of the lesson, students will share their + creations with the class.

    + + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • What elements should be a part of their collages
    • +
    +
    +
      +
    • Apply concepts from prior lessons when creating collages
    • +
    +
    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    Schedule +

    + + +

    +

    + + +

    Introduction (2 minutes): What is a Collage on ScratchJr? +

    + + +

    The teacher should explain to students that during this lesson, they will design their own collages. A collage on ScratchJr is a free-form project that has various + characters moving on the screen. The characters in a ScratchJr collage have no clear course of action, and are simply moving or transforming.

    + + +

    +

    + +
    + +

    Review (5 minutes): +

    + + +

    The teacher should briefly review the programming blocks learned in prior lessons. S/he should show the blocks on the screen, and ask the students to verbally describe what + each block does. These blocks are:

    + + + + + + + + + + +
    +
      +
    • Right
    • + + +
    • Left
    • + + +
    • Up
    • + + +
    • Down
    • + + +
    • Turn clockwise
    • + + +
    • Turn counterclockwise
    • + + +
    • Jump
    • + + +
    • Go Home
    • + + +
    • Bigger
    • + + +
    • Smaller
    • + + +
    • Reset Size
    • + + +
    • Visible
    • + + +
    • Invisible
    • +
    + + +
      +
    • Start on Green Flag
    • +
    + + +
      +
    • End
    • +
    +
    +

    +

    + + +

    +

    + + +

    +

    + + +

    +

    +
    + + +

    Materials: iPad for teacher only. +

    + + +

    +

    + + +

    +

    +
    + +
    +

    +

    + + +

    Collage Design and Creation (40 minutes): +

    + + +

    Hand out ipads.Students should spend about 40 minutes designing and creating their own collages. They should be encouraged to choose or create their own + backgrounds, and to program multiple characters. Students should only use programming blocks taught in prior lessons when designing these collages.

    + + +

    Note: The collage can be tailored to fit into the current curriculum being taught in the classroom. For example, if the class is currently learning about outer space, + the collage can be made using only items associated with space. +

    + + +

    +

    + + +

    Sharing (13 minutes): +

    + + +

    Students should be encouraged to share their collages with the rest of the class. They should explain which blocks they used to create their collage, and what is occurring + on the screen. Collect iPads.

    +
    +
    +
    +
    + + + + +
    +
    +
    + Animated Genres Curriculum Module 2 + Lesson 5: Speed +
    +
    + +
    +

    Summary +

    + + +

    In this lesson, children will be introduced to the concept of speed in the ScratchJr iPad application. Through interactive activities, students will acquire an + understanding of this concept and how to apply it in ScratchJr. During the lesson, students will be able to create their own projects using concepts learned in this and prior + lessons. The lesson will conclude with an opportunity for students to share their projects.

    + + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn that... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • The speed of characters can be changed
    • + + +
    • Different characters can be programmed to move at different speeds
    • +
    +
    +
      +
    • Program characters to move at different speeds
    • +
    +
    +
    + + +

    +

    + + +
    + + + + + + + + + + + + + +
    +

    New Programming Blocks +

    +
    +
      +
    • Speed
    • +
    +
    +

    +

    +
    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +
    + + + +

    Schedule +

    + + +

    +

    + + +

    Review (2 minutes): +

    + + +
      +
    • Last time we worked on ScratchJr, we created collages. Can you tell me what a collage is?
    • + + +
    • What are two blocks you used in your collage?
    • +
    + + +

    Programming Block Review (8 minutes): During this activity, the teacher should place the Scratch cat on the screen and say, “I would like my cat to + jump up and down. Which block would make the cat do this?” The children should then describe the block and how to find it in the program. This should be repeated for all + of the blocks learned until now.

    + + +

    Materials: iPad for teacher only.

    + + +

    Jungle Speed (10 minutes): During this activity, students will work as a class to order groups of animals or insects based on how fast they move (from + fastest to slowest). Write groups of animals on the board for students to verbally put in order of speed of movement. Examples of groups of animals may include:

    + + +

    1. Cheetah, snail, rabbit, hamster

    + + +

    2. Dog, ant, lion, guinea pig

    + + +

    3. Turtle, zebra, cat, monkey

    + + +

    4. Jaguar, lobster, snake, centipede

    +
    + + +
    +

    A discussion should follow that discusses how characters in ScratchJr can be made to move at different speeds. The teacher should introduce the speed programming block and + demonstrate how to use it on the ScratchJr application.

    + + +

    Materials: iPad for teacher only. +

    + + +

    Can I Make Characters Race (15 minutes)? The teacher should project his/her iPad onto the board and explain that the class will be making three ScratchJr + characters race. S/he should ask students to help him/her add and delete characters and choose a background. As a class, students should decide at which speed characters will + move in this race, and where on the screen/background the characters should move. The class should suggest different blocks to use to make each character move. Remember to + highlight how the green flag is essential when programming more than one character! When each character is programmed, show the class the race they created!

    + + +

    Materials: iPad for teacher only.

    + +
    + + +


    + Race Design (15 minutes): Hand out the iPads. Allow students to design their own races in ScratchJr. They should choose backgrounds and two + or three characters. Make sure that students are using the speed block.

    + + +

    Project Sharing (8 minutes):Have students share their races with the class by projecting them onto the board. Ask students to explain their races and which + blocks they used.

    + + +

    Wrap Up (2 minutes):Make sure that everyone saves their projects. Collect iPads.

    +
    +
    +
    +
    + + +
    +
    +
    + Animated Genres Curriculum Module 2 + Lesson 6: Numbers and + Repeating Sequences +
    +
    + +
    +

    Summary +

    + + +

    Through various interactive activities, students will learn about changing the numbers on motion blocks and how to use the repeat and repeat forever blocks. They will use + each of these blocks in ScratchJr projects that they build along with their teacher and class.

    + + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn that ... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • Numbers can be used on motion blocks
    • + + +
    • Numbers can reduce the number of blocks needed
    • + + +
    • Programs can be repeated for a specified number of times
    • + + +
    • Programs can be repeated forever
    • +
    +
    +
      +
    • Use numbers on motion blocks to reduce the number of blocks needed
    • + + +
    • Use the repeat and repeat forever blocks to make a program repeat
    • +
    +
    +
    + + +

    +

    + + +

    +

    + + +
    + + + + + + + + + + + + + +
    +

    New Programming Blocks +

    +
    +
      +
    • Repeat
    • + + +
    • Repeat forever
    • +
    +
    +

    +

    +
    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    Schedule +

    + + +

    Review (2 minutes): +

    + + +
      +
    • What was your favorite part of our last lesson? What did you learn from it?
    • + + +
    • What does the speed block do? What color is it?
    • + + +
    • If you want to program more than one character at once, what block do you need to use?
      +
    • +
    + +
    + +

    Why numbers? (10 minutes): The teacher should ask for a student volunteer. Once a volunteer is chosen, the teacher should instruct the student privately to + listen to the directions s/he gives, and jump the wrong number of times. For example, s/he should say to the student, “I want you to jump, jump, jump, jump, jump, jump, + jump.” The student should then jump the wrong number of times. The teacher should repeat the directions, and the student should again jump the wrong number of times. + After doing this, the teacher should ask the class how this instruction could be clearer (e.g. by saying, “I want you to jump seven times). The teacher should then + explain the concept of putting a number under a programming block, instead of putting that same block down multiple times. S/he should show how to do this on the iPad.

    + + +

    Materials: iPad for teacher only.

    +
    + + +

    +

    + +
    +

    Why repeat? (8 minutes): The teacher should ask for a student volunteer. S/he should say to the student, “I want you to jump, tap your head, and clap + your hands.” The teacher should say this instruction to the student multiple times, and the student should continue to follow these directions. The teacher should then + ask the class how this instruction could be clearer. The teacher should then explain the concept of the repeat and repeat forever blocks, and show students how to use them on + the ScratchJr application.

    + + +

    Materials: iPad for teacher only.

    + + +

    Structured ScratchJr Programming (35 minutes): +

    + + +

    1. The teacher should hand out the iPads and then build a program(s) on his/her iPad that includes putting numbers under motion blocks and repeat blocks. + Students must then follow along and build the program(s) the teacher made (10 minutes).

    + + +

    2. The students should then build their own program where they place numbers under the blocks (5 minutes).

    + + +

    3. The students should then build their own program where they use the repeat or repeat forever blocks (10 minutes).

    + + +

    4. Have the students place the Scratch cat and a second character at approximately the same height on the screen. The students should then build two different programs with + the minimum number of blocks for the Scratch cat to move over to the other character: one program will use a number under the move block, and the other program will use the + repeat block. Make sure students understand that they should not use more than one move block in this exercise.

    + + +

    (10 minutes).

    + + +

    + + +


    + Wrap Up (5 minutes): Make sure that students save their programs. Collect iPads.

    +
    +
    +
    +
    + + +
    +
    +
    + Animated Genres Curriculum Module 2 + Lesson 7: Speech Bubbles, Sounds, Pages, and Wait For +
    +
    +
    +

    Summary +

    + + +

    In this lesson, students will learn how to add sound as well as speech bubbles to their projects. They will also learn how to add a new page and the wait block to a + project. This lesson will prepare students for the story project by providing them with the ScratchJr tools they will need to make multi-page stories and make characters + communicate.

    + + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn that... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • Sounds can be added to ScratchJr
    • + + +
    • Characters can speak to each other through speech bubbles
    • + + +
    • Multiple pages can be added to a project
    • + + +
    • A program can be paused for a certain amount of time
    • +
    +
    +
      +
    • Record sounds and add them to projects
    • + + +
    • Create speech bubbles for characters
    • + + +
    • Add additional pages to a project
    • + + +
    • Pause their programs for a certain amount of time
    • +
    +
    +
    + + +

    +

    + + +

    +

    + + +
    + + + + + + + + + + + + + +
    +

    New Programming Blocks +

    +
    +
      +
    • Voice recorder
    • + + +
    • Speech bubble
    • + + +
    • Change page
    • + + +
    • Wait for
    • +
    +
    +

    +
    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +
    + + +

    Schedule +

    + + +

    +

    + + +

    Review (5 minutes): +

    + + +
      +
    • What activities did you participate in during our last lesson? What did you learn from those activities?
    • + + +
    • What does the repeat block do?
    • + + +
    • What color is the repeat block?
    • + + +
    • What happens when you change the number on the repeat block?
    • + + +
    • Which blocks are you able to change the numbers on?
      +
    • +
    + + +

    “Scratch-lib” (25 minutes): During this activity, the teacher should project his/her iPad onto the board. S/he should create a simple sequence + with motion blocks and a speech bubble and a sound. The teacher should then demonstrate how to use these two new blocks. Hand out the ipads. The class will + copy this sequence onto their own iPads. They then have the liberty to insert their own text or sounds into the blocks.

    + + +

    After the students have completed this task, the teacher should continue by teaching students how to add a page to a project. S/he should also make sure that students + understand that to continue a story, an “end block” with a picture of the next page must be inserted at the end of

    +
    + + +
    +

    the program on the prior page. The children should then add a page to their stories, and insert the sounds or texts they would like.

    + + +

    Note: Kindergarten students may have difficulty typing words. Consider writing words that they can use in their story on the board for them to copy down. +

    + + +

    Sharing (10 minutes): After students have finished their “Scratch-libs” they should be given the opportunity to share their projects with the + rest of the class. Students should try to explain what they created and which blocks they used.

    + + +

    +

    + + +

    Wait! (5 minutes): The teacher should introduce the students to the “wait for” block. The “wait for” block pauses a program for a + certain amount of time determined by the number entered on the block. The “wait for” block can be used, for example, to slow down the program before going to the + next page of a story so that there is a pause in the action between one scene and the next.

    + + +

    +

    + + +

    Option: iPad exploration or continuation of story (10 minutes) +

    + + +

    Provide students with the opportunity to

    + + +

    1. Explore on the iPads by creating a new project, or

    + + +

    2. Continue working on the project started that day

    + + +

    Wrap-up (5 minutes): Make sure that students save their programs. Collect iPads.

    +
    +
    +
    +
    + + +
    +
    +
    + Animated Genres Curriculum Module 2 + Project 2: Story +
    +
    +
    +

    Summary +

    + + +

    The Story Project will take two sessions. Each Project Day will take one hour to complete. On the first Story Project Day, students will learn about the elements of a + story. They will then spend the remainder of the lesson designing their own stories. On the second Story Project Day, students will spend the entire lesson creating and + sharing their stories with the class. 

    + + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • What elements are part of a story
    • +
    +
    +
      +
    • Apply concepts from prior lessons when creating their own stories
    • +
    +
    +
    + + +

    Additional Materials: Storybook +

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    Schedule (Story Project Day 1) +

    + + +

    +

    + + +

    Kindergarten +

    + + +

    Introduction (10 minutes): What is a story? +

    + + +

    The teacher should read a short story to his/her students. S/he should try to choose a story that has characters that are in the character library of the ScratchJr + application. S/he should ask students what characters are in the story and where the story takes place. S/he should also explain that a story has a beginning, middle, and end. + When creating their stories, the kindergartners should use the characters they read about in the story.

    + + +

    Materials: A storybook

    + + +

    +

    + + +

    1st and 2nd Grade: +

    + + +

    Introduction (10 minutes): What is a story? +

    + + +

    The teacher should choose a story that the class has recently read together (s/he should not read it to them). S/he should ask students to describe the characters + in the story and the setting of the story. The teacher should explain that a story has a beginning, middle, and end. S/he should then ask students to briefly describe the + beginning, middle, and end of the story they are discussing.

    + + +

    +

    + + +

    All +

    + +
    + +

    Review (5 minutes): +

    + + +

    The teacher should briefly review the programming blocks learned in the second module’s lessons. S/he should show the blocks on the screen, and ask the students to + verbally describe what each block does. These blocks are:

    + + + + + + + + + + +
    +
      +
    • Speed
    • + + +
    • Repeat
    • +
    + + +
      +
    • Repeat forever
    • +
    + + +
      +
    • Voice recorder
    • + + +
    • Speech bubble
    • +
    + + +
      +
    • Change page
    • + + +
    • Wait for
    • +
    +
    +

    +

    + + +

    +

    +
    + + +

    Materials: iPad for teacher only. +

    +
    +

    +

    +
    +

    +

    + + +

    Story Design and Creation (35 minutes): +

    + + +

    Students should spend about 35 minutes designing and creating their own stories (kindergarteners should use the characters they read about in the story just read to them). + Hand out the iPads individually after a student shows a reasonably detailed design. Students should be encouraged to use three pages in their stories – + one each for the beginning, middle, and end. They should also be encouraged to choose or create their own backgrounds, program multiple characters, and use the record and + speech blocks.

    + + +

    Note: The story can be tailored to fit into the current curriculum being taught in the classroom. +

    + + +

    +

    + + +

    Sharing (10 minutes): +

    + + +

    Students should be encouraged to share their stories with the rest of the class. They should explain which blocks they used to create their stories, and what is occurring + on the screen. Collect iPads.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +
    + + + +

    Schedule (Story Project Day 2) +

    + + +

    Story Design and Creation (45 minutes): +

    + + +

    Hand out the iPads.On the second Story Project Day, students can either continue the story they started during the last lesson, or they can start a new + story.

    + + +

    Sharing (15 minutes): +

    + + +

    Students should be encouraged to share their stories. They should explain what is occurring in their story, and where the idea for their story came from. Collect iPads.

    +
    +
    +
    +
    + + +
    +
    +
    + Animated Genres Curriculum Module 3 + Lesson 8: Start on Bump, Start on Tap, Send and Receive Messages, Stop +
    +
    + +
    +

    Summary +

    + +

    Through various activities in this lesson, students will be introduced to the start on bump, start on tap, send and receive message, and stop blocks. After learning how to + use these new blocks, students will have the opportunity to explore ScratchJr and apply the concepts just learned.

    + +
    + + + + + + + + + + + + + + +
    +

    Objectives +

    + +

    Students will learn that... +

    +
    +

    Objectives +

    + +

    Students will be able to... +

    +
    +
      +
    • A character’s program can be activated when the character is bumped by another character
    • + + +
    • A character’s program can be activated when the character is tapped
    • + + +
    • Characters can send and receive messages that activate their program
    • + + +
    • Programs can be terminated
    • +
    +
    +
      +
    • Use the start on bump block to activate another character’s program
    • + + +
    • Use the start on tap block to activate a character’s program
    • + + +
    • Use the send and receive message blocks to initiate another character’s program
    • + + +
    • Terminate particular characters’ programs
    • +
    +
    +
    + +

    +

    + +

    +

    + +
    + + + + + + + + + + + + +
    +

    New Programming Blocks +

    +
    +
      +
    • Start on bump
    • + +
    • Start on tap
    • + +
    • Send message
    • + +
    • Receive message
    • + +
    • Stop
    • +
    +
    +

    +

    +
    +
    + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + +
    + + +

    Schedule +

    + +

    +

    + +

    Review (5 minutes): +

    + +

    The teacher should review some of the recently learned programming blocks with students. S/he should project the iPad onto the board, and show students the various + programming blocks. S/he should ask them to verbally describe what each block can be used for.

    + +

    Materials: iPad for teacher only.

    + +


    + Scavenger Hunt (7 minutes): With the class, the teacher should list ten objects that can be found in the room (e.g. red marker, backpack, eraser). S/he should + explain to the class that one child is to retrieve the first object on the list from its location in the room. Once the student has obtained the object, s/he is to high-five + another student in the class, who will then go and retrieve the next object on the list. Continue this process until all of the objects on the list have been retrieved. The + teacher should then explain how this activity relates to the start on bump and start on tap block.

    +
    + +
    +

    iPad Demonstration (15 minutes): The teacher should demonstrate how to use the start on bump and start on tap blocks. In these demonstrations, s/he should + use characters that complement each other, so that it is clear who is receiving the “bump” or “tap.” Such pairs may include:

    + + +

    1. Magician and dragon

    + + +

    2. Frog and fly

    + + +

    3. Sun and moon

    + + +

    After the teacher has demonstrated how to use these two blocks, s/he should hand out the iPads. The students should be given the opportunity to practice + these blocks using two characters that the teacher chooses.

    + + +

    “Three, two, one, blast off” (15 minutes): During this activity, the teacher should project the Scratch cat and the rocket + onto the board. S/he should show the cat counting down “Three, two, one” and then have the space ship “take off” by moving upward. After this + demonstration has occurred, the teacher should show the children the programming blocks that made this occur. S/he should show students how to use the send and receive message + blocks, and how the message colors must match each other in order for the message to occur. Students should then be given the opportunity to recreate this demonstration + themselves on their own iPads.

    + + +

    + +
    + +

    Stop! (5 minutes): The teacher should demonstrate how to use the stop block in ScratchJr. The stop block is used to terminate all programs running for a + particular character. To teach this block, s/he should have two characters. The first character has two programs: one that repeats forever and a second one that stops when + it’s bumped. The second character should have a sequence that repeats forever. For example:

    + + +

    + + +

    Place the penguin to the right of the cat. The cat will stop moving as soon as it bumps into the penguin, but the penguin will keep jumping forever.

    + + +


    + iPad Exploration (13 minutes): Allow children to continue working on their projects. They should be using the blocks learned in this lesson. They should have + the opportunity to add new characters and change the background. Collect iPads.

    +
    +
    +
    +
    + + +
    +
    +
    + Animated Genres Curriculum Module 3 + Project 3: Game +
    +
    +
    +

    Summary +

    + + +

    On Game Project Day, students will learn about the elements of games. They will also be shown how to create two different types of games on the ScratchJr application. They + will then spend the remainder of the lesson designing and sharing games.

    + + +
    + + + + + + + + + + + + + + + +
    +

    Objectives +

    + + +

    Students will learn... +

    +
    +

    Objectives +

    + + +

    Students will be able to... +

    +
    +
      +
    • What elements are parts of games
    • + + +
    • How to create different types of games in the application
    • +
    +
    +
      +
    • Apply concepts from prior lessons when designing their own games
    • +
    +
    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    Schedule +

    + + +

    +

    + + +

    Introduction (5 minutes): What is a game? +

    + + +

    The teacher should explain to students that during this lesson, they will design their own games. With the class, the teacher should brainstorm elements of a game (e.g. + rules, obstacles, a goal). S/he should write down their ideas on the board.

    + + +

    +

    + + +

    Example Games (10 minutes): +

    + + +

    The teacher should demonstrate two types of games to students that can be made with ScratchJr. (Note: there are more than two types of games that can be made with + ScratchJr.)

    + + +

    1. “Make the Cat Come Back” – The teacher should use the “tap to start” block to make several characters into buttons. S/he + should then program one character to send a message to a hidden cat so that it reappears. Students should then tap the various characters until the cat reappears.

    + + +

    2. “Get the Cat to the Birthday Cake” – The teacher should use the “tap to start” block to make a character into a button. + S/he should program the character to send a message to the cat so that the cat will move in the direction of a birthday cake. Have students continue tapping the character + until the cat arrives at the cake.

    + + +

    Materials: iPad for teacher only. +

    + + +
    + + +

    Game Design and Creation (35 minutes): +

    + + +

    Students should spend about 35 minutes designing and creating their own games. Hand out the iPads individually when design is adequate. Examples of games + could include:

    + + +

    1. Creating a maze

    + + +

    2. Having a character collect objects (that disappear when bumped into) on the way to another character

    + + +

    3. Having characters become buttons that send messages to other characters to carry out a sequence

    + + +

    +

    + + +

    Sharing (10 minutes): +

    + + +

    Students should be encouraged to share their games with the rest of the class. Collect iPads.

    +
    +
    +
    +
    +
    +
    diff --git a/src/views/teach/curricula/animatedgenres/full.jsx b/src/views/teach/curricula/animatedgenres/full.jsx new file mode 100644 index 00000000..9bc2a2c9 --- /dev/null +++ b/src/views/teach/curricula/animatedgenres/full.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import htmlContent from './animatedgenres.html'; +import ReactRouterPropTypes from 'react-router-prop-types'; +import {ScrollIntoView} from 'rrc'; + +import '../../print.css'; +import '../../../../components/sectionitem/sectionitem.scss'; + +const AnimatedGenresHtml = ({location}) => ( + + {/* eslint-disable react/no-danger */} +
    + {/* eslint-enable react/no-danger */} + +); +AnimatedGenresHtml.propTypes = { + location: ReactRouterPropTypes.location.isRequired +}; +export default AnimatedGenresHtml; diff --git a/src/views/teach/curricula/animatedgenres/home.jsx b/src/views/teach/curricula/animatedgenres/home.jsx new file mode 100644 index 00000000..358543d5 --- /dev/null +++ b/src/views/teach/curricula/animatedgenres/home.jsx @@ -0,0 +1,99 @@ +import React from 'react'; +import ReactRouterPropTypes from 'react-router-prop-types'; +import {Link} from 'react-router-dom'; +import Section from '../../../../components/sectionitem/section.jsx'; + +const AnimatedGenresHome = ({match}) => ( +
    +
    + View all lessons as one page (printable) +
    +
    + Introduction and Summary +
    +
    + Module 1 - Making a ScratchJr Collage +
    +
    + In this module, students learn how to navigate around the ScratchJr + iPad app, and they learn simple programming commands that will animate + their characters. At the end of the module, students will create a + ScratchJr collage project. +
    + + Lesson 1 - Instructions, Sequencing, and an Introduction to the ScratchJr iPad App + +
    + + Lesson 2 - Same Block Sequencing and Motion + +
    + + Lesson 3 - Start on Green Flag Block, End Block, and Choosing Characters + +
    + + Lesson 4 - Backgrounds and Review of Programming Multiple Characters + +
    + + Collage Project + +
    +
    +
    + Module 2 - Making a ScratchJr Story +
    +
    + In this module, students learn how to define more specific behavior + for their characters, and they use tools such as speech bubbles and + pages to help them weave a narrative. At the end of the module, + students will create a ScratchJr story project. +
    + + Lesson 5 - Speed + +
    + + Lesson 6 - Numbers and Repeating Sentences + +
    + + Lesson 7 - Speech Bubbles, Sounds, Pages and Wait + +
    + + Story Project + +
    +
    +
    + Module 3 - Making a ScratchJr Game +
    +
    + In this module, students learn more advanced concepts in ScratchJr. + Most importantly, they discover how to program characters that + interact with each other and with the iPad user. At the end of + the module, students will create a ScratchJr game project. +
    + + Lesson 8 - Start on + Bump, Start on Tap, Send and Receive Messages, Stop + +
    + + Game Project + +
    +
    +
    +); +AnimatedGenresHome.propTypes = { + match: ReactRouterPropTypes.match.isRequired +}; +export default AnimatedGenresHome; diff --git a/src/views/teach/curricula/animatedgenres/images/image001.gif b/src/views/teach/curricula/animatedgenres/images/image001.gif new file mode 100755 index 00000000..26b2d45c Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image001.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image002.gif b/src/views/teach/curricula/animatedgenres/images/image002.gif new file mode 100755 index 00000000..cf231333 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image002.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image003.gif b/src/views/teach/curricula/animatedgenres/images/image003.gif new file mode 100755 index 00000000..7cb5d023 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image003.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image004.gif b/src/views/teach/curricula/animatedgenres/images/image004.gif new file mode 100755 index 00000000..8eaf7418 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image004.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image005.gif b/src/views/teach/curricula/animatedgenres/images/image005.gif new file mode 100755 index 00000000..6b53a136 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image005.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image006.gif b/src/views/teach/curricula/animatedgenres/images/image006.gif new file mode 100755 index 00000000..f961974e Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image006.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image007.gif b/src/views/teach/curricula/animatedgenres/images/image007.gif new file mode 100755 index 00000000..30786ebb Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image007.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image008.gif b/src/views/teach/curricula/animatedgenres/images/image008.gif new file mode 100755 index 00000000..041a67d3 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image008.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image009.gif b/src/views/teach/curricula/animatedgenres/images/image009.gif new file mode 100755 index 00000000..8db3c065 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image009.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image010.gif b/src/views/teach/curricula/animatedgenres/images/image010.gif new file mode 100755 index 00000000..6d72a6b2 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image010.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image011.gif b/src/views/teach/curricula/animatedgenres/images/image011.gif new file mode 100755 index 00000000..3e2feeb7 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image011.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image012.gif b/src/views/teach/curricula/animatedgenres/images/image012.gif new file mode 100755 index 00000000..d0dd23fc Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image012.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image013.gif b/src/views/teach/curricula/animatedgenres/images/image013.gif new file mode 100755 index 00000000..470b30e6 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image013.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image014.gif b/src/views/teach/curricula/animatedgenres/images/image014.gif new file mode 100755 index 00000000..1569ce38 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image014.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image015.gif b/src/views/teach/curricula/animatedgenres/images/image015.gif new file mode 100755 index 00000000..f8e4658b Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image015.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image016.gif b/src/views/teach/curricula/animatedgenres/images/image016.gif new file mode 100755 index 00000000..95fdd9a3 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image016.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image017.gif b/src/views/teach/curricula/animatedgenres/images/image017.gif new file mode 100755 index 00000000..1753d8f6 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image017.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image018.gif b/src/views/teach/curricula/animatedgenres/images/image018.gif new file mode 100755 index 00000000..ffacd778 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image018.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image019.gif b/src/views/teach/curricula/animatedgenres/images/image019.gif new file mode 100755 index 00000000..80739f0b Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image019.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image020.gif b/src/views/teach/curricula/animatedgenres/images/image020.gif new file mode 100755 index 00000000..175b3ced Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image020.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image021.gif b/src/views/teach/curricula/animatedgenres/images/image021.gif new file mode 100755 index 00000000..31c5a841 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image021.gif differ diff --git a/src/views/teach/curricula/animatedgenres/images/image022.gif b/src/views/teach/curricula/animatedgenres/images/image022.gif new file mode 100755 index 00000000..d963d769 Binary files /dev/null and b/src/views/teach/curricula/animatedgenres/images/image022.gif differ diff --git a/src/views/teach/curricula/litmath.json b/src/views/teach/curricula/litmath.json deleted file mode 100644 index e39705d6..00000000 --- a/src/views/teach/curricula/litmath.json +++ /dev/null @@ -1,20 +0,0 @@ -[ - { - "title": "Uppercase and Lowercase Letters - Part 1", - "thumbnail": "/images/literacymath/project1.png", - "description": "This project reinforces a student's knowledge of writing and recognizing uppercase and lowercase letters...", - "linkURL": "/curricula/literacymath/cc-module-1.pdf" - }, - { - "title": "Uppercase and Lowercase Letters - Part 2", - "thumbnail": "/images/literacymath/project2.png", - "description": "This project builds on Part 1 by adding the concept of messaging to connect an uppercase letter with its lowercase counterpart...", - "linkURL": "/curricula/literacymath/cc-module-2.pdf" - }, - { - "title": "Counting and Cardinality", - "thumbnail": "/images/literacymath/project3.png", - "description": "This project reinforces a student's knowledge of counting and cardinality...", - "linkURL": "/curricula/literacymath/cc-module-3.pdf" - } -] diff --git a/src/views/teach/curricula/litmath.jsx b/src/views/teach/curricula/litmath.jsx index f5a40872..8ee97b1d 100644 --- a/src/views/teach/curricula/litmath.jsx +++ b/src/views/teach/curricula/litmath.jsx @@ -1,26 +1,32 @@ import React from 'react'; -import Section from '../../../components/sectionitem/section.jsx'; -import StaticLinkSectionItem from '../../../components/sectionitem/staticlinksectionitem.jsx'; -import activities from './litmath.json'; +import {Route, Switch} from 'react-router-dom'; +import ReactRouterPropTypes from 'react-router-prop-types'; -const LiteracyMath = () => ( -
    -
    - {activities.map((activity, index) => ( - - ))} -
    -
    +import Letters1Html from './litmath/letters1.jsx'; +import Letters2Html from './litmath/letters2.jsx'; +import NumbersHtml from './litmath/numbers.jsx'; +import LitMathHome from './litmath/home.jsx'; + +const PlaygroundSection = ({match}) => ( +
    + + + + + + +
    ); -export default LiteracyMath; +PlaygroundSection.propTypes = { + match: ReactRouterPropTypes.match.isRequired +}; +export default PlaygroundSection; diff --git a/src/views/teach/curricula/litmath/home.jsx b/src/views/teach/curricula/litmath/home.jsx new file mode 100644 index 00000000..3e5db9d9 --- /dev/null +++ b/src/views/teach/curricula/litmath/home.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import ReactRouterPropTypes from 'react-router-prop-types'; +import Section from '../../../../components/sectionitem/section.jsx'; +import LinkedSectionItem from '../../../../components/sectionitem/linkedsectionitem.jsx'; + +const LitMathHome = ({match}) => ( +
    +
    + + This project reinforces a student's knowledge of writing and recognizing + uppercase and lowercase letters... + + + This project builds on Part 1 by adding the concept of messaging to connect an + uppercase letter with its lowercase counterpart... + + + This project reinforces a student's knowledge of counting and cardinality... + +
    +
    +); +LitMathHome.propTypes = { + match: ReactRouterPropTypes.match.isRequired +}; +export default LitMathHome; diff --git a/src/views/teach/curricula/litmath/images/letters1/image001.png b/src/views/teach/curricula/litmath/images/letters1/image001.png new file mode 100755 index 00000000..d8184aa3 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image001.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image002.png b/src/views/teach/curricula/litmath/images/letters1/image002.png new file mode 100755 index 00000000..4c750e1f Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image002.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image003.png b/src/views/teach/curricula/litmath/images/letters1/image003.png new file mode 100755 index 00000000..d3c7b3d9 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image003.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image004.png b/src/views/teach/curricula/litmath/images/letters1/image004.png new file mode 100755 index 00000000..42060683 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image004.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image005.png b/src/views/teach/curricula/litmath/images/letters1/image005.png new file mode 100755 index 00000000..4e3c8168 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image005.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image006.png b/src/views/teach/curricula/litmath/images/letters1/image006.png new file mode 100755 index 00000000..00e8cc31 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image006.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image007.png b/src/views/teach/curricula/litmath/images/letters1/image007.png new file mode 100755 index 00000000..f9177c9a Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image007.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image008.png b/src/views/teach/curricula/litmath/images/letters1/image008.png new file mode 100755 index 00000000..787a1afd Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image008.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image009.png b/src/views/teach/curricula/litmath/images/letters1/image009.png new file mode 100755 index 00000000..389b5454 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image009.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image010.png b/src/views/teach/curricula/litmath/images/letters1/image010.png new file mode 100755 index 00000000..31cf72f1 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image010.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image011.png b/src/views/teach/curricula/litmath/images/letters1/image011.png new file mode 100755 index 00000000..d9376ea4 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image011.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image012.png b/src/views/teach/curricula/litmath/images/letters1/image012.png new file mode 100755 index 00000000..38ae4a01 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image012.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image013.png b/src/views/teach/curricula/litmath/images/letters1/image013.png new file mode 100755 index 00000000..740b0bc5 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image013.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image014.png b/src/views/teach/curricula/litmath/images/letters1/image014.png new file mode 100755 index 00000000..6eeab03d Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image014.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image015.png b/src/views/teach/curricula/litmath/images/letters1/image015.png new file mode 100755 index 00000000..36611d3e Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image015.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image016.png b/src/views/teach/curricula/litmath/images/letters1/image016.png new file mode 100755 index 00000000..e9426c18 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image016.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image017.png b/src/views/teach/curricula/litmath/images/letters1/image017.png new file mode 100755 index 00000000..a644865c Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image017.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image018.png b/src/views/teach/curricula/litmath/images/letters1/image018.png new file mode 100755 index 00000000..44b87de9 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image018.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image019.png b/src/views/teach/curricula/litmath/images/letters1/image019.png new file mode 100755 index 00000000..f73d6fca Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image019.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image020.png b/src/views/teach/curricula/litmath/images/letters1/image020.png new file mode 100755 index 00000000..6c5b0d4e Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image020.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image021.png b/src/views/teach/curricula/litmath/images/letters1/image021.png new file mode 100755 index 00000000..4ab9c7aa Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image021.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image022.png b/src/views/teach/curricula/litmath/images/letters1/image022.png new file mode 100755 index 00000000..af12c994 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image022.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image023.png b/src/views/teach/curricula/litmath/images/letters1/image023.png new file mode 100755 index 00000000..c9b23b57 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image023.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image024.png b/src/views/teach/curricula/litmath/images/letters1/image024.png new file mode 100755 index 00000000..b0b0934d Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image024.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image025.png b/src/views/teach/curricula/litmath/images/letters1/image025.png new file mode 100755 index 00000000..1beffb11 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image025.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image026.png b/src/views/teach/curricula/litmath/images/letters1/image026.png new file mode 100755 index 00000000..676438c6 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image026.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image027.png b/src/views/teach/curricula/litmath/images/letters1/image027.png new file mode 100755 index 00000000..37cb055a Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image027.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image028.png b/src/views/teach/curricula/litmath/images/letters1/image028.png new file mode 100755 index 00000000..cf67a68d Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image028.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image029.png b/src/views/teach/curricula/litmath/images/letters1/image029.png new file mode 100755 index 00000000..6148b1ff Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image029.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image030.png b/src/views/teach/curricula/litmath/images/letters1/image030.png new file mode 100755 index 00000000..e6eecded Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image030.png differ diff --git a/src/views/teach/curricula/litmath/images/letters1/image16.png b/src/views/teach/curricula/litmath/images/letters1/image16.png new file mode 100755 index 00000000..ee4e8cb7 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters1/image16.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image002.png b/src/views/teach/curricula/litmath/images/letters2/image002.png new file mode 100755 index 00000000..4034a405 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image002.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image004.png b/src/views/teach/curricula/litmath/images/letters2/image004.png new file mode 100755 index 00000000..fc2298a4 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image004.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image006.png b/src/views/teach/curricula/litmath/images/letters2/image006.png new file mode 100755 index 00000000..d6cb15dd Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image006.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image008.png b/src/views/teach/curricula/litmath/images/letters2/image008.png new file mode 100755 index 00000000..740b0bc5 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image008.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image010.png b/src/views/teach/curricula/litmath/images/letters2/image010.png new file mode 100755 index 00000000..9f1f9a6f Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image010.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image012.png b/src/views/teach/curricula/litmath/images/letters2/image012.png new file mode 100755 index 00000000..999be204 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image012.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image014.png b/src/views/teach/curricula/litmath/images/letters2/image014.png new file mode 100755 index 00000000..5a92b8b4 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image014.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image016.png b/src/views/teach/curricula/litmath/images/letters2/image016.png new file mode 100755 index 00000000..4635b4fe Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image016.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image018.png b/src/views/teach/curricula/litmath/images/letters2/image018.png new file mode 100755 index 00000000..61030f6b Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image018.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image020.png b/src/views/teach/curricula/litmath/images/letters2/image020.png new file mode 100755 index 00000000..515c79e1 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image020.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image022.png b/src/views/teach/curricula/litmath/images/letters2/image022.png new file mode 100755 index 00000000..bec507de Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image022.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image024.png b/src/views/teach/curricula/litmath/images/letters2/image024.png new file mode 100755 index 00000000..a644865c Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image024.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image026.png b/src/views/teach/curricula/litmath/images/letters2/image026.png new file mode 100755 index 00000000..aae2dd16 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image026.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image028.png b/src/views/teach/curricula/litmath/images/letters2/image028.png new file mode 100755 index 00000000..7b8d7461 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image028.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image030.png b/src/views/teach/curricula/litmath/images/letters2/image030.png new file mode 100755 index 00000000..ed8e1556 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image030.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image032.png b/src/views/teach/curricula/litmath/images/letters2/image032.png new file mode 100755 index 00000000..daf58613 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image032.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image034.png b/src/views/teach/curricula/litmath/images/letters2/image034.png new file mode 100755 index 00000000..c51b596d Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image034.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image036.png b/src/views/teach/curricula/litmath/images/letters2/image036.png new file mode 100755 index 00000000..d7070b23 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image036.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image038.png b/src/views/teach/curricula/litmath/images/letters2/image038.png new file mode 100755 index 00000000..8ca3b43d Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image038.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image040.png b/src/views/teach/curricula/litmath/images/letters2/image040.png new file mode 100755 index 00000000..83cdd520 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image040.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image042.png b/src/views/teach/curricula/litmath/images/letters2/image042.png new file mode 100755 index 00000000..30dc9881 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image042.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image044.png b/src/views/teach/curricula/litmath/images/letters2/image044.png new file mode 100755 index 00000000..36772061 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image044.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image046.png b/src/views/teach/curricula/litmath/images/letters2/image046.png new file mode 100755 index 00000000..0a7926c8 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image046.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image048.png b/src/views/teach/curricula/litmath/images/letters2/image048.png new file mode 100755 index 00000000..4af9021d Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image048.png differ diff --git a/src/views/teach/curricula/litmath/images/letters2/image050.png b/src/views/teach/curricula/litmath/images/letters2/image050.png new file mode 100755 index 00000000..f0002ac5 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/letters2/image050.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image001.png b/src/views/teach/curricula/litmath/images/numbers/image001.png new file mode 100755 index 00000000..14d17136 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image001.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image002.png b/src/views/teach/curricula/litmath/images/numbers/image002.png new file mode 100755 index 00000000..65ec4ee8 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image002.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image003.png b/src/views/teach/curricula/litmath/images/numbers/image003.png new file mode 100755 index 00000000..4d858f95 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image003.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image004.png b/src/views/teach/curricula/litmath/images/numbers/image004.png new file mode 100755 index 00000000..d9d1c10a Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image004.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image005.png b/src/views/teach/curricula/litmath/images/numbers/image005.png new file mode 100755 index 00000000..b0135de6 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image005.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image006.png b/src/views/teach/curricula/litmath/images/numbers/image006.png new file mode 100755 index 00000000..ca8a39dc Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image006.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image007.png b/src/views/teach/curricula/litmath/images/numbers/image007.png new file mode 100755 index 00000000..d1fe0184 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image007.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image008.png b/src/views/teach/curricula/litmath/images/numbers/image008.png new file mode 100755 index 00000000..dd128a74 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image008.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image009.png b/src/views/teach/curricula/litmath/images/numbers/image009.png new file mode 100755 index 00000000..d9d1c10a Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image009.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image010.png b/src/views/teach/curricula/litmath/images/numbers/image010.png new file mode 100755 index 00000000..9f04f273 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image010.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image011.png b/src/views/teach/curricula/litmath/images/numbers/image011.png new file mode 100755 index 00000000..e98c0c0e Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image011.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image012.png b/src/views/teach/curricula/litmath/images/numbers/image012.png new file mode 100755 index 00000000..fea4af4d Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image012.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image013.png b/src/views/teach/curricula/litmath/images/numbers/image013.png new file mode 100755 index 00000000..f529711e Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image013.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image014.png b/src/views/teach/curricula/litmath/images/numbers/image014.png new file mode 100755 index 00000000..d8c144b4 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image014.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image015.png b/src/views/teach/curricula/litmath/images/numbers/image015.png new file mode 100755 index 00000000..44c2a974 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image015.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image016.gif b/src/views/teach/curricula/litmath/images/numbers/image016.gif new file mode 100755 index 00000000..7df55669 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image016.gif differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image017.png b/src/views/teach/curricula/litmath/images/numbers/image017.png new file mode 100755 index 00000000..7100db31 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image017.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image018.png b/src/views/teach/curricula/litmath/images/numbers/image018.png new file mode 100755 index 00000000..530ca413 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image018.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image019.png b/src/views/teach/curricula/litmath/images/numbers/image019.png new file mode 100755 index 00000000..675b0def Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image019.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image020.png b/src/views/teach/curricula/litmath/images/numbers/image020.png new file mode 100755 index 00000000..874c57fe Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image020.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image021.png b/src/views/teach/curricula/litmath/images/numbers/image021.png new file mode 100755 index 00000000..dedbe520 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image021.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image022.png b/src/views/teach/curricula/litmath/images/numbers/image022.png new file mode 100755 index 00000000..5972c930 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image022.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image023.png b/src/views/teach/curricula/litmath/images/numbers/image023.png new file mode 100755 index 00000000..a2c22957 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image023.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image024.png b/src/views/teach/curricula/litmath/images/numbers/image024.png new file mode 100755 index 00000000..3c0ef3c3 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image024.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image025.png b/src/views/teach/curricula/litmath/images/numbers/image025.png new file mode 100755 index 00000000..3c848cb4 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image025.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image026.png b/src/views/teach/curricula/litmath/images/numbers/image026.png new file mode 100755 index 00000000..f6450fa7 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image026.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image027.png b/src/views/teach/curricula/litmath/images/numbers/image027.png new file mode 100755 index 00000000..5bc82e6d Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image027.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image028.png b/src/views/teach/curricula/litmath/images/numbers/image028.png new file mode 100755 index 00000000..9ff77069 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image028.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image029.png b/src/views/teach/curricula/litmath/images/numbers/image029.png new file mode 100755 index 00000000..8e305e4a Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image029.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image030.png b/src/views/teach/curricula/litmath/images/numbers/image030.png new file mode 100755 index 00000000..61172cdc Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image030.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image031.png b/src/views/teach/curricula/litmath/images/numbers/image031.png new file mode 100755 index 00000000..3c6a644b Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image031.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image032.png b/src/views/teach/curricula/litmath/images/numbers/image032.png new file mode 100755 index 00000000..c9b71731 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image032.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image033.png b/src/views/teach/curricula/litmath/images/numbers/image033.png new file mode 100755 index 00000000..562a85cf Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image033.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image034.png b/src/views/teach/curricula/litmath/images/numbers/image034.png new file mode 100755 index 00000000..67a40cbd Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image034.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image035.png b/src/views/teach/curricula/litmath/images/numbers/image035.png new file mode 100755 index 00000000..65f6e457 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image035.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image036.png b/src/views/teach/curricula/litmath/images/numbers/image036.png new file mode 100755 index 00000000..0ae93820 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image036.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image037.png b/src/views/teach/curricula/litmath/images/numbers/image037.png new file mode 100755 index 00000000..670648ef Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image037.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image038.png b/src/views/teach/curricula/litmath/images/numbers/image038.png new file mode 100755 index 00000000..c023955e Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image038.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image039.png b/src/views/teach/curricula/litmath/images/numbers/image039.png new file mode 100755 index 00000000..184c572c Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image039.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image040.png b/src/views/teach/curricula/litmath/images/numbers/image040.png new file mode 100755 index 00000000..99ff40f5 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image040.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image041.png b/src/views/teach/curricula/litmath/images/numbers/image041.png new file mode 100755 index 00000000..df4b6195 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image041.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image042.png b/src/views/teach/curricula/litmath/images/numbers/image042.png new file mode 100755 index 00000000..efbc4adb Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image042.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image043.png b/src/views/teach/curricula/litmath/images/numbers/image043.png new file mode 100755 index 00000000..db153e28 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image043.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image044.png b/src/views/teach/curricula/litmath/images/numbers/image044.png new file mode 100755 index 00000000..64595a13 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image044.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image045.png b/src/views/teach/curricula/litmath/images/numbers/image045.png new file mode 100755 index 00000000..c8d3fb2e Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image045.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image046.png b/src/views/teach/curricula/litmath/images/numbers/image046.png new file mode 100755 index 00000000..773a2f72 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image046.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image047.png b/src/views/teach/curricula/litmath/images/numbers/image047.png new file mode 100755 index 00000000..932825ec Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image047.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image048.png b/src/views/teach/curricula/litmath/images/numbers/image048.png new file mode 100755 index 00000000..f5944fec Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image048.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image049.png b/src/views/teach/curricula/litmath/images/numbers/image049.png new file mode 100755 index 00000000..9f616a84 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image049.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image050.png b/src/views/teach/curricula/litmath/images/numbers/image050.png new file mode 100755 index 00000000..258fa1df Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image050.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image051.png b/src/views/teach/curricula/litmath/images/numbers/image051.png new file mode 100755 index 00000000..9439eb0d Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image051.png differ diff --git a/src/views/teach/curricula/litmath/images/numbers/image052.png b/src/views/teach/curricula/litmath/images/numbers/image052.png new file mode 100755 index 00000000..ca8a7a40 Binary files /dev/null and b/src/views/teach/curricula/litmath/images/numbers/image052.png differ diff --git a/src/views/teach/curricula/litmath/letters1.jsx b/src/views/teach/curricula/litmath/letters1.jsx new file mode 100644 index 00000000..0997140f --- /dev/null +++ b/src/views/teach/curricula/litmath/letters1.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import htmlContent from './naming_letters_part1.html'; + +import '../../print.css'; +import '../../../../components/sectionitem/sectionitem.scss'; + +const Letters1Html = () => ( +
    // eslint-disable-line react/no-danger +); + +export default Letters1Html; diff --git a/src/views/teach/curricula/litmath/letters2.jsx b/src/views/teach/curricula/litmath/letters2.jsx new file mode 100644 index 00000000..b76a4265 --- /dev/null +++ b/src/views/teach/curricula/litmath/letters2.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import htmlContent from './naming_letters_part2.html'; + +import '../../print.css'; +import '../../../../components/sectionitem/sectionitem.scss'; + +const Letters2Html = () => ( +
    // eslint-disable-line react/no-danger +); + +export default Letters2Html; diff --git a/src/views/teach/curricula/litmath/naming_letters_part1.html b/src/views/teach/curricula/litmath/naming_letters_part1.html new file mode 100755 index 00000000..01e3e44d --- /dev/null +++ b/src/views/teach/curricula/litmath/naming_letters_part1.html @@ -0,0 +1,338 @@ +
    + +
    + + +
    +
    +

    + Recognizing and Naming + Uppercase and Lowercase Letters +

    + +
    +
    + + +
    +

    Reading Standards: Foundational Skills 1d (Recognize and name upper- and lowercase letters);

    + + +

    Language Standards: Conventions of Standard English 1a (Print upper- and lowercase letters)

    + + +

    +

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    1. Setup: Make a character for an uppercase letter

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    Click on the + in the Character Area

    + + +

    +

    +
    +

    +

    +
    +

    Select the paintbrush

    + + +

    +

    +
    +

    +

    +
    +

    Select a thick line for drawing

    + + +

    +

    +
    +

    +

    +
    +

    Draw a capital “A” (or other letter) with your finger.

    +
    +

    +

    +
    +

    Select the check mark to save and continue

    + + +

    +

    +
    +

    +

    +
    +

    Move the letter over to the right or left of the Stage with your finger so that it’s not overlapping the cat. (Or delete the cat by pressing and holding on the cat + until you see a red “X” and then click on the “X”.)

    +
    +

    +

    +
    +

    Congratulations! You are ready to program your letter.

    +
    +

    +

    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    2. Programming: Have the letter say its name when you click on it.

    + + +

    a. Trigger an action when the letter is touched.

    + + + + + + + + + + + + + + + + + +
    +

    Select the yellow button from the Block Categories area to reveal the “triggering” blocks.

    + + +

    +

    +
    +

    +

    +
    +

    Select the “Start on Tap” block and drag it to the Programming Area.

    + + +

    +

    +
    +

    +

    +
    + + +

    b. Make a recording for the letter to play.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    Select the green button from the Block Categories area to reveal the “sound” blocks.

    + + +

    +

    +
    +

    +

    +
    +

    Select the “record” block

    + + +

    +

    +
    +

    +

    +
    +

    Press the red “record” button to begin recording. Say the name of the letter, in this case, “Capital A.”

    + + +

    +

    +
    +

    +

    +
    +

    Press the “record” button again (or the square “stop” button) to stop recording. To hear your recording, press the triangle “play” + button. If you are satisfied with your recording, press the check to save and exit. If not, press the red record button to re-record.

    + + +

    +

    +
    +

    +

    +
    + + +

    c. Connect the recording to the action block.

    + + + + + + + + + + + + + + + + + +
    +

    Once you have made a recording, you will see an extra green button with a number on a microphone. Drag it to your program area and connect it to the yellow button.

    + + +

    +

    +
    +

    +

    +
    +

    Press on the letter in the stage area to try it out. When you tap the letter, it should play the sound that you recorded for it.

    +
    +

    +

    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    3. Repeat steps 1 and 2 to make a corresponding lowercase letter, and for other uppercase and lowercase letters.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    4. Extension: Animate the letter after it plays its recording.

    + + + + + + + + + + +
    +

    Add blocks from the blue or purple categories to the end of your script. Some possibilities are wiggle, jump, and grow/shrink.

    + + +

    +

    +
    +

    +

    +
    +
    + +
    + +
    + diff --git a/src/views/teach/curricula/litmath/naming_letters_part2.html b/src/views/teach/curricula/litmath/naming_letters_part2.html new file mode 100755 index 00000000..2b005673 --- /dev/null +++ b/src/views/teach/curricula/litmath/naming_letters_part2.html @@ -0,0 +1,261 @@ +
    + +
    + + +
    +
    +

    + Recognizing and Naming + Uppercase and Lowercase Letters + Extended version - Using Messaging +

    + +
    +
    + + +
    + +
    +

    Reading Standards: Foundational Skills 1d (Recognize and name upper- and lowercase letters);

    + + +

    Language Standards: Conventions of Standard English 1a (Print upper- and lowercase letters)

    + + +

    CCSS.ELA-LITERACY.RI.3.8: Logical connection between cause and effect

    + + +

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    1. Setup: Complete the basic version of “Recognizing and Naming Uppercase and Lowercase Letters” including the extension (Step 4) to animate the + letters.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    2. Connect uppercase letter to its corresponding lowercase letter. When the uppercase letter is touched, it will play its recording and do its animations and + then send a message to the lowercase letter. When the lowercase letter receives the message, it will play its recording and do its animations.

    + + +

    a. Send a message from the uppercase letter to the lowercase letter:

    + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    Select the character for one of the uppercase letters so that you can modify its script.

    + + +

    +
    +

    +
    +

    Select the yellow button from the Block Categories area to reveal the “triggering” blocks.

    + + +

    +
    +

    +
    +

    Drag the closed envelope “Send Start Message” block to the Programming Area and snap it into place at the end of the script.

    + + +

    +
    +

    +
    + + +

    b. Have the lowercase letter play its recording and do an animation when it receives the message sent by the uppercase letter.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    Select the character for the corresponding lowercase letter to reveal its script.

    + + +

    +
    +

    +
    +

    Drag the open envelope “Start On Message” block to the Programming Area to start a new script in addition to the one that is already there.

    + + +

    +
    +

    +
    +

    Select the green button from the Block Categories area to reveal the “sound” blocks.

    + + +

    +
    +

    +
    +

    Drag the microphone button with your sound recording to the Programming Area and snap it into place next to the open envelope.

    + + +

    +
    +

    +
    +

    Select the blue button from the Block Categories to reveal the motion blocks.

    + + +

    +
    +

    +
    +

    Add any of the motion blocks to the end of your new script to animate the lowercase letter.

    + + +

    +
    +

    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    3. Repeat step 2 for all pairs of uppercase and lowercase letters.  Make sure to change the color of the message envelope so that each pair is using a + unique color. Because there are 6 possible envelope colors, you may have up to 6 pairs of letters in this project.

    + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    To change the color of the envelope, tap the arrow that is at the bottom of the closed envelope block.

    + + +

    +
    +

    +
    +

    Select a color that you have not yet used.

    + + +

    +
    +

    +
    +

    Make sure the corresponding lowercase letter is looking for the same color envelope.

    + + +

    +
    +

    +
    +
    +
    + +
    + +
    + +
    + \ No newline at end of file diff --git a/src/views/teach/curricula/litmath/numbers.html b/src/views/teach/curricula/litmath/numbers.html new file mode 100755 index 00000000..197c5f80 --- /dev/null +++ b/src/views/teach/curricula/litmath/numbers.html @@ -0,0 +1,663 @@ + +
    +
    + +
    +
    +

    + Counting and Cardinality +

    +
    +
    + +
    +

    CCSS.MATH.CONTENT.K.CC.B.4Counting and Cardinality: Count to Tell the Number of Objects

    + +

    + This project makes a game for guessing how many cats are on the screen. The player will know + whether he or she has tapped on the correct answer by reading the message that appears. +

    + +

    +

    + +

    + These are the steps for making this project: +

      +
    1. + Make multiple cats with the “Stamp” tool in the Paint Editor +
    2. +
    3. + Make numbers for the possible answers +
    4. +
    5. + Make a script for the cats +
    6. +
    7. + Make scripts for the numbers +
    8. +
    9. + Put a title at the top of the screen +
    10. +
    +

    + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + +
    + + +

    1. Setup Part 1: Edit the cat character to include more cats.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    Tap on the paintbrush next to the cat.

    + + +

    + +

    +
    +

    + +

    +
    +

    Select the stamp.

    + + +

    + +

    +
    +

    + +

    +
    +

    Tap on the cat to duplicate it. You will see a second cat on top of the first.

    + + +

    + +

    +
    +

    + +

    +
    +

    Slide the top cat over to the right.

    +
    +

    + +

    +
    +

    Tap on the stamp again to make another cat, and slide the cat over to the left.

    + + +

    + +

    +
    +

    +

    +
    +

    Tap on the check mark to finish editing.

    + + +

    + +

    +
    +

    + +

    +
    +

    Slide the cats over to the left a little bit to make room for the answer choices.

    +
    +

    + +

    +
    + + +

    +

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    +
    + +

    +

    + + +

    2. Setup Part 2: Make characters for the answer choices.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    Click on the + in the Character Area

    + + +

    + +

    +
    +

    + +

    +
    +

    Select the paintbrush

    + + +

    + +

    +
    +

    + +

    +
    +

    Select the free-form drawing tool and a thick line for drawing

    + + +

    + +

    +
    +

    + +

    +
    +

    Draw a number with your finger.

    +
    +

    + +

    +
    +

    Select the check mark to save and continue

    + + +

    + +

    +
    +

    + +

    +
    +

    Repeat to make two more numbers for answer choices.

    +
    +

    + +

    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    3. Program the Cats: Play a recording that asks “How many cats?” when you tap the cats.

    + + +

    a. Trigger an action when the cats are touched.

    + + + + + + + + + + + + + + + + + +
    +

    Select the cats so that you can write a program for them, and select the yellow button to reveal the “triggering” blocks.

    + + +

    + +

    +
    +

    + +

    +
    +

    Select the “Start on Tap” block and drag it to the Programming Area.

    + + +

    + +

    +
    +

    + +

    +
    + + +

    b. Make a recording for the cats to play.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    Select the green button from the Block Categories area to reveal the “sound” blocks.

    + + +

    + +

    +
    +

    + +

    +
    +

    Select the “record” block

    + + +

    + +

    +
    +

    + +

    +
    +

    Press the red “record” button to begin recording. Say “How many cats are there?”

    + + +

    + +

    +
    +

    + +

    +
    +

    Press the “record” button again (or the square “stop” button) to stop recording. To hear your recording, press the triangle “play” + button. If you are satisfied with your recording, press the check to save and exit. If not, press the red record button to re-record.

    + + +

    + +

    +
    +

    + +

    +
    + + + + + + + + + + + + + + + + + +
    +

    c. Connect the recording to the action block.

    + + +

    Once you have made a recording, you will see an extra green button with a number on a microphone. Drag it to your program area and connect it to the yellow button.

    + + +

    + +

    +
    +

    + +

    +
    +

    Press on the cats in the stage area to try it out. When you tap the cats, you should hear the sound that you recorded.

    +
    +

    + +

    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    4. Program the numbers: When the number is tapped, it should indicate whether it’s a correct or incorrect answer.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    Select the purple “looks” category.

    + + +

    + +

    +
    +

    + +

    +
    +

    Select the “Say” block and drag it to the Programming Area.

    +
    +

    + +

    +
    +

    Tap on the white area at the bottom of the “Say” block to change the word from “hi” to “no.”

    + + +

    + +

    +
    +

    + +

    +
    +

    Repeat for the other numbers, and make sure to have the correct answer say “yes”.

    +
    +

    + +

    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    +
    + +

    +

    + + +

    5. Make a title to indicate what to do, in case the user doesn’t tap the cats first.

    + + + + + + + + + + + + + + + + + +
    +

    Tap on the letter icon at the top of the screen to insert a title.

    + + +

    + +

    +
    +

    + +

    +
    +

    Enter the instruction, such as “How many cats?” and then press “Go.”

    +
    +

    + +

    +
    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    6. Extension: Animate the number that is the correct answer.

    + + + + + + + + + + +
    +

    Add blocks from the blue or purple categories to the end of your script. Some possibilities are wiggle, jump, and grow/shrink.

    + + +

    ++ +

    +
    +

    + +

    +
    +
    + +
    +
    +
    diff --git a/src/views/teach/curricula/litmath/numbers.jsx b/src/views/teach/curricula/litmath/numbers.jsx new file mode 100644 index 00000000..b2eacefe --- /dev/null +++ b/src/views/teach/curricula/litmath/numbers.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import htmlContent from './numbers.html'; + +import '../../print.css'; +import '../../../../components/sectionitem/sectionitem.scss'; + +const NumbersHtml = () => ( +
    // eslint-disable-line react/no-danger +); + +export default NumbersHtml; diff --git a/src/views/teach/curricula/litmath/site-specific.css b/src/views/teach/curricula/litmath/site-specific.css new file mode 100755 index 00000000..de80c960 --- /dev/null +++ b/src/views/teach/curricula/litmath/site-specific.css @@ -0,0 +1,24 @@ +.naming_uppercase_and_lowercase_letters_part2 img{ + max-width:70%; + height:auto; +} + +/* */ +.naming_uppercase_and_lowercase_letters_part2 table{ + width:100%; + margin:0 auto; + text-align: center; + page-break-inside:auto; +} + +/* */ +.naming_uppercase_and_lowercase_letters_part2 table td{ + padding:4%; +} + +/* */ +.naming_uppercase_and_lowercase_letters_part2 table tr{ + padding:4%; + page-break-inside:avoid; + page-break-after:auto; +} \ No newline at end of file diff --git a/src/views/teach/curricula/playground.json b/src/views/teach/curricula/playground.json deleted file mode 100644 index 42571018..00000000 --- a/src/views/teach/curricula/playground.json +++ /dev/null @@ -1,50 +0,0 @@ -[ - { - "title": "Lesson 1: Explore the Playground", - "thumbnail": "/images/playground/lesson1.png", - "description": "Use the movement blocks to make the cat travel to all four corners of the ScratchJr stage, and use the reset button to return the cat to its starting position ...", - "linkURL": "/curricula/playground/playground-1.pdf" - }, - { - "title": "Lesson 2: Playground Acrobatics", - "thumbnail": "/images/playground/lesson2.png", - "description": "Learn how to use the 'Start on Green Flag' block, and see what you can do with two scripts that run simultaneously...", - "linkURL": "/curricula/playground/playground-2.pdf" - }, - { - "title": "Lesson 3: Sharks and Minnows", - "thumbnail": "/images/playground/lesson3.png", - "description": "Learn how to use the 'Start on Tap' block...", - "linkURL": "/curricula/playground/playground-3.pdf" - }, - { - "title": "Lesson 4: Dance the Hokey Pokey", - "thumbnail": "/images/playground/lesson4.png", - "description": "Record your own voice, and use the Sound, Speed, and Wait blocks...", - "linkURL": "/curricula/playground/playground-4.pdf" - }, - { - "title": "Lesson 5: Play a Game of Tag", - "thumbnail": "/images/playground/lesson5.png", - "description": "Learn how to use the 'Start on Bump' block...", - "linkURL": "/curricula/playground/playground-5.pdf" - }, - { - "title": "Lesson 6: Monkey in the Middle", - "thumbnail": "/images/playground/lesson6.png", - "description": "Use Message blocks to communicate between characters...", - "linkURL": "/curricula/playground/playground-6.pdf" - }, - { - "title": "Lesson 7: Mini Golf", - "thumbnail": "/images/playground/lesson7.png", - "description": "Learn how to make several scenes for one project...", - "linkURL": "/curricula/playground/playground-7.pdf" - }, - { - "title": "Lesson 8: Free Choice", - "thumbnail": "/images/playground/lesson8.png", - "description": "Learn how to use Paint Editor to make your own characters and backgrounds...", - "linkURL": "/curricula/playground/playground-8.pdf" - } -] diff --git a/src/views/teach/curricula/playground.jsx b/src/views/teach/curricula/playground.jsx index 3d0fdb1e..e7c12667 100644 --- a/src/views/teach/curricula/playground.jsx +++ b/src/views/teach/curricula/playground.jsx @@ -1,31 +1,22 @@ import React from 'react'; -import Section from '../../../components/sectionitem/section.jsx'; -import StaticLinkSectionItem from '../../../components/sectionitem/staticlinksectionitem.jsx'; -import activities from './playground.json'; +import {Route, Switch} from 'react-router-dom'; +import ReactRouterPropTypes from 'react-router-prop-types'; -const Playground = () => ( -
    -
    - This curriculum provides an introduction to ScratchJr by re-creating - familiar children's games using the ScratchJr characters and programming blocks. - - [Download all lessons as one file] - -
    -
    - {activities.map((activity, index) => ( - - ))} -
    -
    +import PlaygroundHtml from './playground/full.jsx'; +import PlaygroundHome from './playground/home.jsx'; + +const PlaygroundSection = ({match}) => ( +
    + + + + +
    ); -export default Playground; +PlaygroundSection.propTypes = { + match: ReactRouterPropTypes.match.isRequired +}; +export default PlaygroundSection; diff --git a/src/views/teach/curricula/playground/full.jsx b/src/views/teach/curricula/playground/full.jsx new file mode 100644 index 00000000..61dbcd60 --- /dev/null +++ b/src/views/teach/curricula/playground/full.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import htmlContent from './playground_games.html'; +import ReactRouterPropTypes from 'react-router-prop-types'; +import {ScrollIntoView} from 'rrc'; + +import '../../print.css'; +import '../../../../components/sectionitem/sectionitem.scss'; + +const PlaygroundHtml = ({location}) => ( + + {/* eslint-disable react/no-danger */} +
    + {/* eslint-enable react/no-danger */} + +); +PlaygroundHtml.propTypes = { + location: ReactRouterPropTypes.location.isRequired +}; +export default PlaygroundHtml; diff --git a/src/views/teach/curricula/playground/home.jsx b/src/views/teach/curricula/playground/home.jsx new file mode 100644 index 00000000..99b2d136 --- /dev/null +++ b/src/views/teach/curricula/playground/home.jsx @@ -0,0 +1,99 @@ +import React from 'react'; +import ReactRouterPropTypes from 'react-router-prop-types'; +import {Link} from 'react-router-dom'; +import Section from '../../../../components/sectionitem/section.jsx'; +import LinkedSectionItem from '../../../../components/sectionitem/linkedsectionitem.jsx'; + + +const PlaygroundHome = ({match}) => ( +
    +
    + This curriculum provides an introduction to ScratchJr by re-creating + familiar children's games using the ScratchJr characters and programming + blocks. View all lessons as one page (printable) +
    +
    + + Use the movement blocks to make the cat travel to all four corners of the ScratchJr stage, + and use the reset button to return the cat to its starting position ... + + + Learn how to use the 'Start on Green Flag' block, and see what you can do with two + scripts that run simultaneously... + + + Learn how to use the 'Start on Tap' block... + + + Record your own voice, and use the Sound, Speed, and Wait blocks... + + + Learn how to use the 'Start on Bump' block... + + + Use Message blocks to communicate between characters... + + + Learn how to make several scenes for one project... + + + Learn how to use Paint Editor to make your own characters and backgrounds... + +
    +
    +); +PlaygroundHome.propTypes = { + match: ReactRouterPropTypes.match.isRequired +}; +export default PlaygroundHome; diff --git a/src/views/teach/curricula/playground/images/image001.png b/src/views/teach/curricula/playground/images/image001.png new file mode 100755 index 00000000..b51ebff1 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image001.png differ diff --git a/src/views/teach/curricula/playground/images/image002.gif b/src/views/teach/curricula/playground/images/image002.gif new file mode 100755 index 00000000..dbf1fcec Binary files /dev/null and b/src/views/teach/curricula/playground/images/image002.gif differ diff --git a/src/views/teach/curricula/playground/images/image003.png b/src/views/teach/curricula/playground/images/image003.png new file mode 100755 index 00000000..e7539d5b Binary files /dev/null and b/src/views/teach/curricula/playground/images/image003.png differ diff --git a/src/views/teach/curricula/playground/images/image004.gif b/src/views/teach/curricula/playground/images/image004.gif new file mode 100755 index 00000000..c2fbecb1 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image004.gif differ diff --git a/src/views/teach/curricula/playground/images/image005.png b/src/views/teach/curricula/playground/images/image005.png new file mode 100755 index 00000000..71796d9a Binary files /dev/null and b/src/views/teach/curricula/playground/images/image005.png differ diff --git a/src/views/teach/curricula/playground/images/image006.gif b/src/views/teach/curricula/playground/images/image006.gif new file mode 100755 index 00000000..611d7d06 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image006.gif differ diff --git a/src/views/teach/curricula/playground/images/image007.png b/src/views/teach/curricula/playground/images/image007.png new file mode 100755 index 00000000..c0a2cab2 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image007.png differ diff --git a/src/views/teach/curricula/playground/images/image008.gif b/src/views/teach/curricula/playground/images/image008.gif new file mode 100755 index 00000000..54108bfa Binary files /dev/null and b/src/views/teach/curricula/playground/images/image008.gif differ diff --git a/src/views/teach/curricula/playground/images/image009.png b/src/views/teach/curricula/playground/images/image009.png new file mode 100755 index 00000000..8d8b445b Binary files /dev/null and b/src/views/teach/curricula/playground/images/image009.png differ diff --git a/src/views/teach/curricula/playground/images/image010.gif b/src/views/teach/curricula/playground/images/image010.gif new file mode 100755 index 00000000..3b5818f4 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image010.gif differ diff --git a/src/views/teach/curricula/playground/images/image011.png b/src/views/teach/curricula/playground/images/image011.png new file mode 100755 index 00000000..6a737626 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image011.png differ diff --git a/src/views/teach/curricula/playground/images/image012.gif b/src/views/teach/curricula/playground/images/image012.gif new file mode 100755 index 00000000..73005d24 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image012.gif differ diff --git a/src/views/teach/curricula/playground/images/image013.png b/src/views/teach/curricula/playground/images/image013.png new file mode 100755 index 00000000..5624be80 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image013.png differ diff --git a/src/views/teach/curricula/playground/images/image014.gif b/src/views/teach/curricula/playground/images/image014.gif new file mode 100755 index 00000000..493761fd Binary files /dev/null and b/src/views/teach/curricula/playground/images/image014.gif differ diff --git a/src/views/teach/curricula/playground/images/image015.png b/src/views/teach/curricula/playground/images/image015.png new file mode 100755 index 00000000..9d3b1c47 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image015.png differ diff --git a/src/views/teach/curricula/playground/images/image016.gif b/src/views/teach/curricula/playground/images/image016.gif new file mode 100755 index 00000000..6d408e2d Binary files /dev/null and b/src/views/teach/curricula/playground/images/image016.gif differ diff --git a/src/views/teach/curricula/playground/images/image017.png b/src/views/teach/curricula/playground/images/image017.png new file mode 100755 index 00000000..ab1127d3 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image017.png differ diff --git a/src/views/teach/curricula/playground/images/image018.gif b/src/views/teach/curricula/playground/images/image018.gif new file mode 100755 index 00000000..c09967c6 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image018.gif differ diff --git a/src/views/teach/curricula/playground/images/image019.png b/src/views/teach/curricula/playground/images/image019.png new file mode 100755 index 00000000..6d22f44c Binary files /dev/null and b/src/views/teach/curricula/playground/images/image019.png differ diff --git a/src/views/teach/curricula/playground/images/image020.gif b/src/views/teach/curricula/playground/images/image020.gif new file mode 100755 index 00000000..58f933f1 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image020.gif differ diff --git a/src/views/teach/curricula/playground/images/image021.png b/src/views/teach/curricula/playground/images/image021.png new file mode 100755 index 00000000..4e68fb17 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image021.png differ diff --git a/src/views/teach/curricula/playground/images/image022.gif b/src/views/teach/curricula/playground/images/image022.gif new file mode 100755 index 00000000..6ed78d23 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image022.gif differ diff --git a/src/views/teach/curricula/playground/images/image023.png b/src/views/teach/curricula/playground/images/image023.png new file mode 100755 index 00000000..a5022c0b Binary files /dev/null and b/src/views/teach/curricula/playground/images/image023.png differ diff --git a/src/views/teach/curricula/playground/images/image024.gif b/src/views/teach/curricula/playground/images/image024.gif new file mode 100755 index 00000000..e580014f Binary files /dev/null and b/src/views/teach/curricula/playground/images/image024.gif differ diff --git a/src/views/teach/curricula/playground/images/image025.png b/src/views/teach/curricula/playground/images/image025.png new file mode 100755 index 00000000..c88195bf Binary files /dev/null and b/src/views/teach/curricula/playground/images/image025.png differ diff --git a/src/views/teach/curricula/playground/images/image026.gif b/src/views/teach/curricula/playground/images/image026.gif new file mode 100755 index 00000000..e08bf618 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image026.gif differ diff --git a/src/views/teach/curricula/playground/images/image027.png b/src/views/teach/curricula/playground/images/image027.png new file mode 100755 index 00000000..b8de7574 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image027.png differ diff --git a/src/views/teach/curricula/playground/images/image028.gif b/src/views/teach/curricula/playground/images/image028.gif new file mode 100755 index 00000000..bd23c482 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image028.gif differ diff --git a/src/views/teach/curricula/playground/images/image029.png b/src/views/teach/curricula/playground/images/image029.png new file mode 100755 index 00000000..bbfe2ac7 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image029.png differ diff --git a/src/views/teach/curricula/playground/images/image030.gif b/src/views/teach/curricula/playground/images/image030.gif new file mode 100755 index 00000000..b9df6f84 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image030.gif differ diff --git a/src/views/teach/curricula/playground/images/image031.png b/src/views/teach/curricula/playground/images/image031.png new file mode 100755 index 00000000..5c1a1446 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image031.png differ diff --git a/src/views/teach/curricula/playground/images/image032.gif b/src/views/teach/curricula/playground/images/image032.gif new file mode 100755 index 00000000..fb835b69 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image032.gif differ diff --git a/src/views/teach/curricula/playground/images/image033.png b/src/views/teach/curricula/playground/images/image033.png new file mode 100755 index 00000000..8c4f4e17 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image033.png differ diff --git a/src/views/teach/curricula/playground/images/image034.gif b/src/views/teach/curricula/playground/images/image034.gif new file mode 100755 index 00000000..c5b6aa53 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image034.gif differ diff --git a/src/views/teach/curricula/playground/images/image035.png b/src/views/teach/curricula/playground/images/image035.png new file mode 100755 index 00000000..4a5d7dbd Binary files /dev/null and b/src/views/teach/curricula/playground/images/image035.png differ diff --git a/src/views/teach/curricula/playground/images/image036.gif b/src/views/teach/curricula/playground/images/image036.gif new file mode 100755 index 00000000..7818c165 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image036.gif differ diff --git a/src/views/teach/curricula/playground/images/image037.png b/src/views/teach/curricula/playground/images/image037.png new file mode 100755 index 00000000..3e1f1f5b Binary files /dev/null and b/src/views/teach/curricula/playground/images/image037.png differ diff --git a/src/views/teach/curricula/playground/images/image038.gif b/src/views/teach/curricula/playground/images/image038.gif new file mode 100755 index 00000000..bc386fed Binary files /dev/null and b/src/views/teach/curricula/playground/images/image038.gif differ diff --git a/src/views/teach/curricula/playground/images/image039.png b/src/views/teach/curricula/playground/images/image039.png new file mode 100755 index 00000000..39f6832b Binary files /dev/null and b/src/views/teach/curricula/playground/images/image039.png differ diff --git a/src/views/teach/curricula/playground/images/image040.gif b/src/views/teach/curricula/playground/images/image040.gif new file mode 100755 index 00000000..1a501668 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image040.gif differ diff --git a/src/views/teach/curricula/playground/images/image041.png b/src/views/teach/curricula/playground/images/image041.png new file mode 100755 index 00000000..0de27ac0 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image041.png differ diff --git a/src/views/teach/curricula/playground/images/image042.gif b/src/views/teach/curricula/playground/images/image042.gif new file mode 100755 index 00000000..72eadd56 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image042.gif differ diff --git a/src/views/teach/curricula/playground/images/image043.png b/src/views/teach/curricula/playground/images/image043.png new file mode 100755 index 00000000..6d62841b Binary files /dev/null and b/src/views/teach/curricula/playground/images/image043.png differ diff --git a/src/views/teach/curricula/playground/images/image044.gif b/src/views/teach/curricula/playground/images/image044.gif new file mode 100755 index 00000000..56029332 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image044.gif differ diff --git a/src/views/teach/curricula/playground/images/image045.png b/src/views/teach/curricula/playground/images/image045.png new file mode 100755 index 00000000..73b47e9e Binary files /dev/null and b/src/views/teach/curricula/playground/images/image045.png differ diff --git a/src/views/teach/curricula/playground/images/image046.gif b/src/views/teach/curricula/playground/images/image046.gif new file mode 100755 index 00000000..08d10213 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image046.gif differ diff --git a/src/views/teach/curricula/playground/images/image047.png b/src/views/teach/curricula/playground/images/image047.png new file mode 100755 index 00000000..93a0b444 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image047.png differ diff --git a/src/views/teach/curricula/playground/images/image048.gif b/src/views/teach/curricula/playground/images/image048.gif new file mode 100755 index 00000000..034c4591 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image048.gif differ diff --git a/src/views/teach/curricula/playground/images/image049.png b/src/views/teach/curricula/playground/images/image049.png new file mode 100755 index 00000000..208be6be Binary files /dev/null and b/src/views/teach/curricula/playground/images/image049.png differ diff --git a/src/views/teach/curricula/playground/images/image050.gif b/src/views/teach/curricula/playground/images/image050.gif new file mode 100755 index 00000000..1be02d1d Binary files /dev/null and b/src/views/teach/curricula/playground/images/image050.gif differ diff --git a/src/views/teach/curricula/playground/images/image051.png b/src/views/teach/curricula/playground/images/image051.png new file mode 100755 index 00000000..667bd758 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image051.png differ diff --git a/src/views/teach/curricula/playground/images/image052.gif b/src/views/teach/curricula/playground/images/image052.gif new file mode 100755 index 00000000..9a876560 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image052.gif differ diff --git a/src/views/teach/curricula/playground/images/image053.png b/src/views/teach/curricula/playground/images/image053.png new file mode 100755 index 00000000..c7aba365 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image053.png differ diff --git a/src/views/teach/curricula/playground/images/image054.gif b/src/views/teach/curricula/playground/images/image054.gif new file mode 100755 index 00000000..2fc46549 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image054.gif differ diff --git a/src/views/teach/curricula/playground/images/image055.png b/src/views/teach/curricula/playground/images/image055.png new file mode 100755 index 00000000..75820a6f Binary files /dev/null and b/src/views/teach/curricula/playground/images/image055.png differ diff --git a/src/views/teach/curricula/playground/images/image056.gif b/src/views/teach/curricula/playground/images/image056.gif new file mode 100755 index 00000000..551372cd Binary files /dev/null and b/src/views/teach/curricula/playground/images/image056.gif differ diff --git a/src/views/teach/curricula/playground/images/image057.png b/src/views/teach/curricula/playground/images/image057.png new file mode 100755 index 00000000..6d87534a Binary files /dev/null and b/src/views/teach/curricula/playground/images/image057.png differ diff --git a/src/views/teach/curricula/playground/images/image058.gif b/src/views/teach/curricula/playground/images/image058.gif new file mode 100755 index 00000000..f7061e2d Binary files /dev/null and b/src/views/teach/curricula/playground/images/image058.gif differ diff --git a/src/views/teach/curricula/playground/images/image059.png b/src/views/teach/curricula/playground/images/image059.png new file mode 100755 index 00000000..6f4cbf63 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image059.png differ diff --git a/src/views/teach/curricula/playground/images/image060.gif b/src/views/teach/curricula/playground/images/image060.gif new file mode 100755 index 00000000..0b5b1a55 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image060.gif differ diff --git a/src/views/teach/curricula/playground/images/image061.png b/src/views/teach/curricula/playground/images/image061.png new file mode 100755 index 00000000..d68df67a Binary files /dev/null and b/src/views/teach/curricula/playground/images/image061.png differ diff --git a/src/views/teach/curricula/playground/images/image062.gif b/src/views/teach/curricula/playground/images/image062.gif new file mode 100755 index 00000000..fa4c8b68 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image062.gif differ diff --git a/src/views/teach/curricula/playground/images/image063.png b/src/views/teach/curricula/playground/images/image063.png new file mode 100755 index 00000000..21715e39 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image063.png differ diff --git a/src/views/teach/curricula/playground/images/image064.gif b/src/views/teach/curricula/playground/images/image064.gif new file mode 100755 index 00000000..34b408ef Binary files /dev/null and b/src/views/teach/curricula/playground/images/image064.gif differ diff --git a/src/views/teach/curricula/playground/images/image065.png b/src/views/teach/curricula/playground/images/image065.png new file mode 100755 index 00000000..94e6ffe4 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image065.png differ diff --git a/src/views/teach/curricula/playground/images/image066.gif b/src/views/teach/curricula/playground/images/image066.gif new file mode 100755 index 00000000..4dd227c0 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image066.gif differ diff --git a/src/views/teach/curricula/playground/images/image067.png b/src/views/teach/curricula/playground/images/image067.png new file mode 100755 index 00000000..e727a74f Binary files /dev/null and b/src/views/teach/curricula/playground/images/image067.png differ diff --git a/src/views/teach/curricula/playground/images/image068.gif b/src/views/teach/curricula/playground/images/image068.gif new file mode 100755 index 00000000..eacc40d4 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image068.gif differ diff --git a/src/views/teach/curricula/playground/images/image069.png b/src/views/teach/curricula/playground/images/image069.png new file mode 100755 index 00000000..87a09132 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image069.png differ diff --git a/src/views/teach/curricula/playground/images/image070.gif b/src/views/teach/curricula/playground/images/image070.gif new file mode 100755 index 00000000..def6e85d Binary files /dev/null and b/src/views/teach/curricula/playground/images/image070.gif differ diff --git a/src/views/teach/curricula/playground/images/image071.png b/src/views/teach/curricula/playground/images/image071.png new file mode 100755 index 00000000..611b1de6 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image071.png differ diff --git a/src/views/teach/curricula/playground/images/image072.gif b/src/views/teach/curricula/playground/images/image072.gif new file mode 100755 index 00000000..8d33aa62 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image072.gif differ diff --git a/src/views/teach/curricula/playground/images/image073.png b/src/views/teach/curricula/playground/images/image073.png new file mode 100755 index 00000000..5ca632e3 Binary files /dev/null and b/src/views/teach/curricula/playground/images/image073.png differ diff --git a/src/views/teach/curricula/playground/images/image074.png b/src/views/teach/curricula/playground/images/image074.png new file mode 100755 index 00000000..5d64b4af Binary files /dev/null and b/src/views/teach/curricula/playground/images/image074.png differ diff --git a/src/views/teach/curricula/playground/images/image075.png b/src/views/teach/curricula/playground/images/image075.png new file mode 100755 index 00000000..e006d6fc Binary files /dev/null and b/src/views/teach/curricula/playground/images/image075.png differ diff --git a/src/views/teach/curricula/playground/playground_games.html b/src/views/teach/curricula/playground/playground_games.html new file mode 100755 index 00000000..3ad8c3de --- /dev/null +++ b/src/views/teach/curricula/playground/playground_games.html @@ -0,0 +1,885 @@ +
    +
    + +
    +
    +

    + Learning ScratchJr via Playground Games +

    +
    +
    + + +
    +
    +
    +

    Goal +

    + +

    This goal of this curriculum is to familiarize students with the ScratchJr programming language. The curriculum consists of eight sessions of 45 minutes each. For each + session, the teacher will show the students certain features of ScratchJr and then the students will create a specific playground game (such as tag) using those features. + Students who finish early in each session are encouraged to explore other features of ScratchJr. You will need one iPad per student, preloaded with ScratchJr, for these + sessions.

    + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    Summary +

    + + +

    Lesson 1: Movement Blocks and the Reset Button

    + + +

    Game: Cat explores playground by traveling to all 4 corners

    + + +

    Lesson 2: Backgrounds and Start on Green Flag Triggering Block

    + + +

    Game: Cartwheel, Diagonal Walking, Hop on Stepping Stones

    + + +

    Lesson 3: New Characters and Start on Tap Triggering Block

    + + +

    Game: Sharks and Minnows

    + + +

    Lesson 4: Recording Sound, and Using the Wait Block and the Speed Block

    + + +

    Game: Hokey Pokey

    + + +

    Lesson 5: Simple Character Interaction using Start on Bump

    + + +

    Game: Tag

    + + +

    Lesson 6: More Character Interaction using Message Trigger and Stop Block

    + + +

    Game: Fishy Fishy Cross My Ocean, Monkey in the Middle, revised Sharks and Minnows, revised Tag

    + + +

    Lesson 7: New Pages

    + + +

    Game: Miniature Golf, revised Monkey in the Middle

    + + +

    Lesson 8: The Paint Editor

    + + +

    Game: Free Choice (program any playground game they want).

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    +
    + +

    Lesson 1: Movement Blocks and the Reset Button +

    + + +

    In this lesson, students will learn how to use the ScratchJr interface and they will write a simple program to make the cat travel to all four corners of the stage (the white + area in the center of the screen). In the process, they will get a sense of the scale of the ScratchJr stage in terms of how many steps it takes a character to traverse it. They + will also learn that the reset button returns their character to its starting position.

    + + + + + +

    Discussion (5-10 minutes):

    + + +

    What is a programmer? (The person who makes the apps that everyone else plays)

    + + +

    What other iPad Apps have you used? (LetterSchool, MathBlaster, AngryBirds, etc)

    + + +

    How is ScratchJr different from other apps that you have used? (in ScratchJr, you make up the games and the stories)

    + + +

    Note: Students who have used other iPad Apps may be expecting to be told how to “play the game.” It will take a few sessions for students to understand that with + ScratchJr, they make the game, or they tell the story, and it can be any game or any story they choose.

    + +
    + + +

    Mechanics - Using the ScratchJr Interface (5-10 minutes). See “Character Animation Using the ScratchJr Blocks” tutorial video at + ScratchJr.org.

    + +
      +
    1. + From the Home screen: +
        +
      • + Make a new project +
      • +
      +
    2. +
    3. + From the main interface screen: +
        +
      • + Show the Stage +
      • +
      • + Show the Programming Area +
      • +
      • + Show how to drag blocks to the Programming Area +
      • +
      • + Tap on blocks in the Programming Area to show how the cat moves on the stage +
      • +
      • + Show how to change the number on a block to move multiple times +
      • +
      • + Show how to snap blocks together to make a sequence of moves +
      • +
      • + Show how to return the character to its starting position with either the blue movement block or the Reset button above the stage. This is important because the students will need to reset their character’s position after each attempt at figuring out the programming challenge. +
      • + +
      +
    4. +
    + + +

    Self-directed work (20 minutes):

    + + +

    Using the blue movement blocks, make the cat travel to all four corners of the stage.

    + + +

    If you want a story to go with the activity, you could say that the cat is new to the playground and wants to look all around by visiting all four corners.

    + + +

    Make sure students know how to press the reset button to return the cat to its starting position when running the script multiple times (or put a reset block at the end of + the script).

    + + +

    Students who complete the task may explore other areas of ScratchJr on their own.

    + + +

    Here is a script that will work for this exercise, if you start the character in the middle of the stage:

    + + +

    + +
    + + + +

    Wrap-up (5-10 minutes):

    + + +

    Ask students who completed the task to show their projects to the class and explain what they did. This works best if you can connect individual ipads to a projector.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    +
    + +

    Lesson 2: Backgrounds and Start on Green Flag Triggering Block +

    + + +

    In this lesson, students will learn how to select a background for their project and how to use the Start on Green Flag triggering block to give starting conditions for their + scripts. They will learn that the Green Flag button will also reset the character’s starting position. They will also learn that scripts can run concurrently.

    + + +

    + + +

    Discussion (5-10 minutes):

    + + +

    If you tap on a script, it will run. But what if you want two scripts to run at the same time? (Notice the green flag at the top of the screen, and the yellow triggering + blocks.)

    + + +

    What can you do with two scripts running at the same time that you can’t do with only one script running?

    + + +

    (Do two separate motions at the same time, such as Move Right and Move Up, which will cause the character to travel in a diagonal line, or move while playing a sound.)

    + + +

    After you run a script, you will probably want your character to return to its starting position so that next time you run the script, the character will do the same thing, + in the same place on the screen. The green flag will do this for you. So will the reset button at the top of the screen and also the blue reset block if you put it at the end or + beginning of a script.

    + +
    + + +

    Mechanics – Backgrounds, Yellow Blocks, and the Green Flag Button (5-10 minutes).

    + + +

    1. Add a background to your project:

    + + +

    · Tap on the Background icon.

    + + +

    · Select the desired background

    + + +

    · Tap the check mark to continue.

    + + +

    2. Review motion blocks:

    + + +

    · Drag some blue blocks to the programming area.

    + + +

    · Snap them together to make a script

    + + +

    · Tap on the script to see the cat move.

    + + +

    · For the “turn right” block, see if students can figure out how many turns will make a full circle (Answer: + 12). They will need this for the cartwheel exercise.

    + + +

    3. Show how to use the Green Flag triggering block:

    + + +

    · Tap on the yellow block to reveal the triggering blocks in the palette.

    + + +

    · Drag the “Start on Flag” block to the programming area and snap it onto the script.

    + + +

    · Tap on the Green Flag at the top of the screen to show how the cat moves.

    + + +

    · Show the difference between tapping on the Green Flag button and tapping on the script in the programming area. (The Green + Flag button will first reset the character to its starting position and then run the script. Tapping on the script will only run the script.)

    + +
    + + +

    Self-directed work (20 minutes):

    + + +

    1. Make the cat walk diagonally. (You will need two scripts for this, each starting with a Green Flag)

    + + +

    2. Have the cat do a cartwheel. (Use the turn block and the forward movement in two different scripts)

    + + +

    3. Using the “Park” background, position the cat on the first stepping stone. See if you can get the cat to hop on the + remaining 3 stepping stones by pressing the green flag only once. (You will need a combination of jump and upward movement blocks in one script, and regular forward movement in + a second script.)

    + + +

    Here are scripts that will work for these exercises.

    + + +

    1. Diagonal walking:

    + + +

    + + +

    2. Cartwheel:

    + + +

    + + +

    3. Hop on stepping stones:

    + + +

    +

    + + +

    Wrap-up (5-10 minutes):

    + + +

    Ask a student who completed a task to show his or her project to the class. Do this for all three tasks.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    +
    + +

    Lesson 3: New Characters and Start on Tap Triggering Block +

    + + +

    In this lesson, students will add multiple characters to their projects and learn how to use the Start on Tap triggering block. They will see how scripts are attached to + characters so that when a character is deleted, the script disappears with the character.

    + + +

    + + +

    Discussion (5-10 minutes):

    + + +

    Compare a staged play to ScratchJr. Each character in a play reads his or her own lines from a script. ScratchJr works in a similar way. A ScratchJr project consists of a + separate set of instructions for each character to follow. Just as characters in a play read only their own lines, characters in a ScratchJr project perform only their own + instructions.

    + +
    + +

    As we learned in the previous lesson, we can trigger action with the Green Flag. If we tap the green flag at the top of the screen, the character will reset its position + before it runs the script. When we have multiple characters, the Green Flag will trigger action in all the characters whose scripts begin with a green flag, all at the same + time. It will also reset the positions of all those characters before running their scripts. When you have multiple characters whose scripts all start with a green flag + triggering block, you can see a big difference between tapping on the green flag in the script area and tapping on the green flag at the top of the screen.

    + + +

    In this lesson we will also trigger action by tapping on the character itself. When we have multiple characters on the screen, tapping on a character will trigger only that + particular character’s script, even if there are other characters with the Start on Tap triggering block. Each of those characters will run their scripts only when we tap + on them individually.

    + + +

    Mechanics (5-10 minutes) –

    + + +

    1. Add a character by tapping the plus sign on the left.

    + + +

    2. Delete a character by long pressing a character (press and hold), either on the stage or in the list of characters.

    + + +

    3. Add scripts to a character. Tap another character in the list and show how those scripts are no longer visible, since each + character has its own scripts.

    + + +

    4. Show how to copy a script from one character to another (drag it from the programming area to the character area).

    + + +

    5. If you work hard on a script and then decide you want to change the character, keep in mind that if you delete the character and + add a new one, you will lose your script as well. To avoid this, you can add the new character that you want, then drag your script to the new character to copy it, and then + delete the character that you don’t want anymore.

    + + +

    6. Show how Start on Tap works. Note: Many children will have difficulty tapping on a character without moving it. They will think + that the script is not working. In fact, if you move a character while trying to tap on it, the script will not run. To get the script to run, you have to tap on a character + without moving it.

    + +
    + +

    Self-directed work (20 minutes):

    + + +

    Create the Sharks and Minnows game, or Fishy Fishy Cross My Ocean, in ScratchJr. You can use the whale character in place of a shark. Make several sharks and one minnow. + Program the sharks to respond to a flag and the minnow to respond to a tap. Notice that you will be able to get multiple sharks to move across the screen with the green flag, + but you will only be able to get one minnow at a time to move with a tap.

    + + +

    Here are scripts that will work for this project:

    + + +

    Minnow script: Shark script:

    + + +

    + + +

    Wrap-up (5-10 minutes):

    + + +

    Ask a few students show their projects to the class. Try to select students who have projects that look different from each other.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    +
    + +

    Lesson 4: Recording Sound, and Using the Wait and Speed Blocks +

    + + +

    In this lesson, students will learn how to record sound and play it back while the character is moving. The students will also attempt to time the character’s movement + to the music.

    + + +

    + +
    + +

    Discussion (5-10 minutes):

    + + +

    The purple Say block will give the character a speech bubble with any text you choose. But pre-literate children will find the green Record block much more useful. You can + record anything you want, and play back in a script.

    + + +

    If you give a character motion as well as sound, both starting on a Green Flag trigger, the motion and sound will happen at the same time.

    + + +

    If you want to time the motion with the sound, you can speed up or slow down the character with the Speed block, and you can use the Wait block to pause between motions to + slow the script down further.

    + + +

    Mechanics (5-10 minutes) –

    + + +

    1. Introduce sound

    + + +

    · Tap on the green button to reveal the sound palette.

    + + +

    · Show how a character can play the “pop” sound.

    + + +

    · Show how to record a new sound.

    + + +

    2. Set up Green Flag triggers

    + + +

    · Give the sound a green flag triggering block.

    + + +

    · Make another script for movement and give it a green triggering block as well.

    + + +

    · Show how the green flag at the top of the screen triggers both the character’s movement and its sound at the same + time.

    + + +

    3. Adjust the timing of the action

    + + +

    · Insert Wait blocks in between the motion blocks to pause the movement.

    + + +

    · Insert a Speed block at the beginning of the script to show how it affects the motion in the entire script.

    + + +
    + +
    + +

    Self-directed work (20 minutes):

    + + +

    Program a character to dance the Hokey Pokey in time to the song. You will have to record yourself singing the song and have it start on a Green Flag. Then make the character + move according to the motions in the song by inserting wait blocks or changing the speed.

    + + +

    Here is a sample script for the hokey pokey. Your pauses may vary from this script, depending on how quickly or slowly you sing the Hokey Pokey in your recording.

    + + +

    + + +

    Wrap-up (5-10 minutes):

    + + +

    Ask a few students show their projects to the class. Try to select students who have successfully timed their character to dance according to the motions in the Hokey Pokey + song.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    Lesson 5: Simple Character Interaction Using Start on Bump +

    + + +

    In this lesson, students will see the simplest way that one character can trigger action for another character.

    + + +

    + + +

    Discussion (5-10 minutes):

    + + +

    Until this lesson, the characters that we have programmed in ScratchJr were independent from each other. That is, one character’s actions had no effect on any other + character. However, when telling a story, it is usually necessary to have characters interact with each other. Since scripts belong to each character separately, it is not + possible to control a second character from one character’s script. However, it is possible for one character to trigger another character’s script. There are several + blocks in the yellow Triggering Blocks palette to use for this. The simplest of them is Start on Bump.

    + +
    + +

    Start on Bump will start a character’s script only when another character on the stage runs into it. Any character can trigger the script. With Start on Bump, it is not + possible to specify which character will trigger the script.

    + + +

    Note the difference between Start on Bump and Start on Tap. Only a real human person can trigger a script that starts with a Start on Tap block, and only a ScratchJr character + can trigger a script that starts with a Start on Bump block.

    + + +

    Mechanics (5 minutes) –

    + + +

    1. Add a new character

    + + +

    2. Have one character start moving with the Flag trigger.

    + + +

    3. Make the second character move or do another action with the Start on Tap trigger. (When the first character reaches the second + character, the second character will start moving.)

    + + +

    Self-directed work (20 minutes):

    + + +

    Create a tag game, where a character will say that it’s tagged when another character runs into it (you can use the green Sound block for this, or the purple Say + block).

    + +
    + +

    Here are scripts that will work for this project:

    + + +

    + + +

    + + +

    Wrap-up (5-10 minutes):

    + + +

    Ask a few students show their projects to the class. Try to select students who have projects that look different from each other.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    Lesson 6: Message Trigger and Stop Block +

    + + +

    In this lesson, students will see a more predicable way for one character to trigger action for one or multiple other characters.

    + + +

    OR

    + + +

    Discussion (5-10 minutes):

    + + +

    We used the Start on Bump block to have one character trigger action in another character, but that arrangement would trigger action in a character no matter which character + ran into it. If we want a character’s script to be triggered by a specific character, we need to use the message block. The message block is color coded so that the sender + and the receiver need to be referring to the same color.

    + + +

    Because the message block has 6 possible colors, we can make 6 different connections between characters. Thus, we can use the message block for sequential activity across + characters. The first character to act would send a message of one color which the second character to act would be listening for. Then the second character would do its movement + and send a different colored message, which a third character (or the original character, in the case of a conversation or other back and forth sequence across characters) would + be listening for, and so on.

    + + +

    The character that sends the message can be thought of as a radio broadcaster. The broadcaster sends its message on a particular color-coded “channel.” If another + character is tuned to the same channel on this imaginary radio, it will hear the message and act on it. But characters that are tuned to different channels (i.e., listening for + messages of another color) will not hear that message at all. Instead, they will only hear broadcasts for the color “channels” that they are listening to. A character + can send and listen for messages of multiple colors.

    + + +

    Mechanics (5 minutes):

    + + +

    When you want a character to trigger action for another character, put a Send Start Message block in its script and select a color. Then, in the script of the other character + or characters, put a Start on Message triggering block. Make sure the color matches the color that was sent. Show how the stop block works so that students can stop the action + once a character is caught.

    + +
    + +

    Self-directed work (20 minutes):

    + + +

    Option 1 +

    + + +

    Redo the Sharks and Minnows game as follows:

    + + +

    1. Add more minnows and give them a Start on Message trigger of one color. Give all minnows the same color message trigger + block.

    + + +

    2. Change the trigger block of the existing sharks from Start on Flag to Start on Message, and pick a different color message block + for them that what you picked for the minnows. Give all sharks the same color message trigger block.

    + + +

    3. Add a character (other than a shark or a minnow) to call the sharks and minnows by sending a message of the color that the + minnows and then the sharks are listening for (or vice versa).

    + + +

    Here are scripts that will work for this project:

    + + +

    +

    + + +

    +

    + + +

    +

    + +
    + +

    Option 2 +

    + + +

    Make a game of Monkey in the Middle. You will need a ball and 3 other characters. Two characters will be tossing the ball to each other, and when the third character catches + the ball, the game stops. Students will need to know how the Stop block works for this project.

    + + +

    Here are sample scripts for that game.

    + + +

    1. Throwing/catching characters:

    + + +

    + + +

    2. Middle character

    + + +

    + + +

    3. Ball

    + + +

    + + +

    Wrap-up (5-10 minutes):

    + + +

    Ask a few students show their projects to the class.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    Lesson 7: New Pages +

    + + +

    In this lesson, students will learn how to make new pages for their ScratchJr stories. This feature is useful for projects that have multiple scenes. Each page has its own + background, characters, and scripts.

    + + +

        

    + + +

    Discussion (5-10 minutes):

    + + +

    Think of a storybook with multiple pages. If a character goes from home to school, one page might show the character in his or her bedroom at home, and the next page might + show the character in his or her classroom at school. Or, if you want the characters to move to a new position on the same background without seeing the intermediate movement, + you can switch to a new page.

    + + +

    You could also go to a second page to make it seem as if a character in your story appeared or disappeared at once. You could use the Appear and Disappear blocks for this. + These blocks will work well in some cases, such as when a caterpillar turns into a butterfly, or when a frog turns into a prince. But if you want several characters to appear or + disappear at the same time, you will need to switch to a different scene.

    + + +

    Mechanics

    + + +

    1. Making a New Page and Adding or Copying Characters to it (5-10 minutes):

    + + +

    · Tap on the plus sign on the right hand side of the screen to make a new page.

    + + +

    · Go back to the previous page and drag existing characters to the new page to copy them.

    + + +

    · Tap on the new page to select it, and add additional characters.

    + + +

    · Switch to a new page in a program with the dedicated red end block.

    + + +

    · Reorder pages by dragging them to another position in the sequence of pages.

    + +
    + +

    2. Edit a character to draw a golf club

    + + +

    · Tap the paintbrush on the cat character to get to the paint editor.

    + + +

    · Select the line drawing tool and draw the golf club in the cat’s hand.

    + + +

    Self-Directed Work (20 minutes):

    + + +

    Make a game of miniature golf, where each page is a new challenge in the course.

    + + +

    Or, continue the game of Monkey in the Middle or Sharks and Minnows by showing on a second page how the characters change places when one of the players from the first page is + caught or catches the ball. In the Monkey in the Middle game, you could add branching by going to two different pages, depending on which of the side characters threw the ball + when it was caught.

    + + +

    Here are scripts that will work for the mini-golf project.

    + + +

    The cat script gets copied to every page:

    + + +

    + + +

    The script for the ball is different on each page, depending on where you want the ball to travel.

    + + +

    On the moon background, we wanted the ball to go into a crater:

    + + +

    + +
    + +

    On the beach background, we wanted the ball to bounce off the surfboard and land at its base:

    + + +

    + + +

    On the orchard background, we wanted the ball to bounce off a few trees and the barn:

    + + +

    + + +

    And finally, on the jungle background, we wanted to ball to travel on the upper vine and then hit the mushroom and fall down to the vine below:

    + +
    + +

    + + +

    Wrap-up (5-10 minutes):

    + + +

    Ask students who completed 3 or 4 pages to show their projects to the class and explain what they did. See if anyone changed the order of their pages and ask them to explain + why and how they did that.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    + + +

    +

    + + +

    Lesson 8: The Paint Editor +

    + + +

    ScratchJr incorporates an extremely powerful paint editor. We used it briefly in the previous lesson, and your students probably discovered it way before that. This lesson + covers the less obvious features of the paint editor.

    + + +

    Discussion (1 minute):

    + + +

    ScratchJr provides a set of characters and backgrounds for your stories, but it is likely that you have a story to tell that uses different characters and backgrounds. In this + case, you will need the paint editor.

    + + +

    Mechanics (10 minutes):

    + + +

    1. Tap on a brush icon to get to the paint editor. Depending on where the brush is when you tap it, you may either edit an existing + character or background or create a new character or background.

    + + +

    2. To use the shape tools, drag your finger diagonally on the screen. The place that your finger first lands will be the anchor + point of the shape, and its size will be determined by how far you drag.

    + + +

    3. The undo and redo buttons will step through any number of increments to your drawing.

    + + +

    4. Use the paint bucket tool to fill in your shapes with a solid color. Select the paint bucket and a color, and then select the + shape you want to fill.

    + + +

    5. Use the scissors tool to delete shapes from your drawing. Select the scissors and then select the shape you want to delete.

    + + +

    6. Use the rubber stamp tool to copy a shape. When you tap on the rubber stamp and then tap on a shape, you will get a movable + duplicate of the shape, on top of the original shape, offset just a bit.

    + + +

    7. You can move any shape by selecting the arrow and then dragging a shape.

    + + +

    8. You can change an existing shape with the arrow tool as well. After you select the arrow, if you tap on a shape instead of + dragging it, you will see white circles at juncture points in your shape’s outline. You can drag these circles to change your shape.

    + + +

    9. The rotate tool will rotate a shape on its axis. Select the rotate tool and then select a shape. Drag your finger in a circle + until you reach the desired position for your shape.

    + +
    + +

    10. And finally, everyone’s favorite tool: the camera. Select the camera tool and then select a shape that the camera will + fill. Whatever photo you then take with the camera will be cropped into the shape. For this reason, the ScratchJr character library includes a set of characters with blank faces. + To put your face into those characters you need to edit the character and select the blank face as the shape for the camera to fill.

    + + +

    Self-Directed Work (20-25 minutes):

    + + +

    Make a project of your choice: experiment with the camera; modify an existing character and/or paint a new character; modify an existing background and/or paint a new + background.

    + + +

    Wrap-up (10 minutes):

    + + +

    Most likely, you will be able to choose from a lot of interesting and unique projects for share time.

    + + +

    ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● +

    +
    +
    +
    +
    diff --git a/src/views/teach/print.css b/src/views/teach/print.css new file mode 100644 index 00000000..a08f6b77 --- /dev/null +++ b/src/views/teach/print.css @@ -0,0 +1,198 @@ +/* CSS Document */ + +@media print { + div#footer, div#header, div#content-nav { + display: none; + } + .content-section-items-container { + page-break-after: always; + } + /*.content-section-items-container.mod-page-break-after{ + page-break-after: always; + }*/ + .mod-page-break-after { + page-break-after: always; + } + .content-section-item-description { + display: block; + } + .page-break { + page-break-after: always; + } + .print-br { + display: inline-block; + } + .no-print { + display: none; + } + html footer#print-footer { + display: flex; + position: fixed; + bottom: 0; + } + .txlive-langselector { + display: none; + } +} + +h2 { + /* bold, underline, font-size a little bit bigger*/ + font-weight: bold; + font-size: 200%; + text-align: left; +} + +h3 { + /* bold, underline, font-size a little bit bigger*/ + font-weight: bold; + font-size: 110%; +} + +.inline { + display: inline; +} + +.inline-block { + display: inline-block; +} + +.center { + margin-left: auto; + margin-right: auto; +} + +.left-align { + text-align: left; +} + +.full-extend { + width: 100%; +} + +ul.bullet-list { + list-style-type: disc; +} + +#footer-print { + display: none; +} + +html img.description-img { + width: 60%; + margin-left: auto; + margin-right: auto; +} + +div.print-br { + display: none; +} + +p.dot-separater { + text-align: center; + width: 100%; + color: #21A4DC; + margin: 0 auto; +} + +.animated_genres table ul li { + text-align: left; +} + +.animated_genres table { + width: 100%; + margin: 0 auto; + text-align: center; +} + +.animated_genres table td { + padding: 4%; +} + +/* Adjust large screenshot dimensions*/ +.counting_and_cardinality img.screenshot{ + width:100%; + height:auto; +} + +/* Text of list items within tables are left aligned */ +.counting_and_cardinality table ul li { + text-align: left; +} + +/* */ +.counting_and_cardinality table{ + width:100%; + margin:0 auto; + text-align: center; + page-break-inside:auto; +} + +/* */ +.counting_and_cardinality table td{ + padding:4%; +} + +/* */ +.counting_and_cardinality table tr{ + padding:4%; + page-break-inside:avoid; + page-break-after:auto; +} + +.naming_uppercase_and_lowercase_letters img{ + max-width:70%; + height:auto; +} + +/* */ +.naming_uppercase_and_lowercase_letters table{ + width:100%; + margin:0 auto; + text-align: center; + page-break-inside:auto; +} + +/* */ +.naming_uppercase_and_lowercase_letters table td{ + padding:4%; +} + +/* */ +.naming_uppercase_and_lowercase_letters table tr{ + padding:4%; + page-break-inside:avoid; + page-break-after:auto; +} + +.naming_uppercase_and_lowercase_letters_part2 img{ + max-width:70%; + height:auto; +} + +/* */ +.naming_uppercase_and_lowercase_letters_part2 table{ + width:100%; + margin:0 auto; + text-align: center; + page-break-inside:auto; +} + +/* */ +.naming_uppercase_and_lowercase_letters_part2 table td{ + padding:4%; +} + +/* */ +.naming_uppercase_and_lowercase_letters_part2 table tr{ + padding:4%; + page-break-inside:avoid; + page-break-after:auto; +} + +.student_answer_sheet img{ + width: 70%; +} + +.student_answer_sheet img.small-image{ + width:30%; +} \ No newline at end of file diff --git a/src/views/teach/teach.jsx b/src/views/teach/teach.jsx index a2add4c0..09ada68a 100755 --- a/src/views/teach/teach.jsx +++ b/src/views/teach/teach.jsx @@ -1,6 +1,7 @@ import React from 'react'; import {render} from 'react-dom'; import {BrowserRouter, Redirect, Route, Switch} from 'react-router-dom'; +import ScrollManager from '../../components/scrollmanager/scrollmanager.jsx'; import NavBar from '../../components/navbar/navbar.jsx'; import Footer from '../../components/footer/footer.jsx'; import TabNav from '../../components/tabnav/tabnav.jsx'; @@ -32,33 +33,52 @@ const Teach = () => { ]; return ( -
    - -
    - - - +
    + +
    + + + + + + + + +
    +
    +
    + Creative commons logo - + Created by the Developmental Technologies Research Group at Tufts University
    + This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 + International License. +
    + DevTech logo - - - -
    +
    -
    +
    ); diff --git a/static/images/DevTechLogo.png b/static/images/DevTechLogo.png new file mode 100755 index 00000000..0e4fe7ea Binary files /dev/null and b/static/images/DevTechLogo.png differ diff --git a/static/images/cc-logo.png b/static/images/cc-logo.png new file mode 100755 index 00000000..761203e4 Binary files /dev/null and b/static/images/cc-logo.png differ diff --git a/static/style/site.css b/static/style/site.css index b95736a5..4f9c9b56 100755 --- a/static/style/site.css +++ b/static/style/site.css @@ -64,3 +64,37 @@ img { display: block; } -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +/*Print Footer*/ +/* we expect pages to print will have a print media query to make the footer visible */ +footer#print-footer{ + display: none; + flex-direction: row; + flex-basis: auto; + align-items: center; + justify-content: center; + height: 4%; + width: 100%; + font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; + font-size: 10pt; + color: #333333; +} + +#print-footer .footer-text{ + margin-left: 1%; +} + +img.cc-logo{ + height:90%; + width: auto; + object-fit: contain; + margin: 1%; +} + +img.devtech-logo{ + height: 90%; + width: auto; + margin: 1%; + object-fit: contain; + +} diff --git a/webpack.config.js b/webpack.config.js index e341001f..1f60aed0 100755 --- a/webpack.config.js +++ b/webpack.config.js @@ -35,6 +35,7 @@ module.exports = { loader: 'babel-loader', include: path.resolve(__dirname, 'src'), options: { + plugins: ['transform-object-rest-spread'], presets: ['es2015', 'react'] } }, @@ -70,7 +71,7 @@ module.exports = { }] }, { - test: /\.(png|PNG|jpg|JPG|gif|GIF|eot|svg|ttf|woff)$/, + test: /\.(png|jpg|gif|eot|svg|ttf|woff)$/i, loader: 'url-loader' }, {