Add outreach section

Add new Outreach section for Family Days.

* Outreach is added at the top level between Teach and Donate
* Outreach section has three subsections:
  * About FD (default) - summary of Family Days
  * Host a FD - explains the Tufts study, and embeds the form to sign up
  * FD News - twitter feed of family days

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",

src/components/navbar/navbar.jsx

@@ -48,6 +48,13 @@ export default class NavBar extends React.Component {
                             </div>
                         </a>
                     </div>
+                    <div className="header-nav-item-wrapper">
+                        <a href="/outreach">
+                            <div className={this.generateHeaderClasses('outreach')}>
+                                Outreach
+                            </div>
+                        </a>
+                    </div>
                     <div className="header-nav-item-wrapper">
                         <a href="/donate">
                             <div className={this.generateHeaderClasses('donate')}>

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",

src/views/outreach/about.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const AboutSection = () => (
+    <div
+        className="content-section"
+        id="about-fd-section"
+    >
+        <div className="content-section-title">
+            About ScratchJr Family Days
+        </div>
+        <div id="content-description">
+            <div className="content-description-section">
+                <div className="content-description-answer">
+                    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.
+                </div>
+                <div className="content-description-question">Who are Family Days intended for?</div>
+                <div className="content-description-answer">
+                    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!
+                </div>
+            </div>
+        </div>
+    </div>
+);
+export default AboutSection;

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}) => (
+    <div>
+        <Switch>
+            <Route
+                path={`${match.url}/family-days`}
+                component={FamilyDays}
+            />
+            <Route component={HostHome} />
+        </Switch>
+    </div>
+);
+HostSection.propTypes = {
+    match: ReactRouterPropTypes.match.isRequired
+};
+
+export default HostSection;

src/views/outreach/host/family-days.css

@@ -0,0 +1,147 @@
+/* CSS Document */
+
+@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;
+	}
+	html footer#footer-print{
+		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%;
+}
+
+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;
+
+}
+
+#footer-print{
+	display:none;
+}
+
+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;
+}

src/views/outreach/host/family-days.html

