diff --git a/package.json b/package.json index d37bf0b2..6a86f4f6 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "express": "4.15.4", "fastly": "2.2.0", "file-loader": "1.0.0", + "html-loader": "0.5.1", "html-webpack-plugin": "2.30.1", "json-loader": "0.5.7", "lodash.defaults": "4.2.0", diff --git a/src/components/navbar/navbar.jsx b/src/components/navbar/navbar.jsx index 9926f121..85f1fada 100755 --- a/src/components/navbar/navbar.jsx +++ b/src/components/navbar/navbar.jsx @@ -48,6 +48,13 @@ export default class NavBar extends React.Component { +
+ +
+ Outreach +
+ +
diff --git a/src/routes.json b/src/routes.json index 6ce369be..c7fb21e3 100755 --- a/src/routes.json +++ b/src/routes.json @@ -33,6 +33,16 @@ "pattern": "^/teach(/.+)*/?", "name": "teach", "title": "Teach" + }, + { + "pattern": "^/outreach\\.html", + "name": "outreach-redirect", + "redirect": "/outreach" + }, + { + "pattern": "^/outreach(/.+)*/?", + "name": "outreach", + "title": "Outreach" }, { "pattern": "^/donate\\.html", diff --git a/src/views/outreach/about.jsx b/src/views/outreach/about.jsx new file mode 100644 index 00000000..a5b032e3 --- /dev/null +++ b/src/views/outreach/about.jsx @@ -0,0 +1,35 @@ +import React from 'react'; + +const AboutSection = () => ( +
+
+ About ScratchJr Family Days +
+
+
+
+ ScratchJr Family Day is a community event where parents, grandparents, siblings, + extended family members, and children can work together to create projects + in ScratchJr! + The goal of Family Day is not only to help adults and children feel more + comfortable using ScratchJr, but also to encourage collaboration between + adults and children while + creating ScratchJr projects. +
+
Who are Family Days intended for?
+
+ This event is for anyone who wants to create a ScratchJr community! + It can be done through schools, museum, after-school programs, + community centers, or anywhere else where + families can come together. Children between the ages of 5-7 as well + as their family members (including siblings or family members who + are older or younger) are encouraged to participate! +
+
+
+
+); +export default AboutSection; diff --git a/src/views/outreach/host.jsx b/src/views/outreach/host.jsx new file mode 100644 index 00000000..26f9a58b --- /dev/null +++ b/src/views/outreach/host.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import {Route, Switch} from 'react-router-dom'; +import ReactRouterPropTypes from 'react-router-prop-types'; + +import FamilyDays from './host/familydays.jsx'; +import HostHome from './host/home.jsx'; + +const HostSection = ({match}) => ( +
+ + + + +
+); +HostSection.propTypes = { + match: ReactRouterPropTypes.match.isRequired +}; + +export default HostSection; diff --git a/src/views/outreach/host/Family_Days_images/DevTechLogo_NEW_large.png b/src/views/outreach/host/Family_Days_images/DevTechLogo_NEW_large.png new file mode 100755 index 00000000..cae7347e Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/DevTechLogo_NEW_large.png differ diff --git a/src/views/outreach/host/Family_Days_images/DevTechLogo_NEW_medium.png b/src/views/outreach/host/Family_Days_images/DevTechLogo_NEW_medium.png new file mode 100755 index 00000000..05e40997 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/DevTechLogo_NEW_medium.png differ diff --git a/src/views/outreach/host/Family_Days_images/DevTechLogo_NEW_small.png b/src/views/outreach/host/Family_Days_images/DevTechLogo_NEW_small.png new file mode 100755 index 00000000..d9fb2f6d Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/DevTechLogo_NEW_small.png differ diff --git a/src/views/outreach/host/Family_Days_images/IMG_0363.JPG b/src/views/outreach/host/Family_Days_images/IMG_0363.JPG new file mode 100755 index 00000000..c5b2498e Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/IMG_0363.JPG differ diff --git a/src/views/outreach/host/Family_Days_images/IMG_0364.JPG b/src/views/outreach/host/Family_Days_images/IMG_0364.JPG new file mode 100755 index 00000000..1e880a81 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/IMG_0364.JPG differ diff --git a/src/views/outreach/host/Family_Days_images/IMG_0368.JPG b/src/views/outreach/host/Family_Days_images/IMG_0368.JPG new file mode 100755 index 00000000..a209ac41 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/IMG_0368.JPG differ diff --git a/src/views/outreach/host/Family_Days_images/IMG_0378 (1).JPG b/src/views/outreach/host/Family_Days_images/IMG_0378 (1).JPG new file mode 100755 index 00000000..9e72d9b8 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/IMG_0378 (1).JPG differ diff --git a/src/views/outreach/host/Family_Days_images/IMG_3770.JPG b/src/views/outreach/host/Family_Days_images/IMG_3770.JPG new file mode 100755 index 00000000..5c44b645 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/IMG_3770.JPG differ diff --git a/src/views/outreach/host/Family_Days_images/IMG_4812.JPG b/src/views/outreach/host/Family_Days_images/IMG_4812.JPG new file mode 100755 index 00000000..fc2be013 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/IMG_4812.JPG differ diff --git a/src/views/outreach/host/Family_Days_images/IMG_4830.JPG b/src/views/outreach/host/Family_Days_images/IMG_4830.JPG new file mode 100755 index 00000000..1bc8da87 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/IMG_4830.JPG differ diff --git a/src/views/outreach/host/Family_Days_images/Kitten_with_transparent_background.png b/src/views/outreach/host/Family_Days_images/Kitten_with_transparent_background.png new file mode 100755 index 00000000..4261c8e4 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/Kitten_with_transparent_background.png differ diff --git a/src/views/outreach/host/Family_Days_images/SJ_Family_Day_Collage_3_16.jpg b/src/views/outreach/host/Family_Days_images/SJ_Family_Day_Collage_3_16.jpg new file mode 100755 index 00000000..b8db7a51 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/SJ_Family_Day_Collage_3_16.jpg differ diff --git a/src/views/outreach/host/Family_Days_images/ScratchJr_Tips_title.png b/src/views/outreach/host/Family_Days_images/ScratchJr_Tips_title.png new file mode 100755 index 00000000..d00f2155 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/ScratchJr_Tips_title.png differ diff --git a/src/views/outreach/host/Family_Days_images/Tufts_University_logo.jpg b/src/views/outreach/host/Family_Days_images/Tufts_University_logo.jpg new file mode 100755 index 00000000..54356be0 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/Tufts_University_logo.jpg differ diff --git a/src/views/outreach/host/Family_Days_images/background_images.png b/src/views/outreach/host/Family_Days_images/background_images.png new file mode 100755 index 00000000..93d73141 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/background_images.png differ diff --git a/src/views/outreach/host/Family_Days_images/background_images_with_summer_highlighted.png b/src/views/outreach/host/Family_Days_images/background_images_with_summer_highlighted.png new file mode 100755 index 00000000..8f54bbd1 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/background_images_with_summer_highlighted.png differ diff --git a/src/views/outreach/host/Family_Days_images/blocks_categories.png b/src/views/outreach/host/Family_Days_images/blocks_categories.png new file mode 100755 index 00000000..543e0c54 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/blocks_categories.png differ diff --git a/src/views/outreach/host/Family_Days_images/cc-logo.png b/src/views/outreach/host/Family_Days_images/cc-logo.png new file mode 100755 index 00000000..761203e4 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/cc-logo.png differ diff --git a/src/views/outreach/host/Family_Days_images/character_images.png b/src/views/outreach/host/Family_Days_images/character_images.png new file mode 100755 index 00000000..6b388223 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/character_images.png differ diff --git a/src/views/outreach/host/Family_Days_images/character_images_with_whale_highlighted.png b/src/views/outreach/host/Family_Days_images/character_images_with_whale_highlighted.png new file mode 100755 index 00000000..b16f8464 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/character_images_with_whale_highlighted.png differ diff --git a/src/views/outreach/host/Family_Days_images/character_sidebar.png b/src/views/outreach/host/Family_Days_images/character_sidebar.png new file mode 100755 index 00000000..5c46a3f2 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/character_sidebar.png differ diff --git a/src/views/outreach/host/Family_Days_images/check_mark.png b/src/views/outreach/host/Family_Days_images/check_mark.png new file mode 100755 index 00000000..e3ec8ca9 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/check_mark.png differ diff --git a/src/views/outreach/host/Family_Days_images/check_or_paint_editor.png b/src/views/outreach/host/Family_Days_images/check_or_paint_editor.png new file mode 100755 index 00000000..a8191415 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/check_or_paint_editor.png differ diff --git a/src/views/outreach/host/Family_Days_images/delete_kitten.png b/src/views/outreach/host/Family_Days_images/delete_kitten.png new file mode 100755 index 00000000..ed3b8a06 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/delete_kitten.png differ diff --git a/src/views/outreach/host/Family_Days_images/duck_and_frog_character_sidebar.png b/src/views/outreach/host/Family_Days_images/duck_and_frog_character_sidebar.png new file mode 100755 index 00000000..89d77133 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/duck_and_frog_character_sidebar.png differ diff --git a/src/views/outreach/host/Family_Days_images/end_blocks_with_next_page.png b/src/views/outreach/host/Family_Days_images/end_blocks_with_next_page.png new file mode 100755 index 00000000..12dace83 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/end_blocks_with_next_page.png differ diff --git a/src/views/outreach/host/Family_Days_images/family_day_icon.png b/src/views/outreach/host/Family_Days_images/family_day_icon.png new file mode 100755 index 00000000..cbb01cfd Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/family_day_icon.png differ diff --git a/src/views/outreach/host/Family_Days_images/number_pad.png b/src/views/outreach/host/Family_Days_images/number_pad.png new file mode 100755 index 00000000..8a859d7e Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/number_pad.png differ diff --git a/src/views/outreach/host/Family_Days_images/number_pad_with_7_highlighted.png b/src/views/outreach/host/Family_Days_images/number_pad_with_7_highlighted.png new file mode 100755 index 00000000..85304fc6 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/number_pad_with_7_highlighted.png differ diff --git a/src/views/outreach/host/Family_Days_images/pages_sidebar.png b/src/views/outreach/host/Family_Days_images/pages_sidebar.png new file mode 100755 index 00000000..1e0cc5e8 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/pages_sidebar.png differ diff --git a/src/views/outreach/host/Family_Days_images/paint_editor_symbol.png b/src/views/outreach/host/Family_Days_images/paint_editor_symbol.png new file mode 100755 index 00000000..4abe8839 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/paint_editor_symbol.png differ diff --git a/src/views/outreach/host/Family_Days_images/program_with_number_pad.png b/src/views/outreach/host/Family_Days_images/program_with_number_pad.png new file mode 100755 index 00000000..ef763d03 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/program_with_number_pad.png differ diff --git a/src/views/outreach/host/Family_Days_images/sample_program.png b/src/views/outreach/host/Family_Days_images/sample_program.png new file mode 100755 index 00000000..4c042a93 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/sample_program.png differ diff --git a/src/views/outreach/host/Family_Days_images/scratchjrlogo_transparent_background.png b/src/views/outreach/host/Family_Days_images/scratchjrlogo_transparent_background.png new file mode 100755 index 00000000..6178094f Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/scratchjrlogo_transparent_background.png differ diff --git a/src/views/outreach/host/Family_Days_images/select_background_icon.png b/src/views/outreach/host/Family_Days_images/select_background_icon.png new file mode 100755 index 00000000..758dee97 Binary files /dev/null and b/src/views/outreach/host/Family_Days_images/select_background_icon.png differ diff --git a/src/views/outreach/host/family-days.css b/src/views/outreach/host/family-days.css new file mode 100644 index 00000000..8e080790 --- /dev/null +++ b/src/views/outreach/host/family-days.css @@ -0,0 +1,145 @@ +/* CSS Document */ + +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%; +} + +h3.tip-sheet-title{ + font-weight: bold; + margin:0; + padding:0; + text-align: left; +} + +div.family-coding-activity-prompts-content{ + font-size: 130%; + +} + +div.suggested-questions-content{ + font-size: 130%; + +} + +.inline{ + display:inline; +} + +.inline-block{ + display:inline-block; +} + +.center{ + margin-left: auto; + margin-right: auto; +} + +.left-align{ + text-align:left; +} + +html div.full-extend{ + width:100%; +} + +ul.bullet-list { + list-style-type: disc; + +} + +html img.description-img{ + width: 60%; + margin-left:auto; + margin-right:auto; +} + +div.print-br{ + display: none; +} + +/*Footer*/ +footer#footer-print{ + display: none; + flex-direction: row; + flex-basis: auto; + align-items: center; + justify-content: center; + height: 4%; + width: 100%; +} + +div.footer-text-print{ + margin-left: 1%; + font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; + font-size: 10pt; + color: #333333; +} + +img.cc-logo{ + height:90%; + width: auto; + object-fit: contain; + margin: 1%; +} + +img.devtech-logo{ + height: 90%; + width: auto; + margin: 1%; + object-fit: contain; + +} + +/* +$title-color: #2898cd; +$description-color: #808080; +*/ + +.fd-section-title { + display: inline-block; + padding-bottom: 10px; + width: 60%; + line-height: 18px; + color: #2898cd; + font-size: 16px; + font-weight: 900; +} +@media print{ + div#footer, div#header, div#content-nav{ + display: none; + } + html body div#content div.page-break{ + page-break-after: always; + } + + html div.print-br{ + display: inline-block; + } + + div.no-print{ + display:none; + } + .print-credit { + display: flex; + position: fixed; + bottom: 0; + } + html footer#footer-print{ + display:flex; + position: fixed; + bottom: 0; + } + .txlive-langselector { + display:none; + } + +} diff --git a/src/views/outreach/host/family-days.html b/src/views/outreach/host/family-days.html new file mode 100644 index 00000000..6eacc667 --- /dev/null +++ b/src/views/outreach/host/family-days.html @@ -0,0 +1,801 @@ + +
+ +
+ Created by the Developmental Technologies Research Group at Tufts University +
+ This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. +
+ +
+ +
+
+ ScratchJr Family Days Protocol +
+ + +
+ Created by the DevTech Research Group at Tufts + University. + +
+ + +