@@ -0,0 +1,798 @@
+<!--Footer Starts-->
+<footer id="footer-print">
+  <img src="Family_Days_images/cc-logo.png" class="cc-logo" alt="cc-logo"/>
+  <div class="footer-text-print">
+    Created by the Developmental Technologies Research Group at Tufts University
+    <br>
+    This work is licensed under a 
+    <a href="https://creativecommons.org/licenses/by-sa/4.0/" >
+      Creative Commons Attribution-ShareAlike 4.0 International License.
+    </a>
+  </div>
+  <img src="Family_Days_images/DevTechLogo_NEW_small.png" class="devtech-logo" alt=""/> 
+</footer>
+<!--Footer Ends-->
+<div class="content-section content-subpage vertical-justify-print">
+  <div class="content-section-title">
+    ScratchJr Family Days Protocol
+  </div>
+  <img class="center" src="Family_Days_images/family_day_icon.png">
+
+  <div class="content-section-description">
+    Created by the <a href="http://ase.tufts.edu/devtech/index.html" target="_blank">DevTech Research Group</a> at <a href="https://www.tufts.edu/" target="_blank">Tufts
+    University</a>.
+
+    <div><img class="inline" height="62" src="Family_Days_images/DevTechLogo_NEW_small.png" width="134"> <img class="inline" height="45" src=
+    "Family_Days_images/Tufts_University_logo.jpg" width="153"></div>
+
+
+    <p>The following packet provides resources and suggestions for hosting your own ScratchJr Family Day event.</p>
+  </div>
+
+  <div class="content-section-item-description left-align">
+      <p>
+          The <a href="http://ase.tufts.edu/devtech/index.html" target="_blank">DevTech Research Group</a> at <a href="https://www.tufts.edu/" target="_blank">Tufts University</a>,
+          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!
+      </p>
+  </div>
+
+  <!-- Forces page-break when printing -->
+  <div class="page-break"></div>
+
+  <div class="content-section-description">
+    <div class="content-section-item-title">
+      1. What is a ScratchJr Family Day?
+    </div>
+
+
+    <div class="content-section-item-description left-align">
+      <p>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.</p>
+    </div>
+  </div>
+
+
+  <div class="content-section-items-container">
+    <div class="content-section-description">
+      <div class="content-section-item-title">
+        2. Who is this event intended for?
+      </div>
+
+
+      <img class="content-section-item-thumbnail-image description-img" src="Family_Days_images/SJ_Family_Day_Collage_3_16.jpg">
+
+
+      <div class="content-section-item-description left-align">
+        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!
+      </div>
+    </div>
+  </div>
+
+  <!-- Forces page-break when printing -->
+  <div class="page-break"></div>
+
+  <div class="content-section-items-container">
+    <div class="content-section-description">
+      <div class="content-section-item-title">
+        3. Voluntary Research Participation
+      </div>
+
+
+      <div class="content-section-item-description left-align">
+        <h3>Guidelines for Family Recruitment</h3>
+
+
+        <p>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:</p>
+
+
+        <ul class="bullet-list">
+          <li>Date, time, and location of event</li>
+
+
+          <li>Description of the ScratchJr programming app: &quot;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.&quot;</li>
+
+
+          <li>An event tagline such as: &quot;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].&quot;</li>
+
+
+          <li>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.</li>
+
+
+          <li>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.</li>
+
+
+          <li>Instructions for bringing tablets, or note that institution will provide tablets to borrow, depending on capability of institution.</li>
+
+
+          <li>Instructions for signing up to RSVP for event (i.e. Google form, email address, sign up sheet)</li>
+        </ul>
+
+
+        <h3>Facilitator Script</h3>
+
+
+        <p>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:</p>
+
+
+        <p><em>"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."</em>
+        </p>
+
+
+        <h3>Photographs</h3>
+
+
+        <p>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.</p>
+
+        <div class="print-br">
+          <br><br><br><br><br>
+        </div>
+
+        <h3>Surveys</h3>
+
+
+        <p>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.</p>
+
+
+        <ol>
+          <li>Family Pre-Event Survey through Qualtrics: <a href="http://bit.ly/SJFamilyPreSurvey" target="_blank">http://bit.ly/SJFamilyPreSurvey</a> - 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.
+          </li>
+
+
+          <li>Family Post-Event Survey through Qualtrics: <a href="http://bit.ly/SJFamilyPostSurvey" target="_blank">http://bit.ly/SJFamilyPostSurvey</a> - 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.
+          </li>
+
+
+          <li>Facilitator Post-Event Survey through Qualtrics: <a href="http://bit.ly/SJFacilitatorPostSurvey" target="_blank">http://bit.ly/SJFacilitatorPostSurvey</a> - 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.
+          </li>
+        </ol>
+
+      </div>
+    </div>
+  </div>
+
+
+  <div class="content-section-items-container">
+    <div class="content-section-description">
+      <div class="content-section-item-title">
+        4. Materials
+      </div>
+
+
+      <img class="content-section-item-thumbnail-image description-img" src="Family_Days_images/IMG_0364.JPG">
+
+
+
+      <div class="content-section-item-description left-align">
+        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.
+
+
+
+        <ul class="bullet-list">
+          <li>1 Device per family with ScratchJr downloaded (see www.scratchjr.org for a list of supported devices)</li>
+
+
+          <li>Sign-in sheet</li>
+
+
+          <li>Name tags</li>
+
+
+          <li>Handout: ScratchJr Tip Sheet</li>
+
+
+          <li>Handout: Family Coding Activity Prompts</li>
+
+
+          <li>Handout: Suggested Questions</li>
+
+
+          <li>Off-screen activities (optional - see Section 6 "Sample Agenda" for ideas)</li>
+
+
+          <li>Index Cards (optional, for “Family Share Time”)</li>
+
+
+          <li>Paper and Markers (optional, for off-screen project planning)</li>
+
+
+          <li>Projector (optional, for group share of family projects at the end of the event)</li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
+
+
+  <div class="content-section-items-container">
+    <div class="content-section-description">
+      <div class="content-section-item-title">
+        5. Event Size
+      </div>
+
+
+      <div class="content-section-item-description full-extend left-align">
+        <p>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).</p>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="content-section-items-container">
+    <div class="content-section-description">
+      <div class="content-section-item-title">
+        6. Sample Agendas
+      </div>
+
+
+      <div class="content-section-item-description full-extend left-align">
+        <p>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.</p>
+
+
+        <h3>2-Hour Event</h3>
+
+
+
+
+        <ol>
+          <li><strong>15 minutes: Arrival, Check-In, & Research Participation.</strong> 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.</li>
+
+
+          <li>
+            <strong>30 minutes: Introductions to ScratchJr.</strong> 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. <em>(1) Children
+            Introduction:</em> 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: <a href="http://scratchjr.org/teach/curricula" target="_blank">http://scratchjr.org/teach/curricula</a> <em>(2) Adults Introduction:</em> 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.
+          </li>
+
+
+          <li><strong>20 minutes: Family Coding.</strong> Family members work together to create one project in ScratchJr using the “Family Coding Activity Prompts” handout (Section
+          10) as inspiration.</li>
+
+
+          <li><strong>10 minutes: Family Swap & Share Time.</strong> 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)</li>
+
+
+          <li><strong>15 minutes: Family Coding (Continued).</strong> Parents and children collaborate as a group to add on to their projects and incorporate suggestions from the
+          Family Swap & Share Time</li>
+
+
+          <li><strong>20 minutes: Group Share.</strong> Families can share their completed projects with the whole group</li>
+
+
+          <li><strong>10 minutes: Clean Up & Post-Event Surveys.</strong>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.</li>
+        </ol>
+
+        <div class="print-br">
+          <br><br><br><br><br>
+          <br><br><br><br><br>
+          <br><br><br>
+        </div>
+        <h3>1.5-Hour Event</h3>
+
+
+
+        <ol>
+          <li><strong>10 minutes: Arrival, Check-In, & Research Participation.</strong> 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.</li>
+
+
+          <li>
+            <strong>20 minutes: Introductions to ScratchJr.</strong> 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. <em>(1) Children
+            Introduction:</em> 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: <a href="http://scratchjr.org/teach/curricula" target="_blank">http://scratchjr.org/teach/curricula</a> <em>(2) Adults Introduction:</em> 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.
+          </li>
+
+
+          <li><strong>20 minutes: Family Coding.</strong> Family members work together to create one project in ScratchJr using the “Family Coding Activity Prompts” handout (Section
+          10) as inspiration.</li>
+
+
+          <li><strong>5 minutes: Family Swap & Share Time.</strong> 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).</li>
+
+
+          <li><strong>10 minutes: Family Coding (Continued).</strong> Parents and children collaborate as a group to add on to their projects and incorporate suggestions from the
+          Family Swap & Share Time.</li>
+
+
+          <li><strong>15 minutes: Group Share.</strong> Families can share their completed projects with the whole group.</li>
+
+
+          <li><strong>10 minutes: Clean Up & Post-Event Surveys</strong> 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.</li>
+        </ol>
+
+
+        <h3>1-Hour Event</h3>
+
+
+
+        <ol>
+          <li><strong>5 minutes: Arrival, Check-In, & Research Participation.</strong> 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.</li>
+
+
+          <li>
+            <strong>15 minutes: Introductions to ScratchJr.</strong> 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. <em>(1) Children
+            Introduction:</em> 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: <a href="http://scratchjr.org/teach/curricula" target="_blank">http://scratchjr.org/teach/curricula</a> <em>(2) Adults Introduction:</em> 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.
+          </li>
+
+
+          <li><strong>20 minutes: Family Coding.</strong> Family members work together to create one project in ScratchJr using the “Family Coding Activity Prompts” handout (Section
+          10) as inspiration.</li>
+
+
+          <li><strong>10 minutes: Group Share.</strong> Families can share their completed projects with the whole group.</li>
+
+
+          <li><strong>10 minutes: Clean Up & Post-Event Surveys</strong> 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.</li>
+        </ol>
+
+      </div>
+    </div>
+  </div>
+
+
+  <div class="content-section-description">
+    <div class="content-section-item-title">
+      7. Family Coding Activities
+    </div>
+
+
+    <div class="content-section-item-description left-align">
+      <p>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.</p>
+
+
+
+      <ol>
+        <li><strong>Fairy Tale:</strong> 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!</li>
+
+
+        <li><strong>Family Race:</strong> 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!</li>
+
+
+        <li><strong>Family Vacation:</strong> 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.</li>
+      </ol>
+
+    </div>
+  </div>
+
+  <!-- Forces page-break when printing -->
+  <div class="page-break"></div>
+
+
+  <div class="content-section-items-container">
+    <div class="content-section-description">
+      <div class="content-section-item-title">
+        8. Tips for Effective Facilitation
+      </div>
+
+      <div>
+        <img class="content-section-item-thumbnail-image description-img" src="Family_Days_images/IMG_3770.JPG">
+      </div>
+
+      <div class="content-section-item-description left-align">
+        Below are some helpful tips for facilitators.
+
+
+        <ul class="bullet-list">
+          <li>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.</li>
+
+
+          <li>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!</li>
+
+
+          <li>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.</li>
+
+
+          <li>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.</li>
+
+
+          <li>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.</li>
+
+
+          <li>If desired, you can have paper and markers available to families if they want to plan their ScratchJr projects off-screen first.</li>
+
+
+          <li>Foster a learning environment of asking questions rather than always providing answers.</li>
+
+
+          <li>Encourage exploration, experimentation, and risk-taking! Encourage participants to move out of their comfort zones to try new concepts.</li>
+
+
+          <li>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!</li>
+        </ul>
+
+
+        <p>
+        </p>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="content-section-items-container">
+    <div class="content-section-description">
+      <div class="content-section-item-title">
+        9. After a Successful Day
+      </div>
+
+
+      <div class="content-section-item-description full-extend left-align">
+        <p>Congratulations on a successful ScratchJr Family Day! Be sure to fill out your Facilitator Survey (<a href="http://bit.ly/SJFacilitatorPostSurvey" target=
+        "_blank">http://bit.ly/SJFacilitatorPostSurvey</a>) 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.</p>
+
+
+        <p>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 <a href="https://twitter.com/scratchjr" target="_blank">@ScratchJr</a> and <a href="https://twitter.com/tuftsdevtech" target="_blank">@TuftsDevTech</a> - we can't wait to hear about
+        it!</p>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="content-section-description">
+    <div class="content-section-item-title">
+      10. Handouts
+    </div>
+
+
+    <div class="content-section-item-description left-align">
+      <p>Handouts begin below, and will print as separate sheets when you print this packet. They include:</p>
+
+
+      <ol>
+        <li><strong>Tip Sheet:</strong> handout to help parents get started in ScratchJr; print this sheet out double-sided and hand it out during the parent introduction</li>
+
+
+        <li><strong>Family Coding Activity Prompts:</strong> to be printed out and distributed at each table, so families have ideas for projects to create in ScratchJr</li>
+
+
+        <li><strong>Suggested Questions:</strong> 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)</li>
+
+
+        <li><strong>ScratchJr Coloring Sheets:</strong> these coloring sheets can be printed out and used as an additional off-screen activity</li>
+      </ol>
+      <br>
+    </div>
+  </div>
+
+  <!-- Forces page-break when printing -->
+  <div class="page-break"></div>
+
+  <!-- Tip Sheet -->
+  <div id="tip-sheet">
+    <div class="content-section-item-title no-print">
+      <h3>ScratchJr Tip Sheet</h3>
+    </div>
+
+    <img class="center" height="83" src="Family_Days_images/ScratchJr_Tips_title.png" width="334">
+    
+
+      <div class="content-section-description">
+        <h3 class="tip-sheet-title">Add/Edit a Character</h3>
+        <div class="content-section-item-description left-align">
+          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.
+
+          <div><img class="inline" src="Family_Days_images/character_sidebar.png" height="auto" width="30%"> <img class="inline" src=
+          "Family_Days_images/character_images_with_whale_highlighted.png" height="auto" width="30%"> <img class="inline" src=
+          "Family_Days_images/check_or_paint_editor.png" height="auto" width="30%"></div>
+        </div>
+      </div>
+
+
+
+    <div class="content-section-description">
+      <h3 class="tip-sheet-title">Delete a Character</h3>
+
+      <div class="content-section-item-description left-align">
+        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.”
+
+        <p><img src="Family_Days_images/delete_kitten.png" height="auto" width="8%">
+        </p>
+      </div>
+
+    </div>
+
+
+
+    <div class="content-section-description">
+
+      <h3 class="tip-sheet-title">Add/Edit a Background</h3>
+
+
+      <div class="content-section-item-description left-align">
+        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.
+
+        <p><img src="Family_Days_images/select_background_icon.png" class="inline"  height="auto" width="10%">
+        <img src="Family_Days_images/background_images_with_summer_highlighted.png" class="inline" height="auto" width="50%">
+        <img src="Family_Days_images/check_or_paint_editor.png" class="inline" height="auto" width="33%">
+        </p>
+      </div>
+
+    </div>
+
+    <!-- Forces page-break when printing -->
+    <div class="page-break"></div>
+
+    <div class="content-section-description">
+
+      <h3 class="tip-sheet-title">Block Categories</h3>
+
+      <div class="content-section-item-description left-align">
+        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.
+
+        <p><img src="Family_Days_images/blocks_categories.png" class="center inline" height="auto" width="33%">
+        </p>
+      </div>
+
+    </div>
+
+    <div class="content-section-description">
+
+      <h3 class="tip-sheet-title">How to Create a Program</h3>
+
+      <div class="content-section-item-description left-align">
+        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.
+
+        <p><img src="Family_Days_images/sample_program.png" class="center inline"  height="auto" width="33%">
+        </p>
+
+
+        <p>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.</p>
+
+        <p><img src="Family_Days_images/duck_and_frog_character_sidebar.png" class="center inline"  height="auto" width="16%">
+        </p>
+      </div>
+
+    </div>
+
+
+    <div class="content-section-description">
+
+      <h3 class="tip-sheet-title">How to Change the Numbers</h3>
+
+
+      <div class="content-section-item-description left-align">
+        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.
+
+        <p ><img src="Family_Days_images/number_pad_with_7_highlighted.png" class="inline" height="auto" width="17%">
+        <img src="Family_Days_images/program_with_number_pad.png" class="inline" height="auto" width="17%">
+        </p>
+      </div>
+
+    </div>
+
+
+    <div class="content-section-description">
+
+      <h3 class="tip-sheet-title">How to Add a Page (and Go To Next Page)</h3>
+
+
+      <div class="content-section-item-description left-align">
+        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.
+
+        <p><img src="Family_Days_images/pages_sidebar.png" class="inline" height="auto" width="9%">
+        <img src="Family_Days_images/end_blocks_with_next_page.png" class="inline" height="auto" width="20%">
+        </p>
+      </div>
+
+    </div>
+
+  </div> <!-- End of Tip Sheet -->
+
+  <!-- Forces page-break when printing -->
+  <div class="page-break"></div>
+
+  <!-- Family Coding Activity Prompts -->
+  <div id="family-coding-activity-prompts">
+    <div class="content-section-item-title no-print">
+      <h3>Family Coding Activity Prompts</h3>
+    </div>
+    <div class="content-section-title">
+      Family Coding Activity Prompts
+    </div>
+
+    <div class="content-section-description">
+
+      <p class="left-align">
+        <i>Directions</i>: 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.
+      </p>
+
+      <br><br><br>
+
+      <h2>Fairy Tale</h2>
+
+      <div class="content-section-item-description left-align family-coding-activity-prompts-content">
+        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!
+      </div>
+
+      <br><br><br>
+
+      <h2>Family Race</h2>
+
+      <div class="content-section-item-description left-align family-coding-activity-prompts-content">
+        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!
+      </div>
+      
+      <br><br><br>
+
+      <h2>Family Vacation</h2>
+
+      <div class="content-section-item-description left-align family-coding-activity-prompts-content">
+        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.
+      </div>
+
+    </div>
+
+
+  </div> <!-- End of family-coding-activity-prompts -->
+
+  <!-- Forces page-break when printing -->
+  <div class="page-break"></div>
+
+
+  <!-- Suggested Questions -->
+  <div id="suggested-questions">
+    <div class="content-section-item-title no-print">
+      <h3>Suggested Questions</h3>
+    </div>
+    <div class="content-section-title">
+      Suggested Questions
+    </div>
+
+    <div class="content-section-description">
+
+      <p class="left-align">
+        <i>Directions</i>: 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).
+      </p>
+
+     
+
+      <h2>Suggested Questions:</h2>
+
+      <div class="content-section-item-description left-align suggested-questions-content">
+        <ol>
+          <li>
+            What did you make for your project?
+          </li>
+          <li>
+            What programming blocks did you use to make your project?
+          </li>
+          <li>
+            What would you still want to add to your project with more time?
+          </li>
+          <li>
+            Do you have any ideas on how we could improve our project?
+          </li>
+        </ol>
+      </div>
+
+      <br><br>
+
+      <h2>Suggested Questions:</h2>
+
+      <div class="content-section-item-description left-align suggested-questions-content">
+        <ol>
+          <li>
+            What did you make for your project?
+          </li>
+          <li>
+            What programming blocks did you use to make your project?
+          </li>
+          <li>
+            What would you still want to add to your project with more time?
+          </li>
+          <li>
+            Do you have any ideas on how we could improve our project?
+          </li>
+        </ol>
+      </div>
+      
+      <br><br>
+
+      <h2>Suggested Questions:</h2>
+
+      <div class="content-section-item-description left-align suggested-questions-content">
+        <ol>
+          <li>
+            What did you make for your project?
+          </li>
+          <li>
+            What programming blocks did you use to make your project?
+          </li>
+          <li>
+            What would you still want to add to your project with more time?
+          </li>
+          <li>
+            Do you have any ideas on how we could improve our project?
+          </li>
+        </ol>
+      </div>
+    </div>
+
+</div> <!-- End of suggested-questions -->
+
+</div> 

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 = () => (
+    <div dangerouslySetInnerHTML={{__html: htmlContent}} /> // eslint-disable-line react/no-danger
+);
+export default FamilyDays;