The following packet provides resources and suggestions for hosting your own ScratchJr Family Day event.

+
+ +
+

+ The DevTech Research Group at Tufts University, + co-creator of ScratchJr, is conducting a study about how families learn + programming together. We would like to invite you to participate in the + research portion of ScratchJr Family Days, though it is not mandatory + for running a ScratchJr family event. Should you wish to participate, + follow the guidelines in "Section 3: Voluntary Research + Participation". We appreciate your feedback! +

+
+ + +
+ +
+
+ 1. What is a ScratchJr Family Day? +
+ + +
+

ScratchJr Family Day is a community event where parents, grandparents, siblings, extended family members, and children can work together to create projects in ScratchJr! + The goal of Family Day is not only to help adults and children feel more comfortable using ScratchJr, but also to encourage collaboration between adults and children while + creating ScratchJr projects.

+
+
+ + +
+
+
+ 2. Who is this event intended for? +
+ + + + + +
+ This event is for anyone who wants to create a ScratchJr community! It can be done through schools, museum, after-school programs, community centers, or anywhere else where + families can come together. Children between the ages of 5-7 as well as their family members (including siblings or family members who are older or younger) are encouraged + to participate! +
+
+
+ + +
+ +
+
+
+ 3. Voluntary Research Participation +
+ + +
+