src/views/outreach/host/home.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+const HostHomeSection = () => (
+    <div>
+        <div className="content-section">
+            <div className="content-section-description">
+                <p>{'The '}
+                    <a
+                        href="http://ase.tufts.edu/devtech/index.html"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        DevTech Research Group
+                    </a>{ ' at ' }
+                    <a
+                        href="https://www.tufts.edu/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        Tufts University
+                    </a>,
+                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 {' '}
+                    <a
+                        href="https://goo.gl/forms/h1LWQWPOZ8azHNAt2"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                            short questionaire
+                    </a>.
+                We appreciate your feedback!</p>
+            </div>
+        </div>
+        
+        <iframe
+            src="https://docs.google.com/forms/d/e/1FAIpQLSd1I1N3ayxldpnDz2CBWa8KFRuZ5XB1yqz5PPC96dFd9qhTiA/viewform?embedded=true"
+            width="900"
+            height="2000"
+            frameBorder="0"
+            marginHeight="0"
+            marginWidth="0"
+        >
+            Loading...
+        </iframe>
+    </div>
+);
+export default HostHomeSection;

src/views/outreach/news.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const NewsSection = () => (
+    <div
+        className="content-section"
+        id="news-section"
+    >
+        Twitter moment here
+    </div>
+);
+export default NewsSection;

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 (
+        <BrowserRouter basename="/outreach">
+            <div>
+                <NavBar selected="outreach" />
+                <div id="content">
+                    <TabNav items={tabs} />
+                    <Switch>
+                        <Redirect
+                            exact
+                            from="/"
+                            to="/about"
+                        />
+                        <Route
+                            path="/about"
+                            component={AboutSection}
+                        />
+                        <Route
+                            path="/host"
+                            component={HostSection}
+                        />
+                        <Route
+                            path="/news"
+                            component={NewsSection}
+                        />
+                        <Route
+                            component={PageNotFound}
+                        />
+                    </Switch>
+                </div>
+                <Footer />
+            </div>
+        </BrowserRouter>
+    );
+};
+render(<Outreach />, document.getElementById('app'));

src/views/outreach/outreach.scss

@@ -0,0 +1,49 @@
+$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%;
+}
+
+.content-nav-item-selected .news-icon {
+    background-image: url("/images/press_o.svg");
+}

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: [