Guidelines for Family Recruitment

+ + +

Now that you are planning to host a ScratchJr Family Day in your community, we'd like to provide a few recommendations for recruiting families to attend. We advise + facilitators to recruit family participants from their respective community to come for a family coding event, through social media posts, email, or flyers. Recruiting + materials should have the following points of information about the event:

+ + +
    +
  • Date, time, and location of event
    • + + +
  • Description of the ScratchJr programming app: "A free tablet app, developed by the DevTech Research Group at Tufts University and the Lifelong Kindergarten Group + at MIT, that allows young children to program their own interactive stories and games, teaching problem solving, coding, creativity, collaboration, and more."
    • + + +
  • An event tagline such as: "Families can collaborate to learn programming and new technologies together! Join [name of institution] for a family coding event with + the ScratchJr programming app on [date] at [time]."
    • + + +
  • Indication that this event is for children ages 5-7 (or in kindergarten through second grade) and their families - can include siblings, parents, grandparents, + etc.
    • + + +
  • Attendees have the option to provide feedback about the event structure and content for DevTech Research Group team at Tufts University, who is conducting a study on + the facilitation of family collaboration around programming and technology. Participation in the study is not mandatory to attend the Family Day event.
    • + + +
  • Instructions for bringing tablets, or note that institution will provide tablets to borrow, depending on capability of institution.
    • + + +
  • Instructions for signing up to RSVP for event (i.e. Google form, email address, sign up sheet)
    • +
+ + +

Facilitator Script

+ + +

Once families have arrived at your event, we ask that you state the following facilitator script for study recruitment, emphasizing that participation in the research + part of the event is voluntary:

+ + +

"Hello everyone, and welcome to our ScratchJr Family Day programming event! We're so happy you're all joining us today to learn more about technology and programming + collaborative with ScratchJr. ScratchJr is a programming app for young children, developed by the DevTech Research Group at Tufts University, and the Lifelong Kindergarten + Group at MIT. We are hosting this family outreach coding event by the DevTech group at Tufts, so they can better understand how families learn about programming and + technologies together. If you would like to be participants in this study run by DevTech, we will provide you with 2 short surveys: one at the beginning, and one at the end + of this event, as a chance for you to give their team feedback on your experience coding with the app as a family. Should you choose not to participate in the study, that + is okay, and we will not provide you with the surveys. The pre-event survey will take approximately 5 minutes, and the post-event survey will take approximately 10-15 + minutes to complete before you leave here today, if your family chooses to participate and provide the creators of ScratchJr with feedback about this event. Additionally, + one of our facilitators will be going around taking photographs. These may be used for promotional and/or educational purposes. If you would not like to be photographed, + please let me know now." +

+ + +

Photographs

+ + +

If families to not wish to be photographed, they should tell you (or other designated facilitator) at the beginning of the event. We recommend giving those family + members a sticker or some sort of signifier that they do not wish to be photographed. Therefore, facilitators should know which attendees do not wish to be photographed, + and should be sure to not include them in photos. After the event, study coordinators will share you on a file storage drive so you can upload all other photographs from + the event of consenting participants.

+ +
+




+
+ +

Surveys

+ + +

Information about the event and opportunity to consent to participation are all included in the survey links below. Once a legal guardian or facilitator reads through + the information in the pre-survey and selects "Yes" to consent to participating, they will take the survey. If they select "No" at this point, they will be taken to the end + of the survey. Please note: if families DO wish to participate, we ask that they complete both the pre-event survey AND the post-event survey to get a complete look at + their experiences.

+ + +
    +
  1. Family Pre-Event Survey through Qualtrics: http://bit.ly/SJFamilyPreSurvey - We ask that at least 1 legal + guardian of the children attending fill out this pre-survey when they arrive at the event on their device on behalf of the family, if they choose to participate. + Participation in this study is completely voluntary. Families are welcome to attend the event and not participate. +
    2. + + +
  2. Family Post-Event Survey through Qualtrics: http://bit.ly/SJFamilyPostSurvey - We ask that the same + llegal guardian(s) of the children attending who filled out the pre-event survey fill out this survey at the end of the event on their device on behalf of the family. We + ask that all families who filled out pre-surveys also fill out the post-survey for best reserach results. +
    3. + + +
  3. Facilitator Post-Event Survey through Qualtrics: http://bit.ly/SJFacilitatorPostSurvey - We ask that at least 1 + facilitator at our event completes this survey within 48 hours of the end of the event. Ideally, we would like all facilitators to participate for more feedback, but we + only require 1. +
    4. +
+ +
+
+
+ + +
+
+
+ 4. Materials +
+ + + + + + +
+ Below is a list of materials that may be helpful to have when running a ScratchJr Family Day. Any handouts listed here are included at the end of this packet. + + + +
    +
  • 1 Device per family with ScratchJr downloaded (see www.scratchjr.org for a list of supported devices)
    • + + +
  • Sign-in sheet
    • + + +
  • Name tags
    • + + +
  • Handout: ScratchJr Tip Sheet
    • + + +
  • Handout: Family Coding Activity Prompts
    • + + +
  • Handout: Suggested Questions
    • + + +
  • Off-screen activities (optional - see Section 6 "Sample Agenda" for ideas)
    • + + +
  • Index Cards (optional, for “Family Share Time”)
    • + + +
  • Paper and Markers (optional, for off-screen project planning)
    • + + +
  • Projector (optional, for group share of family projects at the end of the event)
    • +
+ +
+
+
+ + +
+
+
+ 5. Event Size +
+ + +
+

This event can be run with any number of families. We recommend each event have at least 3 facilitators, and that they be familiar with ScratchJr and comfortable + teaching others how to use it. Generally, one device is advised per family. However, if there are multiple children within the ScratchJr age range (5-7), it may be + worthwhile to have a second device available. Remember, the goal is to make sure that adults are able to work with their children (rather than having children working on + their own).

+
+
+
+ + +
+
+
+ 6. Sample Agendas +
+ + +
+

Below are sample agendas for 3 differently timed ScratchJr Family Day events: 2 hours, 1.5 hours, and 1 hour. You may adapt the protocol to accommodate your timing needs. + Activities will be described in more detail in the next section.

+ + +

2-Hour Event

+ + + + +
    +
  1. 15 minutes: Arrival, Check-In, & Research Participation. Families check-in using your sign-in sheet, check-out devices to parents if needed (one + device per family, families have option to bring their own device or borrow). Depending on your resources, families can either bring their own device or the facilitators + can provide them, or a combination of the two. After check-in, 1 facilitator should read the research script (Section 3) and allow a few minutes for families to complete + pre-surveys.
    2. + + +
  2. + 30 minutes: Introductions to ScratchJr. We recommend splitting up adults and children for a ScratchJr introduction session. 1 facilitator can take the + children to one room (or ond side of the room) and the other can take the adults to explain how ScratchJr works and answer any questions the groups have. (1) Children + Introduction: welcome game, what is programming introduction, ScratchJr interface introduction (TIP: try printing large versions of ScratchJr blocks for off-screen + programming games like Simon Says or matching: http://scratchjr.org/teach/curricula (2) Adults Introduction: welcome, hands-on + introduction (with devices), hand out and go over the “ScratchJr Tip Sheet” handout (Section 10), introduce schedule for event, have open discussion/Q&A about programming + and technology in early childhood. +
    3. + + +
  3. 20 minutes: Family Coding. Family members work together to create one project in ScratchJr using the “Family Coding Activity Prompts” handout (Section + 10) as inspiration.
    4. + + +
  4. 10 minutes: Family Swap & Share Time. Families pair up to share what they have created so far; families give each other feedback on their project + using the “Suggested Questions” handout (Section 10)
    5. + + +
  5. 15 minutes: Family Coding (Continued). Parents and children collaborate as a group to add on to their projects and incorporate suggestions from the + Family Swap & Share Time
    6. + + +
  6. 20 minutes: Group Share. Families can share their completed projects with the whole group
    7. + + +
  7. 10 minutes: Clean Up & Post-Event Surveys.Families clean up materials, and take about 5 minutes to fill out the post-event survey on their device if + they particiapted in the pre-event survey. Families then return devices if they borrowed them.
    8. +
+ +
+




+




+


+
+

1.5-Hour Event

+ + + +
    +
  1. 10 minutes: Arrival, Check-In, & Research Participation. Families check-in using your sign-in sheet, check-out devices to parents if needed (one + device per family, families have option to bring their own device or borrow). Depending on your resources, families can either bring their own device or the facilitators + can provide them, or a combination of the two. After check-in, 1 facilitator should read the research script (Section 3) and allow a few minutes for families to complete + pre-surveys.
    2. + + +
  2. + 20 minutes: Introductions to ScratchJr. We recommend splitting up adults and children for a ScratchJr introduction session. 1 facilitator can take the + children to one room (or ond side of the room) and the other can take the adults to explain how ScratchJr works and answer any questions the groups have. (1) Children + Introduction: welcome game, what is programming introduction, ScratchJr interface introduction (TIP: try printing large versions of ScratchJr blocks for off-screen + programming games like Simon Says or matching: http://scratchjr.org/teach/curricula (2) Adults Introduction: welcome, hands-on + introduction (with devices), hand out and go over the “ScratchJr Tip Sheet” handout (Section 10), introduce schedule for event, have open discussion/Q&A about programming + and technology in early childhood. +
    3. + + +
  3. 20 minutes: Family Coding. Family members work together to create one project in ScratchJr using the “Family Coding Activity Prompts” handout (Section + 10) as inspiration.
    4. + + +
  4. 5 minutes: Family Swap & Share Time. Families pair up to share what they have created so far; families give each other feedback on their project using + the “Suggested Questions” handout (Section 10).
    5. + + +
  5. 10 minutes: Family Coding (Continued). Parents and children collaborate as a group to add on to their projects and incorporate suggestions from the + Family Swap & Share Time.
    6. + + +
  6. 15 minutes: Group Share. Families can share their completed projects with the whole group.
    7. + + +
  7. 10 minutes: Clean Up & Post-Event Surveys Families clean up materials, and take about 5 minutes to fill out the post-event survey on their device if + they particiapted in the pre-event survey. Families then return devices if they borrowed them.
    8. +
+ + +

1-Hour Event

+ + + +
    +
  1. 5 minutes: Arrival, Check-In, & Research Participation. Families check-in using your sign-in sheet, check-out devices to parents if needed (one device + per family, families have option to bring their own device or borrow). Depending on your resources, families can either bring their own device or the facilitators can + provide them, or a combination of the two. After check-in, 1 facilitator should read the research script (Section 3) and allow a few minutes for families to complete + pre-surveys.
    2. + + +
  2. + 15 minutes: Introductions to ScratchJr. We recommend splitting up adults and children for a ScratchJr introduction session. 1 facilitator can take the + children to one room (or ond side of the room) and the other can take the adults to explain how ScratchJr works and answer any questions the groups have. (1) Children + Introduction: welcome game, what is programming introduction, ScratchJr interface introduction (TIP: try printing large versions of ScratchJr blocks for off-screen + programming games like Simon Says or matching: http://scratchjr.org/teach/curricula (2) Adults Introduction: welcome, hands-on + introduction (with devices), hand out and go over the “ScratchJr Tip Sheet” handout (Section 10), introduce schedule for event, have open discussion/Q&A about programming + and technology in early childhood. +
    3. + + +
  3. 20 minutes: Family Coding. Family members work together to create one project in ScratchJr using the “Family Coding Activity Prompts” handout (Section + 10) as inspiration.
    4. + + +
  4. 10 minutes: Group Share. Families can share their completed projects with the whole group.
    5. + + +
  5. 10 minutes: Clean Up & Post-Event Surveys Families clean up materials, and take about 5 minutes to fill out the post-event survey on their device if + they particiapted in the pre-event survey. Families then return devices if they borrowed them.
    6. +
+ +
+
+
+ + +
+
+ 7. Family Coding Activities +
+ + +
+

Here are three activity ideas for families to get started on their own ScratchJr projects during the “Family Coding” portion of the event. Remember, throughout the event, + families should be encouraged to create only one project together (rather than multiple projects). These activity prompts are meant to inspire families, but do encourage + families to go “outside the box” instead of being confined by the prompts. You, as the event host, are also encouraged to create your own activities that may be more + relevant to your own community. These activities are also included in "Section 10: Handouts" of the packet so they can be printed out and displayed for families to see.

+ + + +
    +
  1. Fairy Tale: Create a fairy tale, starring your family members! Who will be the villain, and who will save the day? It may be helpful to add new pages + to create your story!
    2. + + +
  2. Family Race: Who runs the fastest in your family? Can you create a race between two members of your family in ScratchJr? The “Speed” block may be + helpful for this challenge!
    3. + + +
  3. Family Vacation: Where is your favorite place to visit as a family? Is it the park, a chocolate factory, the beach, or a vacation that you went on? + Tell a story using ScratchJr to share about this favorite place.
    4. +
+ +
+
+ + +
+ + +
+
+
+ 8. Tips for Effective Facilitation +
+ +
+ +
+ +
+ Below are some helpful tips for facilitators. + + +
    +
  • The schedule was designed so that there is a separate, facilitated introduction to ScratchJr for adults and for children. This was specifically done because adults and + children need different scaffolds to get started and feel comfortable. In the adult session, it is helpful to have a hands-on introduction where parents can follow along + in ScratchJr on their own devices. Additionally, providing any tips for how to use ScratchJr or ways to encourage collaboration between adults and children could be + helpful. In the child session, it is helpful to start with a warm-up game so that children can get to know the facilitators as well as the other children. Additionally, + introducing and explaining the word “programming,” as well as the types of projects that they can create in ScratchJr will help them get acclimated.
    • + + +
  • During the adult introduction as well as throughout the event, remind adults that this event is designed for adults and children to work collaboratively in + ScratchJr!
    • + + +
  • If desired, provide alterative, off-screen activities for siblings who may not be as engaged in ScratchJr. Ideas for activities include ScratchJr coloring pages (see + Section 10), picture books, and drawing/craft materials.
    • + + +
  • Family Share Time: During the “Family Share Time,” an easy way to pair up families is to hand out index cards with one color on them. Have families find their matching + color, and that is their partner.
    • + + +
  • Room Set-Up: Have ample spaces set up for families to work together. This can be at a table, on the floor/rug, or wherever else they may feel the most comfortable. It + is important for there to places where families can work by themselves as well as in pairs.
    • + + +
  • If desired, you can have paper and markers available to families if they want to plan their ScratchJr projects off-screen first.
    • + + +
  • Foster a learning environment of asking questions rather than always providing answers.
    • + + +
  • Encourage exploration, experimentation, and risk-taking! Encourage participants to move out of their comfort zones to try new concepts.
    • + + +
  • Remind families that this event is not about producing a final product; instead, it is about sharing the joy of programming and having a fun experience as a + family!
    • +
+ + +

+

+
+
+
+ + +
+
+
+ 9. After a Successful Day +
+ + +
+

Congratulations on a successful ScratchJr Family Day! Be sure to fill out your Facilitator Survey (http://bit.ly/SJFacilitatorPostSurvey) within 48 hours of your event so we can receive your feedback. If you have photos from consenting participants from your event, + email devtech@tufts.edu and we will provide you access to a secure folder for upload.

+ + +

After running your event, make sure to share with your community about how it went. Use the hashtag #ScratchJrFamily to share on Twitter and Facebook about your event! + Don't forget to tag us @ScratchJr and @TuftsDevTech - we can't wait to hear about + it!

+
+
+
+ + +
+
+ 10. Handouts +
+ + +
+

Handouts begin below, and will print as separate sheets when you print this packet. They include:

+ + +
    +
  1. Tip Sheet: handout to help parents get started in ScratchJr; print this sheet out double-sided and hand it out during the parent introduction
    2. + + +
  2. Family Coding Activity Prompts: to be printed out and distributed at each table, so families have ideas for projects to create in ScratchJr
    3. + + +
  3. Suggested Questions: to be used during “Family Share Time” to help facilitate conversation between families (the document is set up so that one page + has questions for 3 families)
    4. + + +
  4. +
+
+

+ You can also print + + ScratchJr Coloring Sheets. + These coloring sheets can be printed out and used as an additional off-screen activity +

+
+
+ + +
+ + +
+
+

ScratchJr Tip Sheet

+
+ + + + +
+

Add/Edit a Character

+
+ Click on the plus sign and then scroll through the character images. When you find a character you like, tap on it and then press the blue check mark in the top right corner. + Want to change how your character looks? Click the paintbrush image to the right of the character and customize its appearance. + +
+
+
+ + + +
+

Delete a Character

+ +
+ If you decide you do not want a character anymore, simply tap the character and hold down until you see a red “x” appear.” Then, tap the red “x.” + +

+

+
+ +
+ + + +
+ +

Add/Edit a Background

+ + +
+ To add a background, click the background icon (located in the middle of the top of the screen). When you find a background you like, tap on it and check the blue checkmark + in the top right corner. Want to create your own background? Click on the paintbrush icon in the top right corner instead, which will bring you to the Paint Editor. + +

+ + +

+
+ +
+ + +
+ +
+ +

Block Categories

+ +
+ The blocks in ScratchJr are divided into categories based on function. When you tap on a block in the pallet space, the name of the block will appear. + +

+

+
+ +
+ +
+ +

How to Create a Program

+ +
+ Drag each block that you would like to use down into the programming area. Notice the shape of the blocks--they look like puzzle pieces. By dragging the blocks next to one + another, they will automatically snap together, creating one straight sequence. + +

+

+ + +

Remember, you can give every character a program if you’d like. To go between characters, simply tap on the character you would like to program on the left side of the + screen and make sure it is highlighted in orange. Then, add the desired programming blocks.

+ +

+

+
+ +
+ + +
+ +

How to Change the Numbers

+ + +
+ You can change the amount of times a character does an action by changing the number parameter located at the bottom of the block. Tap the number, and a small key pad with + appear. Then, input a number to see what happens when you run your program. + +

+ +

+
+ +
+ + +
+ +

How to Add a Page (and Go To Next Page)

+ + +
+ To add a new page, tap on the plus sign (on the right side of the screen). This will add another page to your project, where you can create more content. If you want your + project to transition from page to page, go to the Red blocks section and you will notice a new end block with a number and image of the page. Drag the block to the end of + your program, and this will “turn the page” for you. + +

+ +

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

Family Coding Activity Prompts

+
+
+ Family Coding Activity Prompts +
+ +
+ +

+ Directions: Print out the following prompts and display them for families to see throughout the event. These prompts are for the “Family Coding” portion of the event where families are creating their own ScratchJr projects. +

+ +


+ +

Fairy Tale

+ +
+ Create a fairy tale, starring your family members! Who will be the villain, and who will save the day? It may be helpful to add new pages to create your story! +
+ +


+ +

Family Race

+ +
+ Who runs the fastest in your family? Can you create a race between two members of your family in ScratchJr? The “Speed” block may be helpful for this challenge! +
+ +


+ +

Family Vacation

+ +
+ Where is your favorite place to visit as a family? Is it the park, a chocolate factory, the beach, or a vacation that you went on? Tell a story using ScratchJr to share about this favorite place. +
+ +
+ + +
+ + +
+ + + +
+
+

Suggested Questions

+
+
+ Suggested Questions +
+ +
+ +

+ Directions: Below is a list of questions that families can ask one another during “Family Share Time.” Each family should have one set of questions (the document is set up so that one page has questions for 3 families). +

+ + + +

Suggested Questions:

+ +
+
    +
  1. + What did you make for your project? +
    2. +
  2. + What programming blocks did you use to make your project? +
    3. +
  3. + What would you still want to add to your project with more time? +
    4. +
  4. + Do you have any ideas on how we could improve our project? +
    5. +
+
+ +

+ +

Suggested Questions:

+ +
+
    +
  1. + What did you make for your project? +
    2. +
  2. + What programming blocks did you use to make your project? +
    3. +
  3. + What would you still want to add to your project with more time? +
    4. +
  4. + Do you have any ideas on how we could improve our project? +
    5. +
+
+ +

+ +

Suggested Questions:

+ +
+
    +
  1. + What did you make for your project? +
    2. +
  2. + What programming blocks did you use to make your project? +
    3. +
  3. + What would you still want to add to your project with more time? +
    4. +
  4. + Do you have any ideas on how we could improve our project? +
    5. +
+
+
+ +
+ +
\ No newline at end of file diff --git a/src/views/outreach/host/familydays.jsx b/src/views/outreach/host/familydays.jsx new file mode 100644 index 00000000..3ee69c4b --- /dev/null +++ b/src/views/outreach/host/familydays.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import htmlContent from './family-days.html'; +import './family-days.css'; +import '../../../components/sectionitem/sectionitem.scss'; + +const FamilyDays = () => ( +
// eslint-disable-line react/no-danger +); +export default FamilyDays; diff --git a/src/views/outreach/host/home.jsx b/src/views/outreach/host/home.jsx new file mode 100644 index 00000000..b8109242 --- /dev/null +++ b/src/views/outreach/host/home.jsx @@ -0,0 +1,51 @@ +import React from 'react'; + +const HostHomeSection = () => ( +
+
+
+

{'The '} + + DevTech Research Group + { ' at ' } + + Tufts University + , + co-creator of ScratchJr, is conducting a study about how families + learn programming together. We would like to invite you to participate in + the research portion of ScratchJr + Family Days, though it is not + mandatory for running a ScratchJr family event. + Should you wish to participate, please sign up by filling out a {' '} + + short questionaire + . + We appreciate your feedback!

+
+
+ + +
+); +export default HostHomeSection; diff --git a/src/views/outreach/news.jsx b/src/views/outreach/news.jsx new file mode 100644 index 00000000..64b75164 --- /dev/null +++ b/src/views/outreach/news.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import {Timeline} from 'react-twitter-widgets'; + +const NewsSection = () => ( +
+
+ ScratchJr Family Days News +
+
+ See what other people are doing in their Family Days. +
+
+ +
+
+); +export default NewsSection; diff --git a/src/views/outreach/outreach.jsx b/src/views/outreach/outreach.jsx new file mode 100644 index 00000000..c578aa72 --- /dev/null +++ b/src/views/outreach/outreach.jsx @@ -0,0 +1,68 @@ +import React from 'react'; +import {render} from 'react-dom'; +import {BrowserRouter, Redirect, Route, Switch} from 'react-router-dom'; +import NavBar from '../../components/navbar/navbar.jsx'; +import Footer from '../../components/footer/footer.jsx'; +import TabNav from '../../components/tabnav/tabnav.jsx'; +import PageNotFound from '../../components/pagenotfound/pagenotfound.jsx'; + +import AboutSection from './about.jsx'; +import HostSection from './host.jsx'; +import NewsSection from './news.jsx'; + +import './outreach.scss'; + +const Outreach = () => { + const tabs = [ + { + url: '/about', + text: 'About Family Days', + section: 'about', + indexLink: false + }, { + url: '/host', + text: 'Host a Family Day', + section: 'host', + indexLink: false + }, { + url: '/news', + text: 'Family Days News', + section: 'news', + indexLink: false + } + ]; + return ( + +
+ +
+ + + + + + + + +
+
+
+ + ); +}; +render(, document.getElementById('app')); diff --git a/src/views/outreach/outreach.scss b/src/views/outreach/outreach.scss new file mode 100644 index 00000000..14e819e8 --- /dev/null +++ b/src/views/outreach/outreach.scss @@ -0,0 +1,53 @@ +$question-color: #2898cd; +$question-answer: #808080; + +.content-section { + min-height: 0; +} + +.content-description-question { + margin-bottom: 10px; + width: 612px; + color: $question-color; + font-size: 20px; + font-weight: bold; +} + +.content-description-answer { + margin-bottom: 20px; + line-height: 22px; + color: $question-answer; + font-size: 15px; +} + +// Submenus +.about-icon { + background-image: url("/images/infos_b.svg"); + background-size: 100%; +} + +.content-nav-item-selected .about-icon { + background-image: url("/images/infos_o.svg"); +} + +.host-icon { + background-image: url("/images/assessment_b.svg"); + background-size: 100%; +} + +.content-nav-item-selected .host-icon { + background-image: url("/images/assessment_o.svg"); +} + +.news-icon { + background-image: url("/images/press_b.svg"); + background-size: 100%; +} + +.fd-news-feed { + text-align: center; +} + +.content-nav-item-selected .news-icon { + background-image: url("/images/press_o.svg"); +} diff --git a/static/pdfs/Coloring_Sheets.pdf b/static/pdfs/Coloring_Sheets.pdf new file mode 100644 index 00000000..0066bdf1 Binary files /dev/null and b/static/pdfs/Coloring_Sheets.pdf differ diff --git a/webpack.config.js b/webpack.config.js index 2be53085..e341001f 100755 --- a/webpack.config.js +++ b/webpack.config.js @@ -70,9 +70,13 @@ module.exports = { }] }, { - test: /\.(png|jpg|gif|eot|svg|ttf|woff)$/, + test: /\.(png|PNG|jpg|JPG|gif|GIF|eot|svg|ttf|woff)$/, loader: 'url-loader' }, + { + test: /\.html$/, + loader: 'html-loader' + }, { test: /\.less$/, use: [