scratchfoundation/scratchjr-website
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratchjr-website.git synced 2025-06-16 17:31:20 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixing Linter errors and styles

Browse source 
Wholesale changes due to formatting, lint etc.
Substantive changes to sectionitem.jsx component. Realized that it would be more reactified with child components instead of ‘description’ prop. I didn’t completely get rid of description prop, but made it optional. Should probably go back and change all the uses, but only did the ones with long lines and other lint issues.
This commit is contained in:
chrisgarrity 2016-09-06 10:17:25 -04:00
parent 8209cf90c6
commit f9fa3bdaf2
63 changed files with 2029 additions and 1521 deletions

4
.eslintrc
View file

@ -5,7 +5,7 @@
"eol-last": [2],
"indent": [2, 4],
"linebreak-style": [2, "unix"],
"max-len": [2, 120, 4],
"max-len": [2, 120, 4, {"ignoreUrls": true}],
"no-trailing-spaces": [2, { "skipBlankLines": true }],
"no-unused-vars": [2, {"args": "after-used", "varsIgnorePattern": "^_"}],
"quotes": [2, "single"],
@ -25,5 +25,5 @@
"react",
"json"
],
"extends": "eslint:recommended"
"extends": ["eslint:recommended", "plugin:react/recommended"]
}

33
.sass-lint.yml Normal file
View file

@ -0,0 +1,33 @@
rules:
class-name-format: 0
no-color-literals: 2
final-newline: 2
force-element-nesting: 0
hex-notation: 2
indentation:
- 2
-
size: 4
leading-zero: 2
nesting-depth:
- 1
-
max-depth: 4
no-css-comments: 0
no-ids: 0
no-mergeable-selectors: 0
no-qualifying-elements:
- 1
-
- allow-element-with-attribute
no-transition-all: 0
property-sort-order:
- 2
-
order: concentric
quotes:
- 2
-
style: double
shorthand-values: 0
zero-unit: 2

2
src/components/blockitem/blockitem.jsx
View file

@ -24,4 +24,4 @@ BlockItem.propTypes = {
imageClass: React.PropTypes.string,
description: React.PropTypes.string.isRequired
};
BlockItem.defaultProps = {imageClass: "block-image"}
BlockItem.defaultProps = {imageClass: 'block-image'};

39
src/components/carousel/carousel.scss
View file

@ -1,24 +1,39 @@
/* override slick defaults */
// override slick defaults
$color: #fff;
$active-color: #f5a322;
.slick-slider {
margin-bottom: 0;
width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 900px;
img {
width: 900px;
height: 507px;
}
}
.slick-dots {
z-index: 100;
top: 425px;
li button:before {
color: white;
opacity: 0.33;
font-size: 15px;
z-index: 100;
li button {
&::before {
opacity: .33;
color: $color;
font-size: 15px;
}
}
li.slick-active button:before {
opacity: 0.85;
color: #f5a322;
li.slick-active {
button {
&::before {
opacity: .85;
color: $active-color;
}
}
}
}

38
src/components/footer/footer.jsx
View file

@ -4,47 +4,47 @@ import './footer.scss';
export default class Footer extends React.Component {
render () {
return (
<div id='footer'>
<span id='footer-text'>
<div id="footer">
<span id="footer-text">
<strong>ScratchJr</strong> is a collaboration between the
DevTech Research Group at Tufts University, the Lifelong
Kindergarten Group at the MIT Media Lab, and the Playful
Invention Company.
</span>
<div id='footer-social'>
<div id='social-links'>
<div id="footer-social">
<div id="social-links">
<a
className='social-link sjr-icon-twitter'
href='https://twitter.com/ScratchJr'
title='Follow us on Twitter'
target='_blank'>
className="social-link sjr-icon-twitter"
href="https://twitter.com/ScratchJr"
title="Follow us on Twitter"
target="_blank">
<span>Twitter</span>
</a>
<a
className='social-link sjr-icon-facebook'
href='https://www.facebook.com/scratchjr'
title='Like us on Facebook'
target='_blank'>
className="social-link sjr-icon-facebook"
href="https://www.facebook.com/scratchjr"
title="Like us on Facebook"
target="_blank">
<span>Facebook</span>
</a>
</div>
<div id='footer-nav'>
<div id="footer-nav">
<a
href='https://docs.google.com/forms/d/1wBrCl5Dy4-5AAzcmkQigKplKpv37M0O8YQPKo0FjUpo/viewform?usp=send_form'>
<div className='blue-button'>
href="https://docs.google.com/forms/d/1wBrCl5Dy4-5AAzcmkQigKplKpv37M0O8YQPKo0FjUpo/viewform?usp=send_form">
<div className="blue-button">
Join Mailing List
</div>
</a>
&nbsp;
<a href='mailto:info@scratchjr.org'>
<div className='blue-button'>
<a href="mailto:info@scratchjr.org">
<div className="blue-button">
Contact Us
</div>
</a>
</div>
</div>
<div className='footer-links'>
<a href='/privacy'>Privacy Policy</a>
<div className="footer-links">
<a href="/privacy">Privacy Policy</a>
</div>
</div>
);

127
src/components/footer/footer.scss
View file

@ -1,97 +1,110 @@
$footer-background: #f6f6f6;
$footer-foreground: #333;
$link-color: #fff;
$twitter-color: #55acee;
$facebook-color: #3b5998;
$social-active: #f79331;
#footer {
width: 900px;
margin: auto;
height: 115px;
background-color: #f6f6f6;
margin-bottom: 100px;
color: #333;
margin: auto;
margin-bottom: 100px;
background-color: $footer-background;
width: 900px;
height: 115px;
color: $footer-foreground;
}
#footer-nav {
padding-top: 10px;
padding-left: 10px;
margin-right: 30px;
display: inline-block;
text-align: justify;
display: inline-block;
margin-right: 30px;
padding-top: 10px;
padding-left: 10px;
text-align: justify;
}
#footer-nav > a {
display: inline-block;
display: inline-block;
}
#footer-text {
padding-top: 40px;
padding-bottom: 40px;
margin-left: 30px;
width: 55%;
font-size: 10pt;
line-height: 16pt;
display: inline-block;
display: inline-block;
margin-left: 30px;
padding-top: 40px;
padding-bottom: 40px;
width: 55%;
line-height: 16pt;
font-size: 10pt;
}
.footer-links {
display: block;
text-align: center;
display: block;
text-align: center;
}
.footer-links a {
text-decoration: none;
color: #fff !important;
text-decoration: none;
color: $link-color;
}
#footer-social {
display: inline-block;
margin-top: 20px;
display: inline-block;
margin-top: 20px;
}
#social-links {
margin-left: 173px;
margin-left: 173px;
}
#social-links .social-link {
display: block;
float: left;
margin-right: 18px;
text-decoration: none;
color: #ffffff;
text-align: center;
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
float: left;
margin-right: 18px;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
text-decoration: none;
color: $link-color;
}
.social-link:visited {
color: #ffffff;
color: $link-color;
}
.sjr-icon-twitter:before {
content: "\ea91";
background-color: #55acee;
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 1.1em;
line-height: 1.75em;
display: block;
border-radius: 50%;
background-color: $twitter-color;
width: 30px;
height: 30px;
line-height: 1.75em;
font-size: 1.1em;
content: "\ea91";
}
.sjr-icon-twitter:hover:before {
background-color: #F79331;
.sjr-icon-twitter:hover::before {
background-color: $social-active;
}
.sjr-icon-twitter span {
display: none;
display: none;
}
.sjr-icon-facebook:before {
content: "\ea8c";
background-color: #3b5998;
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 1.2em;
line-height: 1.4em;
display: block;
border-radius: 50%;
background-color: $facebook-color;
width: 30px;
height: 30px;
line-height: 1.4em;
font-size: 1.2em;
content: "\ea8c";
}
.sjr-icon-facebook:hover:before {
background-color: #F79331;
background-color: $social-active;
}
.sjr-icon-facebook span {
display: none;
display: none;
}

7
src/components/guidebutton/guidebutton.jsx
View file

@ -3,7 +3,7 @@ import classNames from 'classnames';
import './guidebutton.scss';
export default class GuideButton extends React.Component {
constructor(props) {
constructor (props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
@ -31,6 +31,7 @@ GuideButton.propTypes = {
index: React.PropTypes.number.isRequired,
clickHandler: React.PropTypes.func.isRequired,
lines: React.PropTypes.array,
selected: React.PropTypes.bool
selected: React.PropTypes.bool,
children: React.PropTypes.node
};
GuideButton.defaultProps = {selected: false}
GuideButton.defaultProps = {selected: false};

30
src/components/guidebutton/guidebutton.scss
View file

@ -1,21 +1,25 @@
$button-border: #808080;
$button-selected: #2898cd;
$selected-text: #fff;
.guide-button {
font-family: "Lucida Grande", arial, sans-serif;
border-radius: 50%;
position: absolute;
border: 1px solid #808080;
width: 32px;
height: 32px;
text-align: center;
cursor: pointer;
z-index: 100;
position: absolute;
z-index: 100;
border: 1px solid $button-border;
border-radius: 50%;
cursor: pointer;
width: 32px;
height: 32px;
text-align: center;
font-family: "Lucida Grande", arial, sans-serif;
}
.guide-button-text {
padding: 7px;
padding: 7px;
}
.guide-button-selected {
border: 1px solid #2898CD;
background-color: #2898CD;
color: white;
border: 1px solid $button-selected;
background-color: $button-selected;
color: $selected-text;
}

2
src/components/guidebutton/guidebuttonline.jsx
View file

@ -5,7 +5,7 @@ export default class GuideButtonLine extends React.Component {
render () {
var lineClass = 'guide-vertical-line';
if (this.props.type == 'dot') {
lineClass = 'guide-dot'
lineClass = 'guide-dot';
} else if (this.props.type == 'horizontal') {
lineClass = 'guide-horizontal-line';
}

21
src/components/guidebutton/guidebuttonline.scss
View file

@ -1,18 +1,21 @@
$dot-color: #333;
$line-color: #000;
.guide-dot {
height: 5px;
width: 5px;
position: absolute;
top: 7px;
border-radius: 50%;
background-color: #333333;
position: absolute;
border-radius: 50%;
background-color: $dot-color;
width: 5px;
height: 5px;
}
.guide-vertical-line {
border-left: 1px solid black;
position: absolute;
position: absolute;
border-left: 1px solid $line-color;
}
.guide-horizontal-line {
border-top: 1px solid black;
position: absolute;
position: absolute;
border-top: 1px solid $line-color;
}

4
src/components/guidekey/guidekey.jsx
View file

@ -1,12 +1,12 @@
import React from 'react';
import './guidekey.scss'
import './guidekey.scss';
export default class GuideKey extends React.Component {
render () {
return (
<div id="guide-key">
<div id="key-header">
{this.props.id + " | " + this.props.title}
{this.props.id + ' | ' + this.props.title}
</div>
<div id="key-description">
{this.props.description}

39
src/components/guidekey/guidekey.scss
View file

@ -1,25 +1,30 @@
$key-border-color: #e5e5e5;
$key-header-color: #2898cd;
$key-description-color: #808080;
$key-header-background: $key-border-color;
#guide-key {
width: 225px;
height: 472px;
float: left;
margin-left: 10px;
border: 1px solid #e5e5e5;
float: left;
margin-left: 10px;
border: 1px solid $key-border-color;
width: 225px;
height: 472px;
}
#key-header {
font-size: 12pt;
padding-top: 10px;
padding-left: 10px;
height: 31px;
color: #2898CD;
background-color: #e5e5e5;
background-color: $key-header-background;
padding-top: 10px;
padding-left: 10px;
height: 31px;
color: $key-header-color;
font-size: 12pt;
}
#key-description {
color: #808080;
line-height: 24px;
padding-top: 10px;
font-size: 10pt;
margin-right: 5px;
margin-left: 10px;
margin-right: 5px;
margin-left: 10px;
padding-top: 10px;
line-height: 24px;
color: $key-description-color;
font-size: 10pt;
}

29
src/components/navbar/navbar.jsx
View file

@ -15,36 +15,36 @@ export default class NavBar extends React.Component {
}
render () {
return (
<div id='header'>
<a href='/'>
<div id='header-logo-wrapper'>
<img src='/images/scratchjrlogo.png' id='header-logo' alt='ScratchJr Logo'/>
<div id="header">
<a href="/">
<div id="header-logo-wrapper">
<img src="/images/scratchjrlogo.png" id="header-logo" alt="ScratchJr Logo"/>
</div>
</a>
<div id='header-nav'>
<div className='header-nav-item-wrapper'>
<a href='/about'>
<div id="header-nav">
<div className="header-nav-item-wrapper">
<a href="/about">
<div className={this.generateHeaderClasses('about')}>
About
</div>
</a>
</div>
<div className='header-nav-item-wrapper'>
<a href='/learn'>
<div className="header-nav-item-wrapper">
<a href="/learn">
<div className={this.generateHeaderClasses('learn')}>
Learn
</div>
</a>
</div>
<div className='header-nav-item-wrapper'>
<a href='/teach'>
<div className="header-nav-item-wrapper">
<a href="/teach">
<div className={this.generateHeaderClasses('teach')}>
Teach
</div>
</a>
</div>
<div className='header-nav-item-wrapper'>
<a href='/donate'>
<div className="header-nav-item-wrapper">
<a href="/donate">
<div className={this.generateHeaderClasses('donate')}>
Donate
</div>
@ -55,3 +55,6 @@ export default class NavBar extends React.Component {
);
}
}
NavBar.propTypes = {
selected: React.PropTypes.node
};

45
src/components/navbar/navbar.scss
View file

@ -1,38 +1,41 @@
$nav-text-color: #fff;
$nav-selected-color: #0a7199;
#header {
width: 900px;
height: 58px;
margin: auto;
margin: auto;
width: 900px;
height: 58px;
}
#header-logo {
margin-top: 5.5px;
margin-bottom: 5.5px;
margin-left: 28px;
height: 47px;
width: 163px;
float: left;
float: left;
margin-top: 5.5px;
margin-bottom: 5.5px;
margin-left: 28px;
width: 163px;
height: 47px;
}
#header-nav {
float: right;
position: relative;
position: relative;
float: right;
}
.header-nav-item-wrapper {
float: left;
float: left;
}
.header-nav-item {
font-family: "Lucida Grande", arial, sans-serif;
letter-spacing: 1px;
color: white;
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 23px;
height: 35px;
float: left;
padding-top: 23px;
padding-right: 35px;
padding-left: 35px;
height: 35px;
letter-spacing: 1px;
color: $nav-text-color;
font-family: "Lucida Grande", arial, sans-serif;
}
.header-nav-item-selected {
background-color: #0A7199;
background-color: $nav-selected-color;
}

4
src/components/pagenotfound/pagenotfound.jsx
View file

@ -3,9 +3,9 @@ import React from 'react';
export default class PageNotFound extends React.Component {
render () {
return (
<div className='content-section'>
<div className="content-section">
<h1>Page Not Found</h1>
<p>Go to the <a href='/'>Home</a> page.</p>
<p>Go to the <a href="/">Home</a> page.</p>
</div>
);
}

2
src/components/pressitem/pressitem.jsx
View file

@ -3,7 +3,7 @@ import React from 'react';
export default class PressItem extends React.Component {
render () {
return (
<div className='content-description-answer'>
<div className="content-description-answer">
<a href={this.props.url}>
{this.props.title}
</a>&nbsp;-&nbsp;

63
src/components/sectionitem/sectionitem.jsx
View file

@ -5,22 +5,21 @@ import './sectionitem.scss';
export class SectionItem extends React.Component {
render () {
var thumb;
console.log ("type = " + typeof(this.props.thumbnail))
if (typeof this.props.thumbnail == 'string') {
thumb = <img className = 'content-section-item-thumbnail-image' src = {this.props.thumbnail} />
thumb = <img className = 'content-section-item-thumbnail-image' src = {this.props.thumbnail} />;
} else {
thumb = this.props.thumbnail
thumb = this.props.thumbnail;
}
return (
<div className={'content-section-' + this.props.format + '-item'}>
<div className='content-section-item-title'>
<div className="content-section-item-title">
{this.props.title}
</div>
<div className='content-section-item-thumbnail'>
<div className="content-section-item-thumbnail">
{thumb}
</div>
<div className='content-section-item-description'>
{this.props.description}
<div className="content-section-item-description">
{this.props.description || this.props.children}
</div>
</div>
);
@ -30,32 +29,32 @@ SectionItem.propTypes = {
title: React.PropTypes.string.isRequired,
format: React.PropTypes.oneOf(['full', 'half']).isRequired,
thumbnail: React.PropTypes.oneOfType([React.PropTypes.object,React.PropTypes.string]).isRequired,
description: React.PropTypes.string.isRequired
description: React.PropTypes.string,
children: React.PropTypes.node
};
export class LinkedSectionItem extends React.Component {
render () {
var thumb;
console.log ("type = " + typeof(this.props.thumbnail))
if (typeof this.props.thumbnail == 'string') {
thumb = <img className = 'content-section-item-thumbnail-image' src = {this.props.thumbnail} />
thumb = <img className = 'content-section-item-thumbnail-image' src = {this.props.thumbnail} />;
} else {
thumb = this.props.thumbnail
thumb = this.props.thumbnail;
}
return (
<div className={'content-section-' + this.props.format + '-item'}>
<Link to={this.props.linkURL}>
<div className='content-section-item-title'>
<div className="content-section-item-title">
{this.props.title}
</div>
</Link>
<Link to={this.props.linkURL}>
<div className='content-section-item-thumbnail'>
<div className="content-section-item-thumbnail">
{thumb}
</div>
</Link>
<div className='content-section-item-description'>
{this.props.description}
<div className="content-section-item-description">
{this.props.description || this.props.children}
&nbsp;<Link to={this.props.linkURL}>
{this.props.linkText}
</Link>
@ -68,34 +67,35 @@ LinkedSectionItem.propTypes = {
title: React.PropTypes.string.isRequired,
format: React.PropTypes.oneOf(['full', 'half']).isRequired,
thumbnail: React.PropTypes.oneOfType([React.PropTypes.object,React.PropTypes.string]).isRequired,
description: React.PropTypes.string.isRequired,
description: React.PropTypes.string,
linkURL: React.PropTypes.string.isRequired,
linkText: React.PropTypes.string.isRequired
linkText: React.PropTypes.string.isRequired,
children: React.PropTypes.node
};
export class StaticLinkSectionItem extends React.Component {
render () {
var thumb;
console.log ("type = " + typeof(this.props.thumbnail))
if (typeof this.props.thumbnail == 'string') {
thumb = <img className = 'content-section-item-thumbnail-image' src = {this.props.thumbnail} />
thumb = <img className = 'content-section-item-thumbnail-image' src = {this.props.thumbnail} />;
} else {
thumb = this.props.thumbnail
thumb = this.props.thumbnail;
}
return (
<div className={'content-section-' + this.props.format + '-item'}>
<a href={this.props.linkURL} target='_blank'>
<div className='content-section-item-title'>
<a href={this.props.linkURL} target="_blank">
<div className="content-section-item-title">
{this.props.title}
</div>
</a>
<a href={this.props.linkURL} target='_blank'>
<div className='content-section-item-thumbnail'>
<a href={this.props.linkURL} target="_blank">
<div className="content-section-item-thumbnail">
{thumb}
</div>
</a>
<div className='content-section-item-description'>
{this.props.description} <a href={this.props.linkURL} target='_blank'>{this.props.linkText}</a>
<div className="content-section-item-description">
{this.props.description || this.props.children}
&nbsp;<a href={this.props.linkURL} target="_blank">{this.props.linkText}</a>
</div>
</div>
);
@ -105,9 +105,10 @@ StaticLinkSectionItem.propTypes = {
title: React.PropTypes.string.isRequired,
format: React.PropTypes.oneOf(['full', 'half']).isRequired,
thumbnail: React.PropTypes.oneOfType([React.PropTypes.object,React.PropTypes.string]).isRequired,
description: React.PropTypes.string.isRequired,
description: React.PropTypes.string,
linkURL: React.PropTypes.string.isRequired,
linkText: React.PropTypes.string.isRequired
linkText: React.PropTypes.string.isRequired,
children: React.PropTypes.node
};
export class Section extends React.Component {
@ -119,8 +120,9 @@ export class Section extends React.Component {
</div>
<div className="content-section-description">
{this.props.description}
{this.props.children}
</div>
{this.props.children}
</div>
);
}
@ -128,5 +130,6 @@ export class Section extends React.Component {
Section.propTypes = {
id: React.PropTypes.string.isRequired,
title: React.PropTypes.string.isRequired,
description: React.PropTypes.string.isRequired
description: React.PropTypes.string,
children: React.PropTypes.node
};

50
src/components/sectionitem/sectionitem.scss
View file

@ -1,54 +1,68 @@
$title-color: #2898cd;
$description-color: #808080;
/* content-section defaults */
.content-section-item-title {
padding-bottom: 10px;
font-weight: 900;
color: #2898cd;
width: 60%;
display: inline-block;
padding-bottom: 10px;
width: 60%;
line-height: 18px;
color: $title-color;
font-size: 16px;
font-weight: 900;
}
.content-section-item-thumbnail {
width: 100%;
}
.content-section-item-thumbnail-image {
width: 100%;
border-radius: 20px;
}
.content-section-item-description {
width: 100%;
color: #808080;
font-size: 14px;
line-height: 22px;
padding-bottom: 10px;
padding-top: 10px;
display: inline-block;
}
.content-section-item-description {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
line-height: 22px;
color: $description-color;
font-size: 14px;
}
.content-section-full-item,
.content-section-half-item {
display: inline-block;
padding-bottom: 30px;
clear: both;
text-align: left;
padding-bottom: 30px;
vertical-align: top;
text-align: left;
}
.content-section-full-item {
width: 100%;
}
.content-section-half-item {
display: inline-block;
padding-bottom: 30px;
clear: both;
padding-bottom: 30px;
width: 45%;
text-align: left;
vertical-align: top;
text-align: left;
}
.content-section-items-container > .content-section-half-item:nth-child(even) {
margin-left: 10%;
}
/* override styles for content-section-full-item */
.content-section-full-item .content-section-item-thumbnail {
width: 37%;
float: left;
width: 37%;
}
.content-section-full-item .content-section-item-age,
.content-section-full-item .content-section-item-description,
.content-section-full-item .content-section-item-title {

8
src/components/tabnav/tabnav.jsx
View file

@ -5,13 +5,13 @@ import './tabnav.scss';
export default class TabNav extends React.Component {
render () {
return (
<div id='content-nav'>
<div id="content-nav">
{this.props.items.map((tab) => {
return (
<Link to={tab.url} activeClassName='content-nav-item-selected' key={tab.section}>
<div className='content-nav-item' id={tab.section + '-section-nav'}>
<Link to={tab.url} activeClassName="content-nav-item-selected" key={tab.section}>
<div className="content-nav-item" id={tab.section + '-section-nav'}>
<div className={tab.section + '-icon content-nav-item-icon'}></div>
<div className='content-nav-item-description'>
<div className="content-nav-item-description">
{tab.text}
</div>
</div>

67
src/components/tabnav/tabnav.scss
View file

@ -1,55 +1,62 @@
$tabnav-border: #ddd;
$nav-item: #a6a6a6;
$nav-item-selected: #2898cd;
$selected-notch: rgba(0, 0, 0, .5);
$white: #fff;
#content-nav {
height: 100px;
height: 100px;
}
.content-nav-item {
color: #a6a6a6;
width: 33.23%;
float: left;
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
position: relative;
cursor:pointer;
position: relative;
float: left;
border-right: 1px solid $tabnav-border;
border-bottom: 1px solid $tabnav-border;
cursor: pointer;
width: 33.23%;
color: $nav-item;
}
.content-nav-item-selected > .content-nav-item {
color: #2898CD;
color: $nav-item-selected;
}
#content-nav a:last-child .content-nav-item {
border-right: none;
border-right: none;
}
.content-nav-item-selected .content-nav-item:before, .content-nav-item-selected .content-nav-item:after {
content: "";
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 100%;
left: 145px;
.content-nav-item-selected .content-nav-item::before, .content-nav-item-selected .content-nav-item::after {
position: absolute;
top: 100%;
left: 145px;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
content: "";
}
.content-nav-item-selected .content-nav-item:before {
border-top: 10px solid #DDD;
border-top: 10px solid rgba(0, 0, 0, 0.5);
border-top: 10px solid $tabnav-border;
border-top: 10px solid $selected-notch;
}
.content-nav-item-selected .content-nav-item:after{
border-top: 10px solid #FFF;
z-index: 1;
z-index: 1;
border-top: 10px solid $white;
}
.content-nav-item-icon {
width: 77px;
height: 77px;
float: left;
margin-left: 20px;
margin-top: 11px;
float: left;
margin-top: 11px;
margin-left: 20px;
width: 77px;
height: 77px;
}
.content-nav-item-description {
float: left;
line-height: 100px;
margin-left: 20px;
font-size: 14pt;
float: left;
margin-left: 20px;
line-height: 100px;
font-size: 14pt;
}

19
src/views/about/about.jsx
View file

@ -41,8 +41,8 @@ export default class About extends React.Component {
];
return (
<div>
<NavBar selected='about'/>
<div id='content'>
<NavBar selected="about"/>
<div id="content">
<TabNav items={tabs}/>
{this.props.children}
</div>
@ -51,15 +51,18 @@ export default class About extends React.Component {
);
}
}
About.propTypes = {
children: React.PropTypes.node
};
render((
<Router history={browserHistory}>
<Route path='/about' component={About}>
<Route path='info' component={InfoSection}/>
<Route path='press' component={PressSection}/>
<Route path='faq' component={FAQSection}/>
<Route path='videos' component={VideosSection}/>
<IndexRedirect to='info'/>
<Route path="/about" component={About}>
<Route path="info" component={InfoSection}/>
<Route path="press" component={PressSection}/>
<Route path="faq" component={FAQSection}/>
<Route path="videos" component={VideosSection}/>
<IndexRedirect to="info"/>
<Route path="*" component={PageNotFound}/>
</Route>
</Router>

68
src/views/about/about.scss
View file

@ -1,79 +1,75 @@
$question-color: #2898cd;
$question-answer: #808080;
#video-wrapper {
padding-top: 40px;
text-align: center;
padding-top: 40px;
text-align: center;
}
#content-description {
margin-left: 35px;
margin-right: 35px;
}
.content-description-highlight {
border-radius: 10px;
border: 1px solid #ddd;
background-color: #efefef;
padding: 15px;
margin-right: 35px;
margin-left: 35px;
}
.content-description-section {
margin-bottom: 35px;
display: block;
overflow: auto;
display: block;
margin-bottom: 35px;
overflow: auto;
}
.content-description-question {
margin-bottom: 10px;
color: #2898CD;
width: 612px;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
width: 612px;
color: $question-color;
font-size: 20px;
font-weight: bold;
}
.content-description-answer {
margin-bottom: 20px;
color: #808080;
line-height: 22px;
font-size: 15px;
margin-bottom: 20px;
line-height: 22px;
color: $question-answer;
font-size: 15px;
}
/* SUBMENUS */
.content-nav-item {
width: 24.9% !important;
width: 24.9% !important;
}
.info-icon {
background-image: url(/images/infos_b.svg);
background-size: 100%;
background-image: url("/images/infos_b.svg");
background-size: 100%;
}
.content-nav-item-selected .info-icon {
background-image: url(/images/infos_o.svg);
background-image: url("/images/infos_o.svg");
}
.press-icon {
background-image: url(/images/press_b.svg);
background-size: 100%;
background-image: url("/images/press_b.svg");
background-size: 100%;
}
.content-nav-item-selected .press-icon {
background-image: url(/images/press_o.svg);
background-image: url("/images/press_o.svg");
}
.videos-icon {
background-image: url(/images/videos_b.svg);
background-size: 100%;
background-image: url("/images/videos_b.svg");
background-size: 100%;
}
.content-nav-item-selected .videos-icon {
background-image: url(/images/videos_o.svg);
background-image: url("/images/videos_o.svg");
}
.faq-icon {
background-image: url(/images/faq_b.svg);
background-size: 100%;
background-image: url("/images/faq_b.svg");
background-size: 100%;
}
.content-nav-item-selected .faq-icon {
background-image: url(/images/faq_o.svg);
background-image: url("/images/faq_o.svg");
}

85
src/views/about/faq.jsx
View file

@ -3,17 +3,17 @@ import React from 'react';
export default class FAQSection extends React.Component {
render () {
return (
<div className='content-section' id='faq-section'>
<div className='content-section-title'>
<div className="content-section" id="faq-section">
<div className="content-section-title">
Frequently Asked Questions
</div>
<div className='content-section-description'>
<div className="content-section-description">
Find answers to your troubleshooting questions here.
</div>
<div id='content-description'>
<div className='content-description-section'>
<div className='content-description-question'>Will ScratchJr run on my iPad or tablet?</div>
<div className='content-description-answer'>
<div id="content-description">
<div className="content-description-section">
<div className="content-description-question">Will ScratchJr run on my iPad or tablet?</div>
<div className="content-description-answer">
ScratchJr runs on both iPads and Android tablets. It will run on any iPad 2 or later,
including all iPad minis, with iOS 7.0 or later installed. It also runs on any
Android tablet, 7-inches or larger, that are running Android 4.2 (Jelly Bean MR1)
@ -21,14 +21,14 @@ export default class FAQSection extends React.Component {
</div>
</div>
<div className='content-description-section'>
<div className='content-description-question'>Is there a book for ScratchJr?</div>
<div className='content-description-answer'>
<a href='https://www.nostarch.com/scratchjr' target='_blank'>
<div className="content-description-section">
<div className="content-description-question">Is there a book for ScratchJr?</div>
<div className="content-description-answer">
<a href="https://www.nostarch.com/scratchjr" target="_blank">
<img
src='/images/scratchjr-book.png'
width='100'
height='auto'
src="/images/scratchjr-book.png"
width="100"
height="auto"
style={{'float':'right'}}
/>
</a>
@ -37,21 +37,21 @@ export default class FAQSection extends React.Component {
Media Lab, this new book is an easy-to-use, hands on resource for parents and
educators alike to teach children how to code with ScratchJr. Read
an <a
href='https://medium.com/scratchfoundation-blog/helping-young-children-experiment-explore-and-express-themselves-with-code-69a450d42005#.9fq210a4q'
target='_blank'>
href="https://medium.com/scratchfoundation-blog/helping-young-children-experiment-explore-and-express-themselves-with-code-69a450d42005#.9fq210a4q"
target="_blank">
excerpt of the book</a>.
You can buy your copy
through <a href='https://www.nostarch.com/scratchjr' target='_blank'>No Starch Press</a>!
through <a href="https://www.nostarch.com/scratchjr" target="_blank">No Starch Press</a>!
</div>
</div>
<div className='content-description-section'>
<div className='content-description-question'>Will ScratchJr run on my Chromebook?</div>
<div className='content-description-answer'>
<div className="content-description-section">
<div className="content-description-question">Will ScratchJr run on my Chromebook?</div>
<div className="content-description-answer">
In March 2016 a version was released for Chromebooks. You can find <a
href='https://chrome.google.com/webstore/detail/scratchjr/oipimoeophamdcmjcfameoojlbhbgjda'>
href="https://chrome.google.com/webstore/detail/scratchjr/oipimoeophamdcmjcfameoojlbhbgjda">
ScratchJr</a> in the <a
href='https://chrome.google.com/webstore/detail/scratchjr/oipimoeophamdcmjcfameoojlbhbgjda'>
href="https://chrome.google.com/webstore/detail/scratchjr/oipimoeophamdcmjcfameoojlbhbgjda">
Chrome Web Store</a>.<br />
This version was built from the Android version. We have had to remove some features,
such as sharing, due to differences between Android and Chrome OS. We are providing
@ -60,26 +60,26 @@ export default class FAQSection extends React.Component {
</div>
</div>
<div className='content-description-section'>
<div className='content-description-question'>
<div className="content-description-section">
<div className="content-description-question">
Are you planning to release a Web version of ScratchJr?
</div>
<div className='content-description-answer'>
<div className="content-description-answer">
We are still in the early planning stages for a Web version.
</div>
</div>
<div className='content-description-section'>
<div className='content-description-question'>
<div className="content-description-section">
<div className="content-description-question">
I have an Android tablet that is running 4.2+,
but Google Play still says that my device is incompatible.
</div>
<div className='content-description-answer'>
<div className="content-description-answer">
If Google Play doesn't recognize your tablet as meeting the minimum requirements
of ScratchJr, it will not allow it to be installed. If you believe that your tablet
does meet the minimum requirements (7-inch tablet) running Android 4.2 or greater,
and you are willing to side-load the apk, you can download and install a copy of
the <a href='http://scratch-downloads.s3.amazonaws.com/jr/ScratchJr-1.2.1.apk'>
the <a href="http://scratch-downloads.s3.amazonaws.com/jr/ScratchJr-1.2.1.apk">
current version of ScratchJr APK</a>. <br /><br />
Please note that this version will not automatically update when there are new
versions available. We recommend that you sign up for the ScratchJr mailing list
@ -87,11 +87,11 @@ export default class FAQSection extends React.Component {
</div>
</div>
<div className='content-description-section'>
<div className='content-description-question'>
<div className="content-description-section">
<div className="content-description-question">
Can I share a ScratchJr project from one tablet to another?
</div>
<div className='content-description-answer'>
<div className="content-description-answer">
If you are running ScratchJr version 1.0.3 or greater on the iPad, you can share
projects via email or AirDrop. To access the sharing options, go to the Project
Information page by tapping on the yellow button in the top-right corner of the
@ -101,35 +101,36 @@ export default class FAQSection extends React.Component {
</div>
</div>
<div className='content-description-section'>
<div className='content-description-question'>
<div className="content-description-section">
<div className="content-description-question">
Why can't ScratchJr record a sound or take a picture
</div>
<div className='content-description-answer'>
<div className="content-description-answer">
If ScratchJr can't record sounds or take a picture with the camera, it might be
that you didn't give ScratchJr access to the camera or microphone when you first
downloaded the app. You can change this by going to <em>Settings > Privacy > Camera</em> on your device.
downloaded the app. You can change this by going
to <em>Settings > Privacy > Camera</em> on your device.
If the ScratchJr toggle is off, turn it on. Do the same for the microphone,
under <em>Settings > Privacy > Microphone</em>
</div>
</div>
<div className='content-description-section'>
<div className='content-description-question'>
<div className="content-description-section">
<div className="content-description-question">
Will ScratchJr be available in other languages?
</div>
<div className='content-description-answer'>
<div className="content-description-answer">
ScratchJr version 1.2 (released April 2016) supports both
English and Spanish, and we hope to include translation to other
languages in future versions of ScratchJr. If you're
interested in volunteering to help with translations, please email <a
href='mailto:info@scratchjr.org'>info@scratchjr.org</a> with your
href="mailto:info@scratchjr.org">info@scratchjr.org</a> with your
name and the language you can help with.
</div>
</div>
<div className='content-description-section'>
<em className='content-description-answer'>Last updated: April 21, 2016</em>
<div className="content-description-section">
<em className="content-description-answer">Last updated: April 21, 2016</em>
</div>
</div>
</div>

222
src/views/about/info.jsx
View file

File diff suppressed because one or more lines are too long

7
src/views/about/info.scss
View file

@ -3,6 +3,9 @@
#info-section-nav {
width: 25.9% !important;
}
#press-section-nav, #faq-section-nav, videos-section-nav {
width: 23.9% !important;
#press-section-nav,
#faq-section-nav,
#videos-section-nav {
width: 23.9% !important;
}

6
src/views/about/press.jsx
View file

@ -5,11 +5,11 @@ import PressItem from '../../components/pressitem/pressitem.jsx';
export default class PressSection extends React.Component {
render () {
return (
<div className='content-section' id='press-section'>
<div className='content-section-title'>
<div className="content-section" id="press-section">
<div className="content-section-title">
Press
</div>
<div className='content-section-description'>
<div className="content-section-description">
Read what people are saying about ScratchJr.
</div>
{articles.map((article, index) => {

60
src/views/about/videos.jsx
View file

@ -4,59 +4,57 @@ import {SectionItem} from '../../components/sectionitem/sectionitem.jsx';
export default class VideosSection extends React.Component {
render () {
return (
<div className='content-section' id='videos-section'>
<div className='content-section-title'>
<div className="content-section" id="videos-section">
<div className="content-section-title">
Videos
</div>
<div className='content-section-description'>
<div className="content-section-description">
Webinars for educators and parents
</div>
<div className='content-section-items-container'>
<div className="content-section-items-container">
<SectionItem
title='Pre-Launch Webinar (March 2014)'
format='half'
title="Pre-Launch Webinar (March 2014)"
format="half"
thumbnail={
<iframe
width = '342'
height = '192'
src = 'http://www.youtube.com/embed/mZAawCvDlBM?rel=0'
frameborder = '0'
allowfullscreen >
width="342"
height="192"
src="http://www.youtube.com/embed/mZAawCvDlBM?rel=0"
frameBorder="0"
allowFullScreen >
</iframe>
}
description='Project leaders Marina Bers and Mitch
description="Project leaders Marina Bers and Mitch
Resnick demonstrate how to create a simple project,
discuss ScratchJr features, and share favorite stories
from beta-testing the app in classrooms.'
from beta-testing the app in classrooms."
/>
<SectionItem
title='Post-Launch Webinar (August 2014)'
format='half'
title="Post-Launch Webinar (August 2014)"
format="half"
thumbnail={
<iframe
width = '342'
height = '192'
src = 'http://www.youtube.com/embed/owAA_IjdVUM?rel=0'
frameborder = '0'
allowfullscreen>
width="342"
height="192"
src="http://www.youtube.com/embed/owAA_IjdVUM?rel=0"
frameBorder="0"
allowFullScreen>
</iframe>
}
description='Project leaders Marina Bers and Mitch Resnick
description="Project leaders Marina Bers and Mitch Resnick
respond to questions about the initial release of ScratchJr,
and discuss future directions for the programming environment.'
and discuss future directions for the programming environment."
/>
<SectionItem
title='EdWeb Webinar'
format='half'
title="EdWeb Webinar"
format="half"
thumbnail={
<iframe
src = '//player.vimeo.com/video/108504313?title=0&amp;byline=0&amp;portrait=0'
width = '342'
height = '214'
frameborder = '0'
webkitallowfullscreen
mozallowfullscreen
allowfullscreen >
src="//player.vimeo.com/video/108504313?title=0&amp;byline=0&amp;portrait=0"
width="342"
height="214"
frameBorder="0"
allowFullScreen >
</iframe>
}
description="Research Coordinator Amanda Strawhacker explores pedagogy

14
src/views/donate/donate.jsx
View file

@ -9,23 +9,23 @@ export default class Donate extends React.Component {
render () {
return (
<div>
<NavBar selected='donate'/>
<div id='content'>
<div className='content-section'>
<NavBar selected="donate"/>
<div id="content">
<div className="content-section">
<h1>Donate</h1>
<p>
If you enjoy using the free ScratchJr app, please consider
making a donation to the Scratch Foundation (
<a href='http://www.scratchfoundation.org/'>www.scratchfoundation.org</a>),
<a href="http://www.scratchfoundation.org/">www.scratchfoundation.org</a>),
a nonprofit organization that provides ongoing support for ScratchJr.
We appreciate donations of all sizes, large and small.
</p>
<div className='donation-block'>
<a href='https://secure.donationpay.org/scratchfoundation/' id='donate-button'>
<div className='blue-button'>
<div className="donation-block">
<a href="https://secure.donationpay.org/scratchfoundation/" id="donate-button">
<div className="blue-button">
Donate
</div>
</a>

22
src/views/donate/donate.scss
View file

@ -1,18 +1,20 @@
$text-color: #808080;
p {
margin-left: 35px;
margin-right: 35px;
color: #808080;
line-height: 22px;
font-size: 15px;
margin-right: 35px;
margin-left: 35px;
line-height: 22px;
color: $text-color;
font-size: 15px;
}
.donation-block {
text-align: center;
display: block;
margin-bottom: 20px;
display: block;
margin-bottom: 20px;
text-align: center;
}
#donate-button {
display: inline-block;
vertical-align: bottom;
display: inline-block;
vertical-align: bottom;
}

190
src/views/eula/eula.jsx
View file

@ -10,85 +10,227 @@ export default class Eula extends React.Component {
return (
<div>
<NavBar/>
<div id='content'>
<div className='content-section'>
<div id="content">
<div className="content-section">
<h1>END USER LICENSE AGREEMENT</h1>
<p>
This End User License Agreement ('Agreement') applies to the ScratchJr Application developed collaboratively by the Massachusetts Institute of Technology ('MIT') and the Trustees of Tufts College ('Tufts University' or 'Tufts'), collectively the Licensors ('Licensors'), which is licensed, not sold, to the End User for use in accordance with the terms and conditions herein.
This End User License Agreement ('Agreement') applies to the ScratchJr Application
developed collaboratively by the Massachusetts Institute of Technology ('MIT') and the
Trustees of Tufts College ('Tufts University' or 'Tufts'), collectively the Licensors
('Licensors'), which is licensed, not sold, to the End User for use in accordance with
the terms and conditions herein.
</p>
<h2>I. DEFINITIONS</h2>
<p>
END USER. An End-User is either (i) an individual ('Individual'), (ii) an Individual Qualified Educational Institution; or (iii) a Corporation. An 'Individual' means a person acquiring the Application for personal use, not for redistribution. An 'Individual Qualified Educational Institution' means an organization acquiring the Application for its own internal use for faculty, staff and students including (a) a public or private entity, the primary mission of which is directly involved in, or in support of, instruction rather than research, and that is a bona fide, educational institution organized and operated solely for pre-K-12 educational purposes; (b) a division or department of a public or private institution of higher learning; or (c) a public or private entity, the primary mission of which is directly involved in, or in support of instruction, organized solely for in-service teacher education. A Corporation is any entity or organization other than an Individual Qualified Educational Institution that acquires the Application for organizational use.
END USER. An End-User is either (i) an individual ('Individual'), (ii) an Individual
Qualified Educational Institution; or (iii) a Corporation. An 'Individual' means a
person acquiring the Application for personal use, not for redistribution. An
'Individual Qualified Educational Institution' means an organization acquiring the
Application for its own internal use for faculty, staff and students including (a) a
public or private entity, the primary mission of which is directly involved in, or in
support of, instruction rather than research, and that is a bona fide, educational
institution organized and operated solely for pre-K-12 educational purposes; (b) a
division or department of a public or private institution of higher learning; or (c) a
public or private entity, the primary mission of which is directly involved in, or in
support of instruction, organized solely for in-service teacher education. A
Corporation is any entity or organization other than an Individual Qualified
Educational Institution that acquires the Application for organizational use.
</p>
<p>
APPLICATION. 'Application,' as used in this Agreement, includes the ScratchJr Application, its underlying source code and all upgrades made thereto. The Licensors are not obligated to provide upgrades under this Agreement.
APPLICATION. 'Application,' as used in this Agreement, includes the ScratchJr
Application, its underlying source code and all upgrades made thereto. The Licensors
are not obligated to provide upgrades under this Agreement.
</p>
<h2>II. SCOPE OF LICENSE</h2>
<p>
LICENSE GRANT. This Agreement grants to End User a restricted, revocable, nonexclusive, nontransferable, and non-assignable license (the 'License') to use the Application on an Android device that the End User owns or controls. This Agreement shall govern upgrades to the Application that repair, replace or enhance the original product.
LICENSE GRANT. This Agreement grants to End User a restricted, revocable,
nonexclusive, nontransferable, and non-assignable license (the 'License') to use the
Application on an Android device that the End User owns or controls. This Agreement
shall govern upgrades to the Application that repair, replace or enhance the original
product.
</p>
<p>
End User shall not: (i) Distribute the Application, including making it available over a network where it could be used by multiple devices at the same time; (ii) Transfer, rent, lease, lend, sell, redistribute, or sublicense the Application; (iii) Copy, decompile, reverse engineer, disassemble, attempt to derive the source code, modify, or create derivative works of the Application; (iv) Ship, transfer, export into any country, or use the Application in any manner prohibited by the United States Export Administration Act or any other export laws, restrictions, or regulations; (v) Export or re-export the Application into any United States embargoed countries or to anyone on the United States Treasury Department list of Specially Designated Nationals or the United States Department of Commerce Denied Person's List or Entity List; (vi) Be located in any country or named on any list designated in (5) above; or (vii) Use the Application in any manner prohibited by law. Any attempt to breach the foregoing shall be deemed a material breach of this Agreement and is subject to damages. The Licensors reserve the right, in their discretion, to terminate the License at any time, and to change, suspend, remove, or disable access to the Application.
End User shall not: (i) Distribute the Application, including making it available over
a network where it could be used by multiple devices at the same time; (ii) Transfer,
rent, lease, lend, sell, redistribute, or sublicense the Application; (iii) Copy,
decompile, reverse engineer, disassemble, attempt to derive the source code, modify,
or create derivative works of the Application; (iv) Ship, transfer, export into any
country, or use the Application in any manner prohibited by the United States Export
Administration Act or any other export laws, restrictions, or regulations; (v) Export
or re-export the Application into any United States embargoed countries or to anyone
on the United States Treasury Department list of Specially Designated Nationals or the
United States Department of Commerce Denied Person's List or Entity List; (vi) Be
located in any country or named on any list designated in (5) above; or (vii) Use the
Application in any manner prohibited by law. Any attempt to breach the foregoing shall
be deemed a material breach of this Agreement and is subject to damages. The Licensors
reserve the right, in their discretion, to terminate the License at any time, and to
change, suspend, remove, or disable access to the Application.
</p>
<p>
If the Application enables access to third-party programs or websites, the End User may be required to accept the third party's additional terms. Licensors are not responsible for examining or evaluating the content, accuracy, completeness, timeliness, validity, legality, decency, quality, or other aspect of any third-party program or website. End User agrees to use third-party products and service at End User's sole risk. Licensors shall not be liable to the End User for harms arising from End User's access to or use of third-party products, services or content.
If the Application enables access to third-party programs or websites, the End User
may be required to accept the third party's additional terms. Licensors are not
responsible for examining or evaluating the content, accuracy, completeness,
timeliness, validity, legality, decency, quality, or other aspect of any third-party
program or website. End User agrees to use third-party products and service at End
User's sole risk. Licensors shall not be liable to the End User for harms arising from
End User's access to or use of third-party products, services or content.
</p>
<h2>III. INTELLECTUAL PROPERTY</h2>
<p>
RESERVATION OF RIGHTS. The software, content, visual interfaces, interactive features, information, graphics, design, compilation, computer code and all other elements of the Application (the 'ScratchJr Materials'), are protected by copyright, trade dress, patent, and trademark laws of the United States and other jurisdictions, international conventions, and all other relevant intellectual property and proprietary rights, and applicable laws. All ScratchJr Materials, including intellectual property rights therein and thereto, are the property of the Licensors. The Licensors reserve all rights not expressly granted in this Agreement. End User shall not acquire any right, title or interest to the ScratchJr Materials, whether by implication, estoppel, or otherwise, except for the limited rights set forth in this Agreement. To the extent this Agreement authorizes End User to make copies of the Application, End User shall ensure that any such copies contain the same copyright and proprietary notices that appear in the copy of the Application the End User downloaded. Nothing in this Agreement grants any copyrights, trademark rights, patent rights, trade secret protection, or other intellectual property rights to End User.
RESERVATION OF RIGHTS. The software, content, visual interfaces, interactive features,
information, graphics, design, compilation, computer code and all other elements of
the Application (the 'ScratchJr Materials'), are protected by copyright, trade dress,
patent, and trademark laws of the United States and other jurisdictions, international
conventions, and all other relevant intellectual property and proprietary rights, and
applicable laws. All ScratchJr Materials, including intellectual property rights
therein and thereto, are the property of the Licensors. The Licensors reserve all
rights not expressly granted in this Agreement. End User shall not acquire any right,
title or interest to the ScratchJr Materials, whether by implication, estoppel, or
otherwise, except for the limited rights set forth in this Agreement. To the extent
this Agreement authorizes End User to make copies of the Application, End User shall
ensure that any such copies contain the same copyright and proprietary notices that
appear in the copy of the Application the End User downloaded. Nothing in this
Agreement grants any copyrights, trademark rights, patent rights, trade secret
protection, or other intellectual property rights to End User.
</p>
<p>
In the event that a third party claims that the Application infringes that third party's intellectual property rights, the Licensors will be solely responsible for the investigation, defense, settlement, and discharge of any such intellectual property infringement claim, provided that End User promptly notifies the Licensors in writing of any such claim and Licensors are permitted to control fully the defense and any settlement of such claim. End User shall cooperate with Licensors in the defense of such claim. End User shall not undertake any action in response to any infringement or alleged infringement of the Application that would be prejudicial to any defense that Licensors may have to the same. Notwithstanding the foregoing, such indemnity shall not apply if the alleged infringement results from use of the Application in conjunction with any other software, the combination of the Application with equipment not approved by Licensor, or unlicensed activities, including, without limitation, unauthorized modification of the Application.
In the event that a third party claims that the Application infringes that third
party's intellectual property rights, the Licensors will be solely responsible for the
investigation, defense, settlement, and discharge of any such intellectual property
infringement claim, provided that End User promptly notifies the Licensors in writing
of any such claim and Licensors are permitted to control fully the defense and any
settlement of such claim. End User shall cooperate with Licensors in the defense of
such claim. End User shall not undertake any action in response to any infringement or
alleged infringement of the Application that would be prejudicial to any defense that
Licensors may have to the same. Notwithstanding the foregoing, such indemnity shall
not apply if the alleged infringement results from use of the Application in
conjunction with any other software, the combination of the Application with equipment
not approved by Licensor, or unlicensed activities, including, without limitation,
unauthorized modification of the Application.
</p>
<h2>IV. DISCLAIMER OF WARRANTY</h2>
<p>
THE APPLICATION IS PROVIDED FREE OF CHARGE AND 'AS IS,' WITHOUT WARRANTIES OF ANY KIND, EXPLICIT OR IMPLICIT. WARRANTIES DISCLAIMED INCLUDE BUT ARE NOT LIMITED TO THOSE REGARDING FREEDOM FROM DEFECTS, FREEDOM FROM VIRUSES, THE ABILITY TO OPERATE CONTINUOUSLY, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, SATISFACTORY QUALITY, AND NON-INTERFERENCE. THE END USER BEARS THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE APPLICATION. LICENSORS DO NOT WARRANT OR REPRESENT THAT THE USE OF THE APPLICATION WILL NOT INFRINGE ANY PATENTS, COPYRIGHTS, TRADEMARKS, OR OTHER RIGHTS OF THIRD PARTIES OR THAT DEFECTS IN THE APPLICATION WILL BE CORRECTED. LICENSORS SHALL NOT BE LIABLE FOR ANY LIABILITY OR DAMAGES WITH RESPECT TO ANY CLAIM BY THE END USER OR ANY THIRD PARTY ARISING FROM THE LICENSE GRANTED OR USE OF THE APPLICATION. THE END USER SHALL BEAR THE ENTIRE COST OF ANY SERVICES AND REPAIRS TO THE APPLICATION. THIS DISCLAIMER OF WARRANTY IS AN ESSENTIAL PART OF THIS AGREEMENT. NO ORAL OR WRITTEN INFORMATION OR ADVICE PROVIDED BY LICENSORS OR THE APPLICATION PROVIDER SHALL CREATE A WARRANTY. NO USE OF THE APPLICATION IS AUTHORIZED HEREUNDER EXCEPT UNDER THIS DISCLAIMER.
THE APPLICATION IS PROVIDED FREE OF CHARGE AND 'AS IS,' WITHOUT WARRANTIES OF ANY
KIND, EXPLICIT OR IMPLICIT. WARRANTIES DISCLAIMED INCLUDE BUT ARE NOT LIMITED TO THOSE
REGARDING FREEDOM FROM DEFECTS, FREEDOM FROM VIRUSES, THE ABILITY TO OPERATE
CONTINUOUSLY, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, SATISFACTORY QUALITY,
AND NON-INTERFERENCE. THE END USER BEARS THE ENTIRE RISK AS TO THE QUALITY AND
PERFORMANCE OF THE APPLICATION. LICENSORS DO NOT WARRANT OR REPRESENT THAT THE USE OF
THE APPLICATION WILL NOT INFRINGE ANY PATENTS, COPYRIGHTS, TRADEMARKS, OR OTHER RIGHTS
OF THIRD PARTIES OR THAT DEFECTS IN THE APPLICATION WILL BE CORRECTED. LICENSORS SHALL
NOT BE LIABLE FOR ANY LIABILITY OR DAMAGES WITH RESPECT TO ANY CLAIM BY THE END USER
OR ANY THIRD PARTY ARISING FROM THE LICENSE GRANTED OR USE OF THE APPLICATION. THE END
USER SHALL BEAR THE ENTIRE COST OF ANY SERVICES AND REPAIRS TO THE APPLICATION. THIS
DISCLAIMER OF WARRANTY IS AN ESSENTIAL PART OF THIS AGREEMENT. NO ORAL OR WRITTEN
INFORMATION OR ADVICE PROVIDED BY LICENSORS OR THE APPLICATION PROVIDER SHALL CREATE A
WARRANTY. NO USE OF THE APPLICATION IS AUTHORIZED HEREUNDER EXCEPT UNDER THIS
DISCLAIMER.
</p>
<h2>V. LIMITATION OF LIABILITY</h2>
<p>
LICENSORS SHALL NOT BE LIABLE FOR PERSONAL INJURY, PROPERTY DAMAGE, DATA LOSS, LOSS OF USE, BUSINESS INTERRUPTION, DAMAGES OR LOSSES UNDER ANY THEORY OF LAW OR EQUITY, OR FOR ANY INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OF OR INABILITY TO USE THE APPLICATION, INCLUDING WITHOUT LIMITATION, COMPUTER FAILURE OR MALFUNCTION OR FOR ANY OTHER COMMERCIAL DAMAGES OR LOSSES, EVEN IF ADVISED OF THE POSSIBILITY THEREOF, AND REGARDLESS OF THE LEGAL OR EQUITABLE THEORY, WHETHER IN CONTRACT, TORT OR OTHERWISE, UPON WHICH THE CLAIM IS BASED. THE END USER IS LIABLE FOR ALL DAMAGES WITHOUT LIMITATION THAT ARE CAUSED BY ABUSE OF THE APPLICATION. THE END USER HAS NO RIGHT TO CLAIM ANY INDEMNIFICATION BASED ON THE END USER'S USE OF THE APPLICATION.
LICENSORS SHALL NOT BE LIABLE FOR PERSONAL INJURY, PROPERTY DAMAGE, DATA LOSS, LOSS OF
USE, BUSINESS INTERRUPTION, DAMAGES OR LOSSES UNDER ANY THEORY OF LAW OR EQUITY, OR
FOR ANY INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE
OF OR INABILITY TO USE THE APPLICATION, INCLUDING WITHOUT LIMITATION, COMPUTER FAILURE
OR MALFUNCTION OR FOR ANY OTHER COMMERCIAL DAMAGES OR LOSSES, EVEN IF ADVISED OF THE
POSSIBILITY THEREOF, AND REGARDLESS OF THE LEGAL OR EQUITABLE THEORY, WHETHER IN
CONTRACT, TORT OR OTHERWISE, UPON WHICH THE CLAIM IS BASED. THE END USER IS LIABLE FOR
ALL DAMAGES WITHOUT LIMITATION THAT ARE CAUSED BY ABUSE OF THE APPLICATION. THE END
USER HAS NO RIGHT TO CLAIM ANY INDEMNIFICATION BASED ON THE END USER'S USE OF THE
APPLICATION.
</p>
<h2>VI. CONTENT</h2>
<p>
To the extent that the Application allows for the creation of user-generated content and images, the End User represents and warrants that: (i) End User is the owner or authorized user of all of the content generated by the End User; (ii) End User will not transmit or distribute content that advocates, promotes, incites, instructs, informs, assists, or otherwise encourages violence or any illegal activities; infringes or violates the copyright, patent, trademark, service mark, trade name, trade secret, or other intellectual property rights of any third party, or of any right of privacy or publicity; contains inappropriate, harassing, abusive, profane, hateful, defamatory, libelous, threatening, obscene, indecent, vulgar, pornographic or otherwise objectionable or unlawful content; is harmful to minors; or violates any law, statute, ordinance, or regulation. Licensors shall not be liable for content created by the End User using the Application.
To the extent that the Application allows for the creation of user-generated content
and images, the End User represents and warrants that: (i) End User is the owner or
authorized user of all of the content generated by the End User; (ii) End User will
not transmit or distribute content that advocates, promotes, incites, instructs,
informs, assists, or otherwise encourages violence or any illegal activities;
infringes or violates the copyright, patent, trademark, service mark, trade name,
trade secret, or other intellectual property rights of any third party, or of any
right of privacy or publicity; contains inappropriate, harassing, abusive, profane,
hateful, defamatory, libelous, threatening, obscene, indecent, vulgar, pornographic or
otherwise objectionable or unlawful content; is harmful to minors; or violates any
law, statute, ordinance, or regulation. Licensors shall not be liable for content
created by the End User using the Application.
</p>
<p>
To the maximum extent permitted by law, End User agrees to defend, indemnify and hold Licensors harmless from any and all claims, suits, losses, liability, costs or expenses, including but not limited to reasonable attorneys' fees, arising from or incurred as a result of End User's use of the Application or any breach by End User of this Agreement.
To the maximum extent permitted by law, End User agrees to defend, indemnify and hold
Licensors harmless from any and all claims, suits, losses, liability, costs or
expenses, including but not limited to reasonable attorneys' fees, arising from or
incurred as a result of End User's use of the Application or any breach by End User of
this Agreement.
</p>
<h2>VII. CONSENT TO USE DATA</h2>
<p>
Licensors may collect and use End User technical data and related information to facilitate Application updates and other uses. Licensors may use End User information that does not personally identify the End User to improve the Application and to conduct academic research.
Licensors may collect and use End User technical data and related information to
facilitate Application updates and other uses. Licensors may use End User information
that does not personally identify the End User to improve the Application and to
conduct academic research.
</p>
<h2>VIII. COMMERCIAL ITEMS</h2>
<p>
NOTICE TO U.S. GOVERNMENT END USERS. The Application and related documentation are 'Commercial Items,' as that term is defined in 48 C.F.R. ¤ 2.101, consisting of 'Commercial Computer Software' and 'Commercial Computer Software Documentation,' as such terms are used in 48 C.F.R. ¤ 12.212 or 48 C.F.R. ¤ 227.7202, as applicable. The Application is being licensed to U.S. Government End Users (a) only as Commercial Items and (b) with only those rights as are granted to all other End Users pursuant to the terms and conditions herein.
NOTICE TO U.S. GOVERNMENT END USERS. The Application and related documentation are
'Commercial Items,' as that term is defined in 48 C.F.R. ¤ 2.101, consisting of
'Commercial Computer Software' and 'Commercial Computer Software Documentation,' as
such terms are used in 48 C.F.R. ¤ 12.212 or 48 C.F.R. ¤ 227.7202, as applicable. The
Application is being licensed to U.S. Government End Users (a) only as Commercial
Items and (b) with only those rights as are granted to all other End Users pursuant to
the terms and conditions herein.
</p>
<h2>IX. TERMINATION</h2>
<p>
This Agreement is effective until terminated. End User's rights under this Agreement will terminate automatically without notice if End User fails to comply with any of the terms herein. Upon termination End User shall cease all use of the Application and shall destroy all copies of the Application, including related documentation.
This Agreement is effective until terminated. End User's rights under this Agreement
will terminate automatically without notice if End User fails to comply with any of
the terms herein. Upon termination End User shall cease all use of the Application and
shall destroy all copies of the Application, including related documentation.
</p>
<h2>X. MISCELLANEOUS</h2>
<p>
ENTIRE AGREEMENT. This Agreement represents the entire understanding between the Licensor and End User with respect to its subject matter and supersedes all contemporaneous and previous statements, representations, agreements, and understandings pertaining to the subject matter hereof.
ENTIRE AGREEMENT. This Agreement represents the entire understanding between the
Licensor and End User with respect to its subject matter and supersedes all
contemporaneous and previous statements, representations, agreements, and
understandings pertaining to the subject matter hereof.
</p>
<p>
SEVERABILITY. In the event that any provision of this Agreement is determined by a court of competent jurisdiction to be invalid or unenforceable, the remaining provisions of this Agreement shall be valid and enforceable to the extent permitted by law. WAIVER. The failure of the Licensors to enforce any of the terms and conditions of this Agreement shall not be construed as a waiver of such term, condition or right.
SEVERABILITY. In the event that any provision of this Agreement is determined by a
court of competent jurisdiction to be invalid or unenforceable, the remaining
provisions of this Agreement shall be valid and enforceable to the extent permitted by
law. WAIVER. The failure of the Licensors to enforce any of the terms and conditions
of this Agreement shall not be construed as a waiver of such term, condition or right.
</p>
<p>
GOVERNING LAW. This Agreement will be governed by the laws of the Commonwealth of Massachusetts, excluding the application of its conflict of laws principles. This Agreement will not be governed by the United Nations Convention on Contracts for the international sale of goods, the application of which is expressly excluded.
GOVERNING LAW. This Agreement will be governed by the laws of the Commonwealth of
Massachusetts, excluding the application of its conflict of laws principles. This
Agreement will not be governed by the United Nations Convention on Contracts for the
international sale of goods, the application of which is expressly excluded.
</p>
<p>
AMENDMENT. From time to time we may modify or amend this Agreement. In the event that we do, you will be able to review the amended Agreement, and we will ask you if you agree to be bound by all the modified terms. If you agree to the modified terms, they will apply to your use of the Application from that point forward. If you do not agree to the modified terms, you may not be able to continue to use the Application.
AMENDMENT. From time to time we may modify or amend this Agreement. In the event that
we do, you will be able to review the amended Agreement, and we will ask you if you
agree to be bound by all the modified terms. If you agree to the modified terms, they
will apply to your use of the Application from that point forward. If you do not agree
to the modified terms, you may not be able to continue to use the Application.
</p>
<h2>XI. EMBARGOES AND RESTRICTIONS</h2>
<p>
End User hereby represents and warrants that End User (i) is not located in a country that is subject to a U.S. Government embargo, or that has been designated by the U.S. Government as a 'terrorist supporting' country; and (ii) is not listed on any U.S. Government list of prohibited or restricted parties.
End User hereby represents and warrants that End User (i) is not located in a country
that is subject to a U.S. Government embargo, or that has been designated by the U.S.
Government as a 'terrorist supporting' country; and (ii) is not listed on any U.S.
Government list of prohibited or restricted parties.
</p>
<p>
If the Licensors provide a translation of the English language version of this Agreement, the translation is provided solely for convenience, and the English version shall prevail.
If the Licensors provide a translation of the English language version of this
Agreement, the translation is provided solely for convenience, and the English version
shall prevail.
</p>
<p>
End User questions, complaints, or claims with respect to the Application should be directed to: Eliot-Pearson Department of Child Development, Department of Computer Sciences, Tufts University, Office #164, 105 College Avenue, Medford, MA 02155; Email: Marina.Bers@tufts.edu; Phone: (617) 627-4490; and Mitchel Resnick, Professor of Learning Research, MIT Media Laboratory, 75 Amherst Street, Cambridge, MA 02142; Email: mres@media.mit.edu; Phone: (617) 253-9783.
End User questions, complaints, or claims with respect to the Application should be
directed to: Eliot-Pearson Department of Child Development, Department of Computer
Sciences, Tufts University, Office #164, 105 College Avenue, Medford, MA 02155;
Email: Marina.Bers@tufts.edu; Phone: (617) 627-4490; and Mitchel Resnick, Professor of
Learning Research, MIT Media Laboratory, 75 Amherst Street, Cambridge, MA 02142;
Email: mres@media.mit.edu; Phone: (617) 253-9783.
</p>
</div>
</div>

23
src/views/eula/eula.scss
View file

@ -1,15 +1,18 @@
$text-color: #808080;
$h2-color: #2898cd;
p {
margin-left: 35px;
margin-right: 35px;
color: #808080;
line-height: 22px;
font-size: 15px;
margin-right: 35px;
margin-left: 35px;
line-height: 22px;
color: $text-color;
font-size: 15px;
}
h2 {
margin-left: 35px;
margin-top: 10px;
margin-bottom: 0px;
font-size: 24px;
color: #2898cd;
margin-top: 10px;
margin-bottom: 0;
margin-left: 35px;
color: $h2-color;
font-size: 24px;
}

60
src/views/hoc/hoc.jsx
View file

@ -9,45 +9,45 @@ export default class HourOfCode extends React.Component {
return (
<div>
<NavBar/>
<div id='content'>
<div className='content-section'>
<div className='content-section-title'>
<div id="content">
<div className="content-section">
<div className="content-section-title">
Try Coding with ScratchJr
</div>
<div className='content-section-description'>
<div className="content-section-description">
Try these teacher-led activities to explore creative coding with ScratchJr.
</div>
<div className='content-section-items-container'>
<div className="content-section-items-container">
<StaticLinkSectionItem
format='full'
title='Can I Make the Sun Set?'
thumbnail='/images/activitycards/card06-sun.png'
description=
'Students will get an introduction to programming by making a sun set over a city
landscape! [Ages 5 - 9. Programming, Storytelling, Mathematics,Creativity] '
linkURL='https://drive.google.com/file/d/0B_kqMacZctDuTG5CdEhoR2o3M0E/view'
linkText='See more'/>
format="full"
title="Can I Make the Sun Set?"
thumbnail="/images/activitycards/card06-sun.png"
linkURL="https://drive.google.com/file/d/0B_kqMacZctDuTG5CdEhoR2o3M0E/view"
linkText="See more">
Students will get an introduction to programming by making a sun set over a city
landscape! <em>Ages 5 - 9. Programming, Storytelling, Mathematics,Creativity</em>
</StaticLinkSectionItem>
<StaticLinkSectionItem
format='full'
title='Can I Make a Spooky Forest?'
thumbnail='/images/activitycards/card05-forest.png'
description=
'Students will learn more features of ScratchJr by creating a spooky
forest with multiple characters! [Ages 5 - 9. Art, Storytelling, Sequence] '
linkURL='https://drive.google.com/file/d/0B_kqMacZctDuWDRtLXQwRWp4ZGc/view'
linkText='See more'/>
format="full"
title="Can I Make a Spooky Forest?"
thumbnail="/images/activitycards/card05-forest.png"
linkURL="https://drive.google.com/file/d/0B_kqMacZctDuWDRtLXQwRWp4ZGc/view"
linkText="See more">
Students will learn more features of ScratchJr by creating a spooky
forest with multiple characters! <em>Ages 5 - 9. Art, Storytelling, Sequence</em>
</StaticLinkSectionItem>
<StaticLinkSectionItem
format='full'
title='Can I Make My Characters Greet Each Other?'
thumbnail='/images/activitycards/card08-greet.png'
description=
'Students will learn advanced features of the ScratchJr app when
they make a dog and kitten meet each other and exchange hellos! [Ages 5 - 9.
Programming, Storytelling, Mathematics, Creativity] '
linkURL='https://drive.google.com/file/d/0B_kqMacZctDuNVg0QTJaWUR6WVE/view'
linkText='See more'/>
format="full"
title="Can I Make My Characters Greet Each Other?"
thumbnail="/images/activitycards/card08-greet.png"
linkURL="https://drive.google.com/file/d/0B_kqMacZctDuNVg0QTJaWUR6WVE/view"
linkText="See more">
Students will learn advanced features of the ScratchJr app when
they make a dog and kitten meet each other and exchange hellos! <em>
Ages 5 - 9. Programming, Storytelling, Mathematics, Creativity</em>
</StaticLinkSectionItem>
</div>
</div>
</div>

87
src/views/index/index.jsx
View file

@ -21,48 +21,48 @@ export default class Index extends React.Component {
<NavBar/>
<Carousel items={images}/>
<div id='content'>
<div id='announcement-banner'>
<div id="content">
<div id="announcement-banner">
ScratchJr is available as a free app for <a
href='https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8'>
href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">
iPads</a> and <a
href='https://play.google.com/store/apps/details?id=org.scratchjr.android'>
href="https://play.google.com/store/apps/details?id=org.scratchjr.android">
Android</a> tablets.
</div>
<div id='content-text'>
<div id='content-header-first'>
<div id="content-text">
<div id="content-header-first">
ScratchJr
</div>
{/* end content-header-first */}
<div id='content-header-second'>
<div id="content-header-second">
Coding for young children
</div>
{/* end content-header-second */}
<div id='content-body'>
<div id="content-body">
Coding is the new literacy! With ScratchJr, young children (ages 5-7) can
program their own interactive stories and games. In the process, they learn to
solve problems, design projects, and express themselves creatively on the
computer.
<div id='store-badges'>
<a href='https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8'>
<img alt='Download on the App Store' src='/images/Apple_appstore.svg'/>
<div id="store-badges">
<a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">
<img alt="Download on the App Store" src="/images/Apple_appstore.svg"/>
</a>
<a href='https://play.google.com/store/apps/details?id=org.scratchjr.android'>
<a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">
<img
alt='Get it on Google Play'
src='/images/GooglePlay.svg' />
alt="Get it on Google Play"
src="/images/GooglePlay.svg" />
</a>
<a
href='https://chrome.google.com/webstore/detail/scratchjr/oipimoeophamdcmjcfameoojlbhbgjda'>
href="https://chrome.google.com/webstore/detail/scratchjr/oipimoeophamdcmjcfameoojlbhbgjda">
<img
alt='Download on the Chrome Web Store'
src='/images/ChromeWebStore_Badge.svg'/>
alt="Download on the Chrome Web Store"
src="/images/ChromeWebStore_Badge.svg"/>
</a>
<a href='https://www.amazon.com/gp/product/B01AKGTD2E'>
<a href="https://www.amazon.com/gp/product/B01AKGTD2E">
<img
alt='Get it on Amazon'
src='/images/amazon-underground-app-us-black.svg'/>
alt="Get it on Amazon"
src="/images/amazon-underground-app-us-black.svg"/>
</a>
</div>
{/* end store-badges */}
@ -70,53 +70,56 @@ export default class Index extends React.Component {
{/* end content-body */}
</div>
{/* end content-text */}
<div id='content-graphic'>
<img id='content-graphic-item' src='/images/homegraphic.png'/>
<div id="content-graphic">
<img id="content-graphic-item" src="/images/homegraphic.png"/>
</div>
{/* end content-graphic */}
<div className='content-news'>
<div className='content-news-header'>
<div className="content-news">
<div className="content-news-header">
News
</div>
<div className='content-news-body'>
ScratchJr is now available in Spanish for <a href='https://play.google.com/store/apps/details?id=org.scratchjr.android'>
<div className="content-news-body">
ScratchJr is now available in Spanish f
or <a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">
Android
</a> and <a
href='https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8'>
href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">
iOS
</a> tablets!
</div>
<div className='content-news-body'>
No Starch Press has re-released <a href='https://www.nostarch.com/scratchjr' target='_blank'>
The Official ScratchJr Book</a> in Spanish paperback and ebook format!
<div className="content-news-body">
No Starch Press has
re-released <a href="https://www.nostarch.com/scratchjr" target="_blank">
The Official ScratchJr Book</a> in Spanish paperback and ebook format!
</div>
</div>
<div id='discussion-container'>
<div id='discussion-text'>
<div id='discussion-header'>
<div id="discussion-container">
<div id="discussion-text">
<div id="discussion-header">
Join the Discussion
</div>
<div id='discussion-body'>
<div id="discussion-body">
We introduced ourselves. Now it's your turn. Drop us a line with feedback,
report bugs &amp; glitches, or just say 'hi!'
<br></br>
<a href=' https://twitter.com/intent/tweet?screen_name=ScratchJr'>
<div className='blue-button'>
<a href=" https://twitter.com/intent/tweet?screen_name=ScratchJr">
<div className="blue-button">
Tweet @ScratchJr
</div>
</a>
</div>
</div>
<div id='disscussion-tweets'>
<div id="disscussion-tweets">
<Timeline
widgetId={'618881920324079616'}
options={{
username: 'ScratchJr',
width: '425',
height: '250',
chrome: 'noheader nofooter'
}}/>
username: 'ScratchJr',
width: '425',
height: '250',
chrome: 'noheader nofooter'
}}
/>
</div>
</div>
</div>

158
src/views/index/index.scss
View file

@ -1,135 +1,143 @@
$content-white: #fff;
$header-grey: #7f7f7f;
$header-orange: #f5a322;
$text-grey: #808080;
$background-grey: #e9e9e9;
#content-text {
background-color: white;
width: 49%;
float: left;
float: left;
background-color: $content-white;
width: 49%;
}
#content-graphic {
background-color: white;
width: 49%;
float: right;
text-align: center;
float: right;
background-color: $content-white;
width: 49%;
text-align: center;
}
#content-graphic-item {
width: 100%;
width: 100%;
}
#content-header-first {
color: #7f7f7f;
font-size: 28px;
margin-top: 24px;
margin-left: 40px;
margin-top: 24px;
margin-left: 40px;
color: $header-grey;
font-size: 28px;
}
#content-header-second {
color: #f5a322;
margin-left: 40px;
font-size: 20px;
margin-left: 40px;
color: $header-orange;
font-size: 20px;
}
#content-body {
font-family: "Lucida Grande", arial, sans-serif;
margin-top: 45px;
margin-left: 40px;
color: #808080;
font-size: 14pt;
line-height: 22pt;
margin-top: 45px;
margin-left: 40px;
line-height: 22pt;
color: $text-grey;
font-family: "Lucida Grande", arial, sans-serif;
font-size: 14pt;
}
/* Index page News */
.content-news {
background-color: white;
width: 90%;
float: left;
float: left;
background-color: $content-white;
width: 90%;
}
.content-news-header {
color: #7f7f7f;
font-size: 28px;
margin-top: 24px;
margin-left: 40px;
margin-top: 24px;
margin-left: 40px;
color: $header-grey;
font-size: 28px;
}
.content-news-body {
font-family: "Lucida Grande", arial, sans-serif;
margin-top: 20px;
margin-left: 40px;
margin-bottom: 10px;
color: #808080;
font-size: 14pt;
line-height: 22pt;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 40px;
line-height: 22pt;
color: $text-grey;
font-family: "Lucida Grande", arial, sans-serif;
font-size: 14pt;
}
#store-badges {
margin-left: 0px;
margin-left: 0;
}
#store-badges img {
float: left;
margin: 10px 30px 10px 0;
float: left;
margin: 10px 30px 10px 0;
max-width: 135px;
max-height: 40px;
}
#announcement-banner {
text-align: center;
background-color: #f5a322;
color: white;
height: 60px;
line-height: 60px;
font-size: 18px;
letter-spacing: .5px;
background-color: $header-orange;
height: 60px;
text-align: center;
line-height: 60px;
letter-spacing: .5px;
color: $content-white;
font-size: 18px;
}
#discussion-container {
width: 100%;
clear: both;
background-color: #e9e9e9;
padding-top: 20px;
padding-bottom: 20px;
clear: both;
background-color: $background-grey;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
}
#discussion-container::after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0px;
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
content: ".";
}
#discussion-text {
width:50%;
float:left;
float: left;
width: 50%;
}
#discussion-header {
color: #555;
margin-top: 32px;
margin-left: 40px;
font-size: 20px;
margin-top: 32px;
margin-left: 40px;
color: darken($header-grey, 10%);
font-size: 20px;
}
#discussion-body {
font-family: "Lucida Grande", arial, sans-serif;
margin-top: 12px;
margin-left: 40px;
margin-right: 25px;
color: #808080;
font-size: 14pt;
line-height: 22pt;
margin-top: 12px;
margin-right: 25px;
margin-left: 40px;
line-height: 22pt;
color: $text-grey;
font-family: "Lucida Grande", arial, sans-serif;
font-size: 14pt;
}
#disscussion-tweets {
width: 50%;
float: right;
float: right;
width: 50%;
}
.timeline-header {
display: none;
display: none;
}
#announcement-banner > a {
color: white;
text-decoration: none;
border-bottom: 2px solid;
border-bottom: 2px solid;
text-decoration: none;
color: $content-white;
}

111
src/views/learn/blocks.jsx
View file

@ -1,101 +1,80 @@
import React from 'react';
import BlockItem from '../../components/blockitem/blockitem.jsx';
import blocks from './blocks.json'
import blocks from './blocks.json';
export default class BlocksSection extends React.Component {
render () {
return (
<div
className="content-section learn-blocks"
id="blocks-section">
<a href="/pdfs/block-descriptions.pdf" className="download-guide-link"><span className="download-icon">&#x2193;</span>Download guide as pdf</a>
<div className="content-section learn-blocks" id="blocks-section">
<a href="/pdfs/block-descriptions.pdf" className="download-guide-link">
<span className="download-icon">&#x2193;</span>Download guide as pdf</a>
{/* Yellow Blocks */}
<div className="block-category-header" id="yellow-block-category-header">
Triggering Blocks
</div>
<div className="block-category-header-line" id="yellow-block-category-header-line"></div>
<div
className="block-category-header-line"
id="yellow-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.triggerBlocks.map((block, index) => {
return (
<BlockItem
key={index}
{...block}
/>
);
return (<BlockItem key={index} {...block}/>);
})}
</div>
{/* Blue Blocks */}
<div className="block-category-header" id="blue-block-category-header">
Motion Blocks
</div>
<div className="block-category-header-line" id="blue-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.motionBlocks.map((block, index) => {
return (
<BlockItem
key={index}
{...block}
/>
);
})}
</div>
<div
className="block-category-header-line"
id="blue-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.motionBlocks.map((block, index) => {
return (<BlockItem key={index} {...block}/>);
})}
</div>
{/* Purple Blocks */}
<div className="block-category-header" id="purple-block-category-header">
Looks Blocks
</div>
<div className="block-category-header-line" id="purple-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.looksBlocks.map((block, index) => {
return (
<BlockItem
key={index}
{...block}
/>
);
})}
</div>
<div
className="block-category-header-line"
id="purple-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.looksBlocks.map((block, index) => {
return (<BlockItem key={index} {...block}/>);
})}
</div>
<div className="block-category-header" id="green-block-category-header">
Sound Blocks
</div>
<div className="block-category-header-line" id="green-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.soundBlocks.map((block, index) => {
return (
<BlockItem
key={index}
{...block}
/>
);
})}
</div>
<div
className="block-category-header-line"
id="green-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.soundBlocks.map((block, index) => {
return (<BlockItem key={index} {...block}/>);
})}
</div>
<div className="block-category-header" id="orange-block-category-header">
Control Blocks
</div>
<div className="block-category-header-line" id="orange-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.controlBlocks.map((block, index) => {
return (
<BlockItem
key={index}
{...block}
/>
);
})}
</div>
<div
className="block-category-header-line"
id="orange-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.controlBlocks.map((block, index) => {
return (<BlockItem key={index} {...block}/>);
})}
</div>
<div className="block-category-header" id="red-block-category-header">
End Blocks
</div>
<div className="block-category-header-line" id="red-block-category-header-line"></div>
<div className="blocks-category-container">
{blocks.endBlocks.map((block, index) => {
return (
<BlockItem
key={index}
{...block}
/>
);
})}
</div>
<div className="blocks-category-container">
{blocks.endBlocks.map((block, index) => {
return (<BlockItem key={index} {...block}/>);
})}
</div>
</div>
);
}

130
src/views/learn/interface.jsx
View file

@ -7,7 +7,7 @@ import interfaceKey from './interface.json';
import './interface.scss';
export default class InterfaceSection extends React.Component {
constructor(props) {
constructor (props) {
super(props);
this.state = {
// default to first key item
@ -21,167 +21,171 @@ export default class InterfaceSection extends React.Component {
return (
<div
className="content-section learn-interface" id="interface-section">
<a href="/pdfs/scratchjr-interface-guide.pdf" className="download-guide-link"><span className="download-icon">&#x2193;</span>Download guide as pdf</a>
<a
href="/pdfs/scratchjr-interface-guide.pdf"
className="download-guide-link">
<span className="download-icon">&#x2193;</span>Download guide as pdf
</a>
<div className="interface-container">
<img className="ipad-project-view" src="/images/learninterface.png" />
{/* 1. Save */}
<GuideButton
name='interface-button-save'
name="interface-button-save"
index={0}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 0} >
<GuideButtonLine type='vertical' id='interface-vertical-line-save' />
<GuideButtonLine type='dot' id='interface-dot-save' />
<GuideButtonLine type="vertical" id="interface-vertical-line-save" />
<GuideButtonLine type="dot" id="interface-dot-save" />
</GuideButton>
{/* 2. Stage */}
<GuideButton
name='interface-button-stage'
name="interface-button-stage"
index={1}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 1} >
<GuideButtonLine type='vertical' id='interface-vertical-line-stage-1' />
<GuideButtonLine type='horizontal' id='interface-horizontal-line-stage-1' />
<GuideButtonLine type='vertical' id='interface-vertical-line-stage-2' />
<GuideButtonLine type='horizontal' id='interface-horizontal-line-stage-2' />
<GuideButtonLine type='horizontal' id='interface-horizontal-line-stage-3' />
<GuideButtonLine type="vertical" id="interface-vertical-line-stage-1" />
<GuideButtonLine type="horizontal" id="interface-horizontal-line-stage-1" />
<GuideButtonLine type="vertical" id="interface-vertical-line-stage-2" />
<GuideButtonLine type="horizontal" id="interface-horizontal-line-stage-2" />
<GuideButtonLine type="horizontal" id="interface-horizontal-line-stage-3" />
</GuideButton>
{/* 3. Presentation Mode */}
<GuideButton
name='interface-button-presentation-mode'
name="interface-button-presentation-mode"
index={2}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 2} >
<GuideButtonLine type='vertical' id='interface-vertical-line-presentation-mode' />
<GuideButtonLine type='dot' id='interface-dot-presentation-mode' />
<GuideButtonLine type="vertical" id="interface-vertical-line-presentation-mode" />
<GuideButtonLine type="dot" id="interface-dot-presentation-mode" />
</GuideButton>
<div className="" id=""></div>
<div className="" id=""></div>
{/* 4. Grid */}
<GuideButton
name='interface-button-grid'
name="interface-button-grid"
index={3}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 3} >
<GuideButtonLine type='vertical' id='interface-vertical-line-grid' />
<GuideButtonLine type='dot' id='interface-dot-grid' />
<GuideButtonLine type="vertical" id="interface-vertical-line-grid" />
<GuideButtonLine type="dot" id="interface-dot-grid" />
</GuideButton>
{/* 5. Change Background */}
<GuideButton
name='interface-button-add-text'
name="interface-button-add-text"
index={4}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 4} >
<GuideButtonLine type='vertical' id='interface-vertical-line-add-text' />
<GuideButtonLine type='dot' id='interface-dot-add-text' />
<GuideButtonLine type="vertical" id="interface-vertical-line-add-text" />
<GuideButtonLine type="dot" id="interface-dot-add-text" />
</GuideButton>
{/* 6. Add Text */}
<GuideButton
name='interface-button-change-background'
name="interface-button-change-background"
index={5}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 5}>
<GuideButtonLine type='vertical' id='interface-vertical-line-change-background' />
<GuideButtonLine type='dot' id='interface-dot-change-background' />
<GuideButtonLine type="vertical" id="interface-vertical-line-change-background" />
<GuideButtonLine type="dot" id="interface-dot-change-background" />
</GuideButton>
{/* 7. Reset Characters */}
<GuideButton
name='interface-button-reset-characters'
name="interface-button-reset-characters"
index={6}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 6}>
<GuideButtonLine type='vertical' id='interface-vertical-line-reset-characters' />
<GuideButtonLine type='dot' id='interface-dot-reset-characters' />
<GuideButtonLine type="vertical" id="interface-vertical-line-reset-characters" />
<GuideButtonLine type="dot" id="interface-dot-reset-characters" />
</GuideButton>
{/* 8. Green Flag */}
<GuideButton
name='interface-button-green-flag'
name="interface-button-green-flag"
index={7}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 7}>
<GuideButtonLine type='vertical' id='interface-vertical-line-green-flag' />
<GuideButtonLine type='dot' id='interface-dot-green-flag' />
<GuideButtonLine type="vertical" id="interface-vertical-line-green-flag" />
<GuideButtonLine type="dot" id="interface-dot-green-flag" />
</GuideButton>
{/* 9. Pages */}
<GuideButton
name='interface-button-pages'
name="interface-button-pages"
index={8}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 8}>
<GuideButtonLine type='vertical' id='interface-vertical-line-pages' />
<GuideButtonLine type='dot' id='interface-dot-pages' />
<GuideButtonLine type="vertical" id="interface-vertical-line-pages" />
<GuideButtonLine type="dot" id="interface-dot-pages" />
</GuideButton>
{/* 10. Project Information */}
<GuideButton
name='interface-button-project-information'
name="interface-button-project-information"
index={9}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 9}>
<GuideButtonLine type='vertical' id='interface-vertical-line-project-information' />
<GuideButtonLine type='dot' id='interface-dot-project-information' />
<GuideButtonLine type="vertical" id="interface-vertical-line-project-information" />
<GuideButtonLine type="dot" id="interface-dot-project-information" />
</GuideButton>
{/* 11. Undo Redo */}
<GuideButton
name='interface-button-undo-redo'
name="interface-button-undo-redo"
index={10}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 10}>
<GuideButtonLine type='vertical' id='interface-vertical-line-undo-redo-1' />
<GuideButtonLine type='horizontal' id='interface-horizontal-line-undo-redo' />
<GuideButtonLine type='vertical' id='interface-vertical-line-undo-redo-2' />
<GuideButtonLine type='vertical' id='interface-vertical-line-undo-redo-3' />
<GuideButtonLine type="vertical" id="interface-vertical-line-undo-redo-1" />
<GuideButtonLine type="horizontal" id="interface-horizontal-line-undo-redo" />
<GuideButtonLine type="vertical" id="interface-vertical-line-undo-redo-2" />
<GuideButtonLine type="vertical" id="interface-vertical-line-undo-redo-3" />
</GuideButton>
{/* 12. Programming Script */}
<GuideButton
name='interface-button-programming-script'
name="interface-button-programming-script"
index={11}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 11} >
<GuideButtonLine type='vertical' id='interface-vertical-line-programming-script-1' />
<GuideButtonLine type='horizontal' id='interface-horizontal-line-programming-script' />
<GuideButtonLine type='vertical' id='interface-vertical-line-programming-script-2' />
<GuideButtonLine type='vertical' id='interface-vertical-line-programming-script-3' />
<GuideButtonLine type="vertical" id="interface-vertical-line-programming-script-1" />
<GuideButtonLine type="horizontal" id="interface-horizontal-line-programming-script" />
<GuideButtonLine type="vertical" id="interface-vertical-line-programming-script-2" />
<GuideButtonLine type="vertical" id="interface-vertical-line-programming-script-3" />
</GuideButton>
{/* 13. Programming Area */}
<GuideButton
name='interface-button-programming-area'
name="interface-button-programming-area"
index={12}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 12}>
<GuideButtonLine type='vertical' id='interface-vertical-line-programming-area' />
<GuideButtonLine type='dot' id='interface-dot-programming-area' />
<GuideButtonLine type="vertical" id="interface-vertical-line-programming-area" />
<GuideButtonLine type="dot" id="interface-dot-programming-area" />
</GuideButton>
{/* 14. Blocks Palette */}
<GuideButton
name='interface-button-block-palette'
name="interface-button-block-palette"
index={13}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 13}>
<GuideButtonLine type='horizontal' id='interface-horizontal-line-blocks-palette' />
<GuideButtonLine type='vertical' id='interface-vertical-line-blocks-palette-1' />
<GuideButtonLine type='vertical' id='interface-vertical-line-blocks-palette-2' />
<GuideButtonLine type='vertical' id='interface-vertical-line-blocks-palette-3' />
<GuideButtonLine type="horizontal" id="interface-horizontal-line-blocks-palette" />
<GuideButtonLine type="vertical" id="interface-vertical-line-blocks-palette-1" />
<GuideButtonLine type="vertical" id="interface-vertical-line-blocks-palette-2" />
<GuideButtonLine type="vertical" id="interface-vertical-line-blocks-palette-3" />
</GuideButton>
{/* 15. Block Categories */}
<GuideButton
name='interface-button-block-categories'
name="interface-button-block-categories"
index={14}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 14}>
<GuideButtonLine type='vertical' id='interface-vertical-line-block-categories-1' />
<GuideButtonLine type='horizontal' id='interface-horizontal-line-block-categories' />
<GuideButtonLine type='vertical' id='interface-vertical-line-block-categories-2' />
<GuideButtonLine type='vertical' id='interface-vertical-line-block-categories-3' />
<GuideButtonLine type="vertical" id="interface-vertical-line-block-categories-1" />
<GuideButtonLine type="horizontal" id="interface-horizontal-line-block-categories" />
<GuideButtonLine type="vertical" id="interface-vertical-line-block-categories-2" />
<GuideButtonLine type="vertical" id="interface-vertical-line-block-categories-3" />
</GuideButton>
{/* 16. Characters */}
<GuideButton
name='interface-button-characters'
name="interface-button-characters"
index={15}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 15}>
<GuideButtonLine type='vertical' id='interface-vertical-line-characters-1' />
<GuideButtonLine type='horizontal' id='interface-horizontal-line-characters' />
<GuideButtonLine type='vertical' id='interface-vertical-line-characters-2' />
<GuideButtonLine type='vertical' id='interface-vertical-line-characters-3' />
<GuideButtonLine type="vertical" id="interface-vertical-line-characters-1" />
<GuideButtonLine type="horizontal" id="interface-horizontal-line-characters" />
<GuideButtonLine type="vertical" id="interface-vertical-line-characters-2" />
<GuideButtonLine type="vertical" id="interface-vertical-line-characters-3" />
</GuideButton>
<div id="right-column">
<GuideKey id={this.state.currentIndex + 1} {...interfaceKey[this.state.currentIndex]} />

296
src/views/learn/interface.scss
View file

@ -3,364 +3,364 @@
/* 1. Save */
#interface-button-save {
left: 134px;
top: -54px;
top: -54px;
left: 134px;
}
#interface-vertical-line-save {
height: 27px;
top: -20px;
left: 150px;
top: -20px;
left: 150px;
height: 27px;
}
#interface-dot-save {
left: 148px;
left: 148px;
}
/* 2. Stage */
#interface-button-stage {
left: 173px;
top: -54px;
top: -54px;
left: 173px;
}
#interface-vertical-line-stage-1 {
height: 175px;
top: -20px;
left: 189px;
top: -20px;
left: 189px;
height: 175px;
}
#interface-horizontal-line-stage-1 {
width: 8px;
top: 155px;
left: 189px;
top: 155px;
left: 189px;
width: 8px;
}
#interface-vertical-line-stage-2 {
height: 221px;
top: 47px;
left: 197px;
top: 47px;
left: 197px;
height: 221px;
}
#interface-horizontal-line-stage-2 {
width: 9px;
top: 47px;
left: 197px;
top: 47px;
left: 197px;
width: 9px;
}
#interface-horizontal-line-stage-3 {
width: 9px;
top: 268px;
left: 197px;
top: 268px;
left: 197px;
width: 9px;
}
/* 3. Presentation Mode */
#interface-button-presentation-mode {
left: 210px;
top: -54px;
top: -54px;
left: 210px;
}
#interface-vertical-line-presentation-mode {
height: 28px;
top: -20px;
left: 226px;
top: -20px;
left: 226px;
height: 28px;
}
#interface-dot-presentation-mode {
left: 224px;
left: 224px;
}
/* 4. Grid */
#interface-button-grid {
left: 248px;
top: -54px;
top: -54px;
left: 248px;
}
#interface-vertical-line-grid {
height: 28px;
top: -20px;
left: 264px;
top: -20px;
left: 264px;
height: 28px;
}
#interface-dot-grid {
left: 262px;
left: 262px;
}
/* 5. Add Text */
#interface-button-add-text {
left: 318px;
top: -54px;
top: -54px;
left: 318px;
}
#interface-vertical-line-add-text {
height: 27px;
top: -20px;
left: 335px;
top: -20px;
left: 335px;
height: 27px;
}
#interface-dot-add-text {
left: 333px;
left: 333px;
}
/* 6. Change Background */
#interface-button-change-background {
left: 359px;
top: -54px;
top: -54px;
left: 359px;
}
#interface-vertical-line-change-background {
height: 28px;
top: -20px;
left: 375px;
top: -20px;
left: 375px;
height: 28px;
}
#interface-dot-change-background {
left: 373px;
left: 373px;
}
/* 7. Reset Characters */
#interface-button-reset-characters {
left: 434px;
top: -54px;
top: -54px;
left: 434px;
}
#interface-vertical-line-reset-characters {
height: 26px;
top: -20px;
left: 450px;
top: -20px;
left: 450px;
height: 26px;
}
#interface-dot-reset-characters {
top: 6px;
left: 448px;
left: 448px;
}
/* 8. Green Flag */
#interface-button-green-flag {
left: 475px;
top: -54px;
top: -54px;
left: 475px;
}
#interface-vertical-line-green-flag {
height: 26px;
top: -20px;
left: 491px;
top: -20px;
left: 491px;
height: 26px;
}
#interface-dot-green-flag {
top: 6px;
left: 489px;
left: 489px;
}
/* 9. Pages */
#interface-button-pages {
left: 557px;
top: -54px;
top: -54px;
left: 557px;
}
#interface-vertical-line-pages {
height: 30px;
top: -20px;
left: 574px;
top: -20px;
left: 574px;
height: 30px;
}
#interface-dot-pages {
left: 572px;
left: 572px;
}
/* 10. Project Information */
#interface-button-project-information {
left: 622px;
top: -54px;
top: -54px;
left: 622px;
}
#interface-vertical-line-project-information {
height: 28px;
top: -20px;
left: 638px;
top: -20px;
left: 638px;
height: 28px;
}
#interface-dot-project-information {
left: 636px;
left: 636px;
}
/* 16. Characters */
#interface-button-characters {
left: 54px;
top: 493px;
top: 493px;
left: 54px;
}
#interface-vertical-line-characters-1 {
height: 13px;
top: 230px;
left: 27px;
top: 230px;
left: 27px;
height: 13px;
}
#interface-vertical-line-characters-3 {
height: 13px;
top: 230px;
left: 174px;
top: 230px;
left: 174px;
height: 13px;
}
#interface-horizontal-line-characters {
width: 148px;
top: 243px;
left: 27px;
top: 243px;
left: 27px;
width: 148px;
}
#interface-vertical-line-characters-2 {
height: 250px;
top: 243px;
left: 70px;
top: 243px;
left: 70px;
height: 250px;
}
/* 15. Block Categories */
#interface-button-block-categories {
left: 103px;
top: 493px;
top: 493px;
left: 103px;
}
#interface-vertical-line-block-categories-1 {
height: 10px;
top: 332px;
left: 27px;
top: 332px;
left: 27px;
height: 10px;
}
#interface-vertical-line-block-categories-3 {
height: 10px;
top: 332px;
left: 230px;
top: 332px;
left: 230px;
height: 10px;
}
#interface-horizontal-line-block-categories {
width: 204px;
top: 342px;
left: 27px;
top: 342px;
left: 27px;
width: 204px;
}
#interface-vertical-line-block-categories-2 {
height: 151px;
top: 342px;
left: 120px;
top: 342px;
left: 120px;
height: 151px;
}
/* 14. Block Palette */
#interface-button-block-palette {
left: 314px;
top: 493px;
top: 493px;
left: 314px;
}
#interface-vertical-line-blocks-palette-1 {
height: 10px;
top: 332px;
left: 242px;
top: 332px;
left: 242px;
height: 10px;
}
#interface-vertical-line-blocks-palette-3 {
height: 10px;
top: 332px;
left: 572px;
top: 332px;
left: 572px;
height: 10px;
}
#interface-horizontal-line-blocks-palette {
width: 331px;
top: 342px;
left: 242px;
top: 342px;
left: 242px;
width: 331px;
}
#interface-vertical-line-blocks-palette-2 {
height: 151px;
top: 342px;
left: 330px;
top: 342px;
left: 330px;
height: 151px;
}
/* 13. Programming Area */
#interface-button-programming-area {
left: 377px;
top: 493px;
top: 493px;
left: 377px;
}
#interface-vertical-line-programming-area {
height: 43px;
top: 450px;
left: 393px;
top: 450px;
left: 393px;
height: 43px;
}
#interface-dot-programming-area {
top: 450px;
left: 391px;
top: 450px;
left: 391px;
}
/* 12. Programming Script */
#interface-button-programming-script {
left: 439px;
top: 493px;
top: 493px;
left: 439px;
}
#interface-vertical-line-programming-script-1 {
height: 10px;
top: 417px;
left: 358px;
top: 417px;
left: 358px;
height: 10px;
}
#interface-vertical-line-programming-script-3 {
height: 10px;
top: 417px;
left: 533px;
top: 417px;
left: 533px;
height: 10px;
}
#interface-horizontal-line-programming-script {
width: 176px;
top: 427px;
left: 358px;
top: 427px;
left: 358px;
width: 176px;
}
#interface-vertical-line-programming-script-2 {
height: 66px;
top: 427px;
left: 455px;
top: 427px;
left: 455px;
height: 66px;
}
/* 11. Undo Redo */
#interface-button-undo-redo {
left: 599px;
top: 493px;
top: 493px;
left: 599px;
}
#interface-vertical-line-undo-redo-1 {
height: 10px;
top: 327px;
left: 588px;
top: 327px;
left: 588px;
height: 10px;
}
#interface-vertical-line-undo-redo-3 {
height: 10px;
top: 327px;
left: 645px;
top: 327px;
left: 645px;
height: 10px;
}
#interface-horizontal-line-undo-redo {
width: 58px;
top: 337px;
left: 588px;
top: 337px;
left: 588px;
width: 58px;
}
#interface-vertical-line-undo-redo-2 {
height: 156px;
top: 337px;
left: 615px;
top: 337px;
left: 615px;
height: 156px;
}

67
src/views/learn/learn.jsx
View file

@ -1,10 +1,18 @@
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory, IndexRedirect, IndexRoute, applyRouterMiddleware } from 'react-router';
import { useScroll } from 'react-router-scroll';
import {render} from 'react-dom';
import {
Router,
Route,
browserHistory,
IndexRedirect,
IndexRoute,
applyRouterMiddleware
} from 'react-router';
import {useScroll} from 'react-router-scroll';
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 InterfaceSection from './interface.jsx';
import PaintSection from './paint.jsx';
@ -23,7 +31,7 @@ import PagesSection from './tips/pages.jsx';
import './learn.scss';
export default class Learn extends React.Component {
render () {
render () {
var tabs = [
{
url: '/learn/interface',
@ -48,37 +56,40 @@ export default class Learn extends React.Component {
}
];
return (
<div>
<NavBar selected="learn"/>
<div id='content'>
<TabNav items={tabs}/>
{this.props.children}
return (
<div>
<NavBar selected="learn"/>
<div id="content">
<TabNav items={tabs}/> {this.props.children}
</div>
<Footer/>
</div>
<Footer />
</div>
);
}
);
}
}
Learn.propTypes = {
children: React.PropTypes.node
};
render((
<Router history={browserHistory} render={applyRouterMiddleware(useScroll())}>
<Route path='/learn' component={Learn}>
<Route path='interface' component={InterfaceSection}/>
<Route path='paint' component={PaintSection}/>
<Route path='blocks' component={BlocksSection}/>
<Route path='tips' component={TipsSection}>
<Route path="/learn" component={Learn}>
<Route path="interface" component={InterfaceSection}/>
<Route path="paint" component={PaintSection}/>
<Route path="blocks" component={BlocksSection}/>
<Route path="tips" component={TipsSection}>
<IndexRoute component={TipsHome}/>
<Route path='manage-projects' component={ManageSection}/>
<Route path='character-animation' component={AnimationSection}/>
<Route path='multi-character' component={MultiCharacterSection}/>
<Route path='trigger-blocks' component={TriggersSection}/>
<Route path='share-projects' component={ShareSection}/>
<Route path='sample-projects' component={SamplesSection}/>
<Route path='copy-scripts' component={CopyScriptSection}/>
<Route path='pages' component={PagesSection}/>
<Route path="manage-projects" component={ManageSection}/>
<Route path="character-animation" component={AnimationSection}/>
<Route path="multi-character" component={MultiCharacterSection}/>
<Route path="trigger-blocks" component={TriggersSection}/>
<Route path="share-projects" component={ShareSection}/>
<Route path="sample-projects" component={SamplesSection}/>
<Route path="copy-scripts" component={CopyScriptSection}/>
<Route path="pages" component={PagesSection}/>
</Route>
<IndexRedirect to='interface'/>
<IndexRedirect to="interface"/>
<Route path="*" component={PageNotFound}/>
</Route>
</Router>
), document.getElementById('app'));

226
src/views/learn/learn.scss
View file

@ -1,62 +1,72 @@
$category-header: #fff;
$category-yellow: #f4e025;
$category-blue: #4a8ce3;
$category-green: #48cc7e;
$category-purple: #cd7cd1;
$category-orange: #ffb254;
$category-red: #ea2424;
$text-color: #808080;
$link-blue: #2898cd;
/* Sub-Menus */
.content-nav-item {
width: 24.9% !important;
width: 24.9% !important;
}
.interface-icon {
background-image: url(/images/interface_b.svg);
background-size: 100%;
background-image: url("/images/interface_b.svg");
background-size: 100%;
}
.content-nav-item-selected .interface-icon {
background-image: url(/images/interface_o.svg);
background-image: url("/images/interface_o.svg");
}
.paint-icon {
background-image: url(/images/paint_b.svg);
background-size: 100%;
background-image: url("/images/paint_b.svg");
background-size: 100%;
}
.content-nav-item-selected .paint-icon {
background-image: url(/images/paint_o.svg);
background-image: url("/images/paint_o.svg");
}
.blocks-icon {
background-image: url(/images/blocks_b.svg);
background-size: 100%;
background-image: url("/images/blocks_b.svg");
background-size: 100%;
}
.content-nav-item-selected .blocks-icon {
background-image: url(/images/blocks_o.svg);
background-image: url("/images/blocks_o.svg");
}
.tips-icon {
background-image: url(/images/videos_b.svg);
background-size: 100%;
background-image: url("/images/videos_b.svg");
background-size: 100%;
}
.content-nav-item-selected .tips-icon {
background-image: url(/images/videos_o.svg);
background-image: url("/images/videos_o.svg");
}
#tips-nav .content-nav-item-description {
width: 40%;
width: 40%;
}
.content-nav-item-description {
float: left;
line-height: 20px;
margin-left: 15px;
font-size: 12pt;
width: 47%;
margin-top: 25px;
float: left;
margin-top: 25px;
margin-left: 15px;
width: 47%;
line-height: 20px;
font-size: 12pt;
}
.download-guide-link {
position: relative;
top: 10px;
left: 680px;
z-index: 1000;
position: relative;
top: 10px;
left: 680px;
z-index: 1000;
}
/* Guide Elements */
@ -64,191 +74,191 @@
.content-section.learn-interface,
.content-section.learn-paint,
.content-section.learn-blocks {
margin: 0;
display: inline;
display: inline;
margin: 0;
}
#ipad-project-view-wrapper {
position: relative;
position: relative;
}
.learn-tab {
display: none;
display: none;
}
.learn-tab-selected {
display: inline;
display: inline;
}
.learn-interface:after, .learn-paint:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 75px;
.learn-interface:after, .learn-paint:after {
display: block;
clear: both;
visibility: hidden;
height: 75px;
line-height: 0;
content: ".";
}
.interface-container,
.paint-container {
margin-top: 75px;
position: relative;
position: relative;
margin-top: 75px;
}
.ipad-project-view {
margin-left: 21px;
width: 629px;
float: left;
float: left;
margin-left: 21px;
width: 629px;
}
/* Guide 3 - Block Descriptions */
#blocks-section {
margin-left: 0;
margin-right: 0;
margin-left: 0;
}
.block-category-header {
color: white;
text-transform: uppercase;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 24px;
width: 30%;
margin-top: 20px;
margin-top: 20px;
margin-left: 24px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
width: 30%;
text-transform: uppercase;
color: $category-header;
}
#yellow-block-category-header {
background-color: #F4E025;
background-color: $category-yellow;
}
#blue-block-category-header {
background-color: #4A8CE3;
background-color: $category-blue;
}
#purple-block-category-header {
background-color: #CD7CD1;
background-color: $category-purple;
}
#green-block-category-header {
background-color: #48CC7E;
background-color: $category-green;
}
#orange-block-category-header {
background-color: #FFB254;
background-color: $category-orange;
}
#red-block-category-header {
background-color: #EA2424;
background-color: $category-red;
}
.block-category-header-line {
margin-left: 24px;
margin-right: 24px;
height: 2px;
margin-right: 24px;
margin-left: 24px;
height: 2px;
}
#yellow-block-category-header-line {
background-color: #F4E025;
background-color: $category-yellow;
}
#blue-block-category-header-line {
background-color: #4A8CE3;
background-color: $category-blue;
}
#purple-block-category-header-line {
background-color: #CD7CD1;
background-color: $category-purple;
}
#green-block-category-header-line {
background-color: #48CC7E;
background-color: $category-green;
}
#orange-block-category-header-line {
background-color: #FFB254;
background-color: $category-orange;
}
#red-block-category-header-line {
background-color: #EA2424;
background-color: $category-red;
}
.block-wrapper {
margin-top: 18px;
margin-left: 3%;
margin-right: 3%;
height: 140px;
color: #808080;
float: left;
width: 40%;
padding-bottom: 10px;
margin-top: 18px;
margin-right: 3%;
margin-left: 3%;
padding-bottom: 10px;
width: 40%;
height: 140px;
color: $text-color;
}
.blocks-category-container > .block-wrapper:nth-child(even) {
margin-left: 11%;
}
.blocks-category-container:after {
content: "";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 5px;
display: block;
clear: both;
visibility: hidden;
height: 5px;
line-height: 0;
content: "";
}
.block-image-wrapper {
float: left;
float: left;
}
.block-title {
border-bottom: solid 1px #808080;
padding-bottom: 10px;
border-bottom: solid 1px $text-color;
padding-bottom: 10px;
}
.block-image {
margin-top: 20px;
margin-left: 10px;
width: 75px;
margin-top: 20px;
margin-left: 10px;
width: 75px;
}
.block-image-repeat {
margin-top: 20px;
margin-left: 10px;
width: 140px;
margin-top: 20px;
margin-left: 10px;
width: 140px;
}
.block-description {
float: right;
margin-top: 20px;
width: 55%;
font-size: 12px;
line-height: 20px;
float: right;
margin-top: 20px;
width: 55%;
line-height: 20px;
font-size: 12px;
}
.block-description-repeat {
float: right;
margin-top: 20px;
width: 145px;
font-size: 12px;
line-height: 20px;
float: right;
margin-top: 20px;
width: 145px;
line-height: 20px;
font-size: 12px;
}
.download-icon {
margin-right: 5px;
color: #2898CD;
font-weight: bolder;
margin-right: 5px;
color: $link-blue;
font-weight: bolder;
}
#download-guide-link {
float: right;
margin-right: 20px;
margin-top: 15px;
font-size: 14px;
color: #2898CD;
text-decoration: none;
float: right;
margin-top: 15px;
margin-right: 20px;
text-decoration: none;
color: $link-blue;
font-size: 14px;
}
/* End Guide 3 - Block Descriptions */

128
src/views/learn/paint.jsx
View file

@ -7,7 +7,7 @@ import paintKey from './paint.json';
import './paint.scss';
export default class PaintSection extends React.Component {
constructor(props) {
constructor (props) {
super(props);
this.state = {
// default to first key item
@ -20,153 +20,143 @@ export default class PaintSection extends React.Component {
render () {
return (
<div className="content-section learn-paint" id="paint-section">
<a href="/pdfs/paint-editor-guide.pdf" className="download-guide-link"><span className="download-icon">&#x2193;</span>Download guide as pdf</a>
<a
href="/pdfs/paint-editor-guide.pdf"
className="download-guide-link">
<span className="download-icon">&#x2193;</span>Download guide as pdf
</a>
<div className="paint-container">
<img className="ipad-project-view" src="/images/learnpaint.png" />
{/* 1. Undo */}
<GuideButton
name='paint-button-undo'
name="paint-button-undo"
index={0}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 0}>
<GuideButtonLine type='vertical' id='paint-vertical-line-undo' />
<GuideButtonLine type='dot' id='paint-dot-undo' />
<GuideButtonLine type="vertical" id="paint-vertical-line-undo" />
<GuideButtonLine type="dot" id="paint-dot-undo" />
</GuideButton>
{/* 2. Redo */}
<GuideButton
name='paint-button-redo'
name="paint-button-redo"
index={1}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 1}>
<GuideButtonLine type='vertical' id='paint-vertical-line-redo' />
<GuideButtonLine type='dot' id='paint-dot-redo' />
<GuideButtonLine type="vertical" id="paint-vertical-line-redo" />
<GuideButtonLine type="dot" id="paint-dot-redo" />
</GuideButton>
{/* 3. Select Shape */}
<GuideButton
name='paint-button-select-shape'
name="paint-button-select-shape"
index={2}
clickHandler={this.changeHandler.bind(this)}
lines={[
{"lineClass":"guide-vertical-line", "lineId": "paint-vertical-line-select-shape-1"},
{"lineClass":"guide-horizontal-line", "lineId": "paint-horizontal-line-select-shape-1"},
{"lineClass":"guide-vertical-line", "lineId": "paint-vertical-line-select-shape-2"},
{"lineClass":"guide-horizontal-line", "lineId": "paint-horizontal-line-select-shape-2"},
{"lineClass":"guide-horizontal-line", "lineId": "paint-horizontal-line-select-shape-3"}
]}
selected={this.state.currentIndex == 2}>
<GuideButtonLine type='vertical' id='paint-vertical-line-select-shape-1' />
<GuideButtonLine type='vertical' id='paint-vertical-line-select-shape-2' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-select-shape-1' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-select-shape-2' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-select-shape-3' />
<GuideButtonLine type="vertical" id="paint-vertical-line-select-shape-1" />
<GuideButtonLine type="vertical" id="paint-vertical-line-select-shape-2" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-select-shape-1" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-select-shape-2" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-select-shape-3" />
</GuideButton>
{/* 4. Character Name */}
<GuideButton
name='paint-button-character-name'
name="paint-button-character-name"
index={3}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 3}>
<GuideButtonLine type='vertical' id='paint-vertical-line-character-name' />
<GuideButtonLine type='dot' id='paint-dot-character-name' />
<GuideButtonLine type="vertical" id="paint-vertical-line-character-name" />
<GuideButtonLine type="dot" id="paint-dot-character-name" />
</GuideButton>
{/* 5. Cut */}
<GuideButton
name='paint-button-cut'
name="paint-button-cut"
index={4}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 4}>
<GuideButtonLine type='vertical' id='paint-vertical-line-cut' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-cut' />
<GuideButtonLine type='dot' id='paint-dot-cut' />
<GuideButtonLine type="vertical" id="paint-vertical-line-cut" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-cut" />
<GuideButtonLine type="dot" id="paint-dot-cut" />
</GuideButton>
{/* 6. Duplicate */}
<GuideButton
name='paint-button-duplicate'
name="paint-button-duplicate"
index={5}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 5}>
<GuideButtonLine type='vertical' id='paint-vertical-line-duplicate' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-duplicate' />
<GuideButtonLine type='dot' id='paint-dot-duplicate' />
<GuideButtonLine type="vertical" id="paint-vertical-line-duplicate" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-duplicate" />
<GuideButtonLine type="dot" id="paint-dot-duplicate" />
</GuideButton>
{/* 7. Rotate */}
<GuideButton
name='paint-button-rotate'
name="paint-button-rotate"
index={6}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 6}>
<GuideButtonLine type='vertical' id='paint-vertical-line-rotate' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-rotate' />
<GuideButtonLine type='dot' id='paint-dot-rotate' />
<GuideButtonLine type="vertical" id="paint-vertical-line-rotate" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-rotate" />
<GuideButtonLine type="dot" id="paint-dot-rotate" />
</GuideButton>
{/* 8. Drag */}
<GuideButton
name='paint-button-drag'
name="paint-button-drag"
index={7}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 7}>
<GuideButtonLine type='vertical' id='paint-vertical-line-drag' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-drag' />
<GuideButtonLine type='dot' id='paint-dot-drag' />
<GuideButtonLine type="vertical" id="paint-vertical-line-drag" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-drag" />
<GuideButtonLine type="dot" id="paint-dot-drag" />
</GuideButton>
{/* 9. Save */}
<GuideButton
name='paint-button-save'
name="paint-button-save"
index={8}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 8}>
<GuideButtonLine type='vertical' id='paint-vertical-line-save' />
<GuideButtonLine type='dot' id='paint-dot-save' />
<GuideButtonLine type="vertical" id="paint-vertical-line-save" />
<GuideButtonLine type="dot" id="paint-dot-save" />
</GuideButton>
{/* 10. Fill */}
<GuideButton
name='paint-button-fill'
name="paint-button-fill"
index={9}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 9}>
<GuideButtonLine type='vertical' id='paint-vertical-line-fill' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-fill' />
<GuideButtonLine type='dot' id='paint-dot-fill' />
<GuideButtonLine type="vertical" id="paint-vertical-line-fill" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-fill" />
<GuideButtonLine type="dot" id="paint-dot-fill" />
</GuideButton>
{/* 11. Camera */}
<GuideButton
name='paint-button-camera'
name="paint-button-camera"
index={10}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 10}>
<GuideButtonLine type='vertical' id='paint-vertical-line-camera' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-camera' />
<GuideButtonLine type='dot' id='paint-dot-camera' />
<GuideButtonLine type="vertical" id="paint-vertical-line-camera" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-camera" />
<GuideButtonLine type="dot" id="paint-dot-camera" />
</GuideButton>
{/* 12. Select Color */}
<GuideButton
name='paint-button-select-color'
name="paint-button-select-color"
index={11}
clickHandler={this.changeHandler.bind(this)}
selected={this.state.currentIndex == 11}>
<GuideButtonLine type='vertical' id='paint-vertical-line-select-color-1' />
<GuideButtonLine type='vertical' id='paint-vertical-line-select-color-2' />
<GuideButtonLine type='vertical' id='paint-vertical-line-select-color-3' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-select-color-1' />
<GuideButtonLine type="vertical" id="paint-vertical-line-select-color-1" />
<GuideButtonLine type="vertical" id="paint-vertical-line-select-color-2" />
<GuideButtonLine type="vertical" id="paint-vertical-line-select-color-3" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-select-color-1" />
</GuideButton>
{/* 13. Select Line Size */}
<GuideButton
name='paint-button-select-line-size'
name="paint-button-select-line-size"
index={12}
clickHandler={this.changeHandler.bind(this)}
lines={[
{"lineClass":"guide-vertical-line", "lineId": "paint-vertical-line-select-line-size-1"},
{"lineClass":"guide-horizontal-line", "lineId": "paint-horizontal-line-select-line-size-1"},
{"lineClass":"guide-vertical-line", "lineId": "paint-vertical-line-select-line-size-2"},
{"lineClass":"guide-horizontal-line", "lineId": "paint-horizontal-line-select-line-size-2"},
{"lineClass":"guide-horizontal-line", "lineId": "paint-horizontal-line-select-line-size-3"}
]}
selected={this.state.currentIndex == 12}>
<GuideButtonLine type='vertical' id='paint-vertical-line-select-line-size-1' />
<GuideButtonLine type='vertical' id='paint-vertical-line-select-line-size-2' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-select-line-size-1' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-select-line-size-2' />
<GuideButtonLine type='horizontal' id='paint-horizontal-line-select-line-size-3' />
<GuideButtonLine type="vertical" id="paint-vertical-line-select-line-size-1" />
<GuideButtonLine type="vertical" id="paint-vertical-line-select-line-size-2" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-select-line-size-1" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-select-line-size-2" />
<GuideButtonLine type="horizontal" id="paint-horizontal-line-select-line-size-3" />
</GuideButton>
<div id="right-column">
<GuideKey id={this.state.currentIndex + 1} {...paintKey[this.state.currentIndex]} />

266
src/views/learn/paint.scss
View file

@ -3,317 +3,317 @@
/* 1. Undo */
#paint-button-undo {
left: 32px;
top: -54px;
top: -54px;
left: 32px;
}
#paint-vertical-line-undo {
height: 27px;
top: -20px;
left: 49px;
top: -20px;
left: 49px;
height: 27px;
}
#paint-dot-undo {
left: 47px;
left: 47px;
}
/* 2. Redo */
#paint-button-redo {
left: 83px;
top: -54px;
top: -54px;
left: 83px;
}
#paint-vertical-line-redo {
height: 27px;
top: -20px;
left: 100px;
top: -20px;
left: 100px;
height: 27px;
}
#paint-dot-redo {
left: 98px;
left: 98px;
}
/* 3. Select Shape */
#paint-button-select-shape {
left: 130px;
top: -54px;
top: -54px;
left: 130px;
}
#paint-vertical-line-select-shape-1 {
height: 160px;
top: -20px;
left: 146px;
top: -20px;
left: 146px;
height: 160px;
}
#paint-horizontal-line-select-shape-1 {
width: 75px;
top: 140px;
left: 72px;
top: 140px;
left: 72px;
width: 75px;
}
#paint-vertical-line-select-shape-2 {
height: 145px;
top: 70px;
left: 72px;
top: 70px;
left: 72px;
height: 145px;
}
#paint-horizontal-line-select-shape-2 {
width: 10px;
top: 70px;
left: 62px;
top: 70px;
left: 62px;
width: 10px;
}
#paint-horizontal-line-select-shape-3 {
width: 11px;
top: 215px;
left: 62px;
top: 215px;
left: 62px;
width: 11px;
}
/* 4. Character Name */
#paint-button-character-name {
left: 323px;
top: -54px;
top: -54px;
left: 323px;
}
#paint-vertical-line-character-name {
height: 27px;
top: -20px;
left: 340px;
top: -20px;
left: 340px;
height: 27px;
}
#paint-dot-character-name {
left: 338px;
left: 338px;
}
/* 5. Cut */
#paint-button-cut {
left: 406px;
top: -54px;
top: -54px;
left: 406px;
}
#paint-vertical-line-cut {
height: 306px;
top: -20px;
left: 422px;
top: -20px;
left: 422px;
height: 306px;
}
#paint-horizontal-line-cut {
width: 180px;
top: 286px;
left: 422px;
top: 286px;
left: 422px;
width: 180px;
}
#paint-dot-cut {
left: 602px;
top: 284px;
top: 284px;
left: 602px;
}
/* 6. Duplicate */
#paint-button-duplicate {
left: 486px;
top: -54px;
top: -54px;
left: 486px;
}
#paint-vertical-line-duplicate {
height: 271px;
top: -20px;
left: 502px;
top: -20px;
left: 502px;
height: 271px;
}
#paint-horizontal-line-duplicate {
width: 100px;
top: 251px;
left: 502px;
top: 251px;
left: 502px;
width: 100px;
}
#paint-dot-duplicate {
left: 602px;
top: 249px;
top: 249px;
left: 602px;
}
/* 7. Rotate */
#paint-button-rotate {
left: 526px;
top: -54px;
top: -54px;
left: 526px;
}
#paint-vertical-line-rotate {
height: 222px;
top: -20px;
left: 542px;
top: -20px;
left: 542px;
height: 222px;
}
#paint-horizontal-line-rotate {
width: 60px;
top: 202px;
left: 542px;
top: 202px;
left: 542px;
width: 60px;
}
#paint-dot-rotate {
left: 602px;
top: 200px;
top: 200px;
left: 602px;
}
/* 8. Drag */
#paint-button-drag {
left: 566px;
top: -54px;
top: -54px;
left: 566px;
}
#paint-vertical-line-drag {
height: 185px;
top: -20px;
left: 582px;
top: -20px;
left: 582px;
height: 185px;
}
#paint-horizontal-line-drag {
width: 22px;
top: 164px;
left: 582px;
top: 164px;
left: 582px;
width: 22px;
}
#paint-dot-drag {
left: 602px;
top: 162px;
top: 162px;
left: 602px;
}
/* 9. Save */
#paint-button-save {
left: 608px;
top: -54px;
top: -54px;
left: 608px;
}
#paint-vertical-line-save {
height: 27px;
top: -20px;
left: 625px;
top: -20px;
left: 625px;
height: 27px;
}
#paint-dot-save {
top: 7px;
left: 623px;
top: 7px;
left: 623px;
}
/* 10. Fill */
#paint-button-fill {
left: 575px;
top: 497px;
top: 497px;
left: 575px;
}
#paint-vertical-line-fill {
height: 121px;
top: 377px;
left: 591px;
top: 377px;
left: 591px;
height: 121px;
}
#paint-horizontal-line-fill {
width: 13px;
top: 377px;
left: 591px;
top: 377px;
left: 591px;
width: 13px;
}
#paint-dot-fill {
left: 602px;
top: 375px;
top: 375px;
left: 602px;
}
/* 11. Camera */
#paint-button-camera {
left: 535px;
top: 497px;
top: 497px;
left: 535px;
}
#paint-vertical-line-camera {
height: 160px;
top: 338px;
left: 551px;
top: 338px;
left: 551px;
height: 160px;
}
#paint-horizontal-line-camera {
width: 52px;
top: 338px;
left: 551px;
top: 338px;
left: 551px;
width: 52px;
}
#paint-dot-camera {
left: 602px;
top: 336px;
top: 336px;
left: 602px;
}
/* 12. Select Color */
#paint-button-select-color {
left: 319px;
top: 497px;
top: 497px;
left: 319px;
}
#paint-vertical-line-select-color-1 {
height: 32px;
top: 466px;
left: 335px;
top: 466px;
left: 335px;
height: 32px;
}
#paint-horizontal-line-select-color-1 {
width: 614px;
top: 466px;
left: 27px;
top: 466px;
left: 27px;
width: 614px;
}
#paint-vertical-line-select-color-2 {
height: 11px;
top: 455px;
left: 27px;
top: 455px;
left: 27px;
height: 11px;
}
#paint-vertical-line-select-color-3 {
height: 11px;
top: 455px;
left: 640px;
top: 455px;
left: 640px;
height: 11px;
}
/* 13. Line Size */
#paint-button-select-line-size {
left: 135px;
top: 497px;
top: 497px;
left: 135px;
}
#paint-vertical-line-select-line-size-1 {
height: 187px;
top: 310px;
left: 151px;
top: 310px;
left: 151px;
height: 187px;
}
#paint-horizontal-line-select-line-size-1 {
width: 79px;
top: 310px;
left: 73px;
top: 310px;
left: 73px;
width: 79px;
}
#paint-vertical-line-select-line-size-2 {
height: 145px;
top: 240px;
left: 73px;
top: 240px;
left: 73px;
height: 145px;
}
#paint-horizontal-line-select-line-size-2 {
width: 10px;
top: 240px;
left: 63px;
top: 240px;
left: 63px;
width: 10px;
}
#paint-horizontal-line-select-line-size-3 {
width: 11px;
top: 385px;
left: 63px;
top: 385px;
left: 63px;
width: 11px;
}

17
src/views/learn/tips.jsx
View file

@ -1,11 +1,14 @@
import React from 'react';
export default class TipsSection extends React.Component{
render () {
return (
<div>
{this.props.children}
</div>
);
}
render () {
return (
<div>
{this.props.children}
</div>
);
}
}
TipsSection.propTypes = {
children: React.PropTypes.node
};

20
src/views/learn/tips/animation.jsx
View file

@ -1,20 +1,20 @@
import React from 'react';
import {Section} from '../../../components/sectionitem/sectionitem.jsx'
import {Section} from '../../../components/sectionitem/sectionitem.jsx';
export default class AnimationSection extends React.Component {
render () {
return (
<Section
id='character-animation-section'
title='Character Animation using the ScratchJr Blocks'
description='See how to make a simple script by connecting blocks together.'>
<div className='content-section-video'>
id="character-animation-section"
title="Character Animation using the ScratchJr Blocks"
description="See how to make a simple script by connecting blocks together.">
<div className="content-section-video">
<iframe
width='640'
height='480'
src='https://www.youtube.com/embed/JoHpVzltafU?rel=0'
frameborder='0'
allowfullscreen></iframe>
width="640"
height="480"
src="https://www.youtube.com/embed/JoHpVzltafU?rel=0"
frameBorder="0"
allowFullScreen></iframe>
</div>
</Section>
);

17
src/views/learn/tips/copyscripts.jsx
View file

@ -1,19 +1,22 @@
import React from 'react';
import {Section} from '../../../components/sectionitem/sectionitem.jsx'
import {Section} from '../../../components/sectionitem/sectionitem.jsx';
export default class CopyScriptSection extends React.Component {
render() {
render () {
return (
<Section id='copy-scripts-section' title='Copying Scripts' description=''>
<div className='content-section-item-description'>
<Section id="copy-scripts-section" title="Copying Scripts" description=''>
<div className="content-section-item-description">
You can copy a script from one character to another by dragging the
script from the programming area to the character in the list on the left.
<img src='/images/tips/copy-script.png' className='content-section-image' alt='copy a script'/>
<img src="/images/tips/copy-script.png" className="content-section-image" alt="copy a script"/>
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
But you can also duplicate a script in a single programming area if you
drag the script to the same character the script belongs to in the character list.
<img src='/images/tips/duplicate.png' className='content-section-image' alt='duplicate a script'/><br/>
<img
src="/images/tips/duplicate.png"
className="content-section-image"
alt="duplicate a script"/><br/>
The copy will appear on top of the original script, but slightly offset.
Just drag it over to one side to see both copies.<br/>
The only thing that can't be copied from one character to another is a

23
src/views/learn/tips/manage.jsx
View file

@ -1,20 +1,23 @@
import React from 'react';
import {Section} from '../../../components/sectionitem/sectionitem.jsx'
import {Section} from '../../../components/sectionitem/sectionitem.jsx';
export default class ManageSection extends React.Component {
render () {
return (
<Section
id='manage-projects-section'
title='Making, Renaming, and Deleting Projects'
description='Watch the video to learn how to make a new project, rename an existing project, anddelete a project.'>
<div className='content-section-video'>
id="manage-projects-section"
title="Making, Renaming, and Deleting Projects">
<div className="content-section-description">
Watch the video to learn how to make a new project, rename
an existing project, and delete a project.
</div>
<div className="content-section-video">
<iframe
width='640'
height='480'
src='https://www.youtube.com/embed/RXXDUxqBzBI?rel=0'
frameborder='0'
allowfullscreen></iframe>
width="640"
height="480"
src="https://www.youtube.com/embed/RXXDUxqBzBI?rel=0"
frameBorder="0"
allowFullScreen></iframe>
</div>
</Section>
);

20
src/views/learn/tips/multicharacter.jsx
View file

@ -1,20 +1,20 @@
import React from 'react';
import {Section} from '../../../components/sectionitem/sectionitem.jsx'
import {Section} from '../../../components/sectionitem/sectionitem.jsx';
export default class MultiCharacterSection extends React.Component {
render () {
return (
<Section
id='multi-character-section'
title='Multiple Characters'
description='See how to add characters to your project.'>
<div className='content-section-video'>
id="multi-character-section"
title="Multiple Characters"
description="See how to add characters to your project.">
<div className="content-section-video">
<iframe
width='640'
height='480'
src='https://www.youtube.com/embed/4qLVKpImrws?rel=0'
frameborder='0'
allowfullscreen></iframe>
width="640"
height="480"
src="https://www.youtube.com/embed/4qLVKpImrws?rel=0"
frameBorder="0"
allowFullScreen></iframe>
</div>
</Section>
);

20
src/views/learn/tips/pages.jsx
View file

@ -1,26 +1,32 @@
import React from 'react';
import {Section} from '../../../components/sectionitem/sectionitem.jsx'
import {Section} from '../../../components/sectionitem/sectionitem.jsx';
export default class PagesSection extends React.Component {
render() {
render () {
return (
<Section id='pages-section' title='Multiple pages' description=''>
<div className='content-section-item-description'>
<Section id="pages-section" title="Multiple pages" description=''>
<div className="content-section-item-description">
You can have up to four pages in a project. When you have more
than one page connected by Go To Page blocks, you can get your
scripts to run automatically by starting all the scripts with a
Green Flag. Then, when the Go To Page block turns to a page,
any scripts on that page with a Green Flag will run.
<img src='/images/tips/multi-page.png' className='content-section-image' alt='multiple pages'/><br/>
<img
src="/images/tips/multi-page.png"
className="content-section-image"
alt="multiple pages"/><br/>
When you tap the Green Flag, the action will start on whichever
page is currently selected, so make sure you choose Page 1 of
your project before tapping the Green Flag to get it to run from
the beginning.
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
You can change the order of the pages by dragging them to a new
position in the page list on the right.
<img src='/images/tips/reorder.png' className='content-section-image' alt='reorder pages'/><br/>
<img
src="/images/tips/reorder.png"
className="content-section-image"
alt="reorder pages"/><br/>
When you rearrange the pages, ScratchJr will also renumber the End
blocks for those pages, even if you've already placed them in scripts,
so that the pages still turn to the same page that you asked them to

36
src/views/learn/tips/samples.jsx
View file

@ -1,26 +1,38 @@
import React from 'react';
import {Section} from '../../../components/sectionitem/sectionitem.jsx'
import {Section} from '../../../components/sectionitem/sectionitem.jsx';
export default class SamplesSection extends React.Component {
render() {
render () {
return (
<Section
id='sample-projects-section'
title='Sample Projects Library'
description='The Sample Projects Library is a collection of
id="sample-projects-section"
title="Sample Projects Library"
description="The Sample Projects Library is a collection of
eight pre-made ScratchJr projects that use a range of blocks
and features to show you the variety of projects you can make
with ScratchJr. You can run these projects to see how they
work, and you can change the blocks around to see what effect
it has on the action.'>
<div className='content-section-item-description'>
it has on the action.">
<div className="content-section-item-description">
Access the Sample Projects library from the Home screen by tapping on the question mark.
<img src='/images/tips/home.png' className='content-section-image' alt='Home page'/>
<img
src="/images/tips/home.png"
className="content-section-image"
alt="Home page"/>
</div>
<div className='content-section-item-description'>
To run the Sample Projects choose a project and then tap on the Green Flag in each one. You can have a look at the scripts of the various characters, and even try changing the scripts to see what effect it has. The things you can't do in a Sample Project are: add characters or pages, change the background, add a title, or save any changes that you make.<br/>
<img src='/images/tips/sample-projects.png' className='content-section-image' alt='Sample Projects Library'/><br/>
After you have explored the sample projects, tap on the home button to create your own project using the full ScratchJr interface.
<div className="content-section-item-description">
To run the Sample Projects choose a project and then tap on
the Green Flag in each one. You can have a look at the scripts
of the various characters, and even try changing the scripts
to see what effect it has. The things you can't do in a Sample
Project are: add characters or pages, change the background,
add a title, or save any changes that you make.<br/>
<img
src="/images/tips/sample-projects.png"
className="content-section-image"
alt="Sample Projects Library"/><br/>
After you have explored the sample projects, tap on the home
button to create your own project using the full ScratchJr interface.
</div>
</Section>
);

107
src/views/learn/tips/share.jsx
View file

@ -1,50 +1,68 @@
import React from 'react';
import {Section} from '../../../components/sectionitem/sectionitem.jsx'
import {Section} from '../../../components/sectionitem/sectionitem.jsx';
export default class ShareSection extends React.Component {
render() {
render () {
return (
<Section
id='share-projects-section'
title='Sharing ScratchJr Projects'
description='You can share your ScratchJr projects in one of two ways: by email or by AirDrop.'>
<div className='content-section-item-description'>
id="share-projects-section"
title="Sharing ScratchJr Projects"
description="You can share your ScratchJr projects in one of two ways: by email or by AirDrop.">
<div className="content-section-item-description">
When the project you want to share is open, tap the yellow tab
in the top-right corner to go to the Project Information screen.
<img src='/images/tips/top-bar.png' className='content-section-image' alt='ScratchJr toprow icons'/>
<img
src="/images/tips/top-bar.png"
className="content-section-image"
alt="ScratchJr toprow icons"/>
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
Then select your sharing method: <em>Share by Email</em> or <em>Share
by AirDrop</em>. Regardless of which method you use
to send your project, the recipient tablet must have ScratchJr
installed. If you choose to share by AirDrop, the sender and
the recipient must both be iPads.
<img src='/images/tips/share.png' className='content-section-image' alt='Share Projectpage'/>
<img
src="/images/tips/share.png"
className="content-section-image"
alt="Share Projectpage"/>
</div>
<div className="content-section-item-description">
For both sharing by email and AirDrop, the sender must first
answer a simple math problem to ensure that an adult approves
sharing the project with others.
<img src="/images/tips/share-parent-gate.png" className="content-section-image" alt="Share parental gate" />
<img
src="/images/tips/share-parent-gate.png"
className="content-section-image"
alt="Share parental gate" />
</div>
<div className='content-section-item-title'>
<div className="content-section-item-title">
Sharing by Email
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
When you select Share by Email you'll see an email message
with your project attached to it.
<img src='/images/tips/share-email1.png' className='content-section-image' alt='send emaildialog'/>
<img
src="/images/tips/share-email1.png"
className="content-section-image"
alt="send emaildialog"/>
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
Type in the email address of the person you want to share
your project with and tap Send. When the recipient taps on
the email attachment, they will get the following pop-up:
<img src='/images/tips/share-email2.png' className='content-section-image' alt='receiveemail pop-up'/>
<img
src="/images/tips/share-email2.png"
className="content-section-image"
alt="receiveemail pop-up"/>
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
When they tap Open in 'ScratchJr', they will see the project
you shared on the Home screen, wrapped in blue ribbon.
<img src='/images/tips/shared-project.png' className='content-section-image' alt='sharedproject view'/>
<img
src="/images/tips/shared-project.png"
className="content-section-image"
alt="shared project view"/>
After they have opened the project once, the blue ribbon
will disappear from the Home screen.
<br/>
@ -52,10 +70,10 @@ export default class ShareSection extends React.Component {
<strong>Mail</strong>
app.</em>
</div>
<div className='content-section-item-title'>
<div className="content-section-item-title">
Sharing by AirDrop
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
To use AirDrop, you need to know the name of the iPad you
want to send your project to. You can find out the name
of an iPad by going to <em>Settings > General > About > Name</em>. Make sure
@ -63,36 +81,54 @@ export default class ShareSection extends React.Component {
and make sure you are within about 30 feet of the iPad
you want to send to. When you select AirDrop, you will
see which iPads are ready to receive your project.
<img src='/images/tips/share-airdrop1.png' className='content-section-image' alt='AirDropdevices available'/>
<img
src="/images/tips/share-airdrop1.png"
className="content-section-image"
alt="AirDropdevices available"/>
These are the iPads that are available for AirDrop. If you
don't see the iPad you're looking for, make sure it's on
and not sleeping.
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
When you select an iPad for AirDrop, the recipient will see the following message:
<img src='/images/tips/share-airdrop2.png' className='content-section-image' alt='AirDroprecipient dialog'/>
<img
src="/images/tips/share-airdrop2.png"
className="content-section-image"
alt="AirDroprecipient dialog"/>
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
If the recipient taps Accept, ScratchJr will tell you that
the project was accepted with a 'Sent' message.<br/>
<img src='/images/tips/share-airdrop3.png' className='content-section-image' alt='AirDropconfirmation'/>
<img
src="/images/tips/share-airdrop3.png"
className="content-section-image"
alt="AirDropconfirmation"/>
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
The recipient will see the shared project wrapped in blue
ribbon on the Home screen.
<img src='/images/tips/shared-project.png' className='content-section-image' alt='SharedProject view'/>
<img
src="/images/tips/shared-project.png"
className="content-section-image"
alt="SharedProject view"/>
After they've opened the project, the blue ribbon will
disappear from the Home screen.
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
If AirDrop isn't available on your iPad (earlier than 4th
generation or iOS 7), you'll see this message:<br/>
<img src='/images/tips/share-airdrop4.png' className='content-section-image' alt='AirDropunavailable dialog'/>
<img
src="/images/tips/share-airdrop4.png"
className="content-section-image"
alt="AirDropunavailable dialog"/>
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
If the recipient iPad doesn't have ScratchJr installed,
you'll see this message:
<img src='/images/tips/share-airdrop5.png' className='content-section-image' alt='AirDropunavailable dialog'/><br/>
<img
src="/images/tips/share-airdrop5.png"
className="content-section-image"
alt="AirDropunavailable dialog"/><br/>
Install ScratchJr and the project should now be visible.<br/>
<em>Note: If you have several iPads with the same name,
you won't know which iPad to send the file to. In
@ -100,16 +136,19 @@ export default class ShareSection extends React.Component {
the one you want to send your project to.
</em>
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
To turn off AirDrop, swipe up from the bottom of the iPad.
You will see the following:
<img src='/images/tips/share-airdrop6.png' className='content-section-image' alt='AirDropcontrols'/><br/>
<img
src="/images/tips/share-airdrop6.png"
className="content-section-image"
alt="AirDropcontrols"/><br/>
Tap on 'AirDrop' and set the option to 'Off'.
</div>
<div className='content-section-item-title'>
<div className="content-section-item-title">
Notes on Sharing Projects
</div>
<div className='content-section-item-description'>
<div className="content-section-item-description">
When you share a project all the images, recordings, sounds,
and any created characters or backgrounds in your project
will be transferred from one device to the other.<br/><br/>

160
src/views/learn/tips/tipshome.jsx
View file

@ -1,118 +1,120 @@
import React from 'react';
import {Link} from 'react-router';
import {LinkedSectionItem, SectionItem} from '../../../components/sectionitem/sectionitem.jsx'
import {LinkedSectionItem, SectionItem} from '../../../components/sectionitem/sectionitem.jsx';
export default class TipsHome extends React.Component {
render() {
render () {
return (
<div className='content-section learn-tips' id='tips-section'>
<div className='content-section-title'>
<div className="content-section learn-tips" id="tips-section">
<div className="content-section-title">
Tips &amp; Hints
</div>
<div className='content-section-description'>
Tips and hints that you might find useful as you explore ScratchJr. For answers to more general questions about ScratchJr, see the <a href='/about/faq'>Frequently Asked Questions</a>.
<div className="content-section-description">
Tips and hints that you might find useful as you explore ScratchJr.
For answers to more general questions about ScratchJr, see
the <a href="/about/faq">Frequently Asked Questions</a>.
</div>
<div className='content-section-items-container'>
<div className="content-section-items-container">
<LinkedSectionItem
title='Making, Renaming, and Deleting Projects'
format='full'
thumbnail='/images/tips/managing-projects.jpg'
description='Learn how to make a new project, rename an existing project, and delete a project.'
linkURL='/learn/tips/manage-projects'
linkText='Watch video'
title="Making, Renaming, and Deleting Projects"
format="full"
thumbnail="/images/tips/managing-projects.jpg"
linkURL="/learn/tips/manage-projects"
linkText="Watch video">
Learn how to make a new project, rename an existing project, and delete a project.
</LinkedSectionItem>
<LinkedSectionItem
title="Character Animation using the ScratchJr Blocks"
format="full"
thumbnail="/images/tips/character-animation.jpg"
description="Make a simple script by connecting blocks together."
linkURL="/learn/tips/character-animation"
linkText="Watch video"
/>
<LinkedSectionItem
title='Character Animation using the ScratchJr Blocks'
format='full'
thumbnail='/images/tips/character-animation.jpg'
description='Make a simple script by connecting blocks together.'
linkURL='/learn/tips/character-animation'
linkText='Watch video'
title="Multiple Characters"
format="full"
thumbnail="/images/tips/multi-character.jpg"
description="Learn how to add characters to your project."
linkURL="/learn/tips/multi-character"
linkText="Watch video"
/>
<LinkedSectionItem
title='Multiple Characters'
format='full'
thumbnail='/images/tips/multi-character.jpg'
description='Learn how to add characters to your project.'
linkURL='/learn/tips/multi-character'
linkText='Watch video'
title="Trigger Blocks"
format="full"
thumbnail="/images/tips/triggers.jpg"
description="Use trigger blocks to specify when a script should run."
linkURL="/learn/tips/trigger-blocks"
linkText="Watch video"
/>
<LinkedSectionItem
title='Trigger Blocks'
format='full'
thumbnail='/images/tips/triggers.jpg'
description='Use trigger blocks to specify when a script should run.'
linkURL='/learn/tips/trigger-blocks'
linkText='Watch video'
title="Sharing ScratchJr Projects"
format="full"
thumbnail="/images/tips/share.png"
description="You can share projects by email. On iPads you can also share project by AirDrop."
linkURL="/learn/tips/share-projects"
linkText="Read more"
/>
<LinkedSectionItem
title='Sharing ScratchJr Projects'
format='full'
thumbnail='/images/tips/share.png'
description='You can share projects by email. On iPads you can also share project by AirDrop.'
linkURL='/learn/tips/share-projects'
linkText='Read more'
/>
<LinkedSectionItem
title='Sample Projects'
format='full'
thumbnail='/images/tips/sample-projects.png'
description='The Sample Projects library is a collection of
title="Sample Projects"
format="full"
thumbnail="/images/tips/sample-projects.png"
linkURL="/learn/tips/sample-projects"
linkText="Read more">
The Sample Projects library is a collection of
eight pre-made projects that use a range of blocks and
features to show you the variety of projects you can make
with ScratchJr.'
linkURL='/learn/tips/sample-projects'
linkText='Read more'
/>
with ScratchJr.
</LinkedSectionItem>
<SectionItem
title='Character List Scrolling'
format='full'
thumbnail='/images/tips/character-list.png'
description="If there's a scroll bar in the Character List
title="Character List Scrolling"
format="full"
thumbnail="/images/tips/character-list.png">
If there's a scroll bar in the Character List
on the left of the Stage it means you that you have more
characters in your project than fit in the list on the screen.
You can scroll through this list of characters by swiping
up or down on the list, but not on the scroll bar. The order
of the characters doesn't matter for any of the action in the project"
/>
of the characters doesn't matter for any of the action in the project
</SectionItem>
<SectionItem
title='Copying Characters'
format='full'
thumbnail='/images/tips/copy-character.png'
description="To copy a character and its scripts, you can
title="Copying Characters"
format="full"
thumbnail="/images/tips/copy-character.png">
To copy a character and its scripts, you can
drag the character from the list of characters on the left
over to the list of pages on the right. This will work for
copying characters to the same page and to other pages.
The scripts and sounds will copy along with the character,
but then the scripts are separate, so when you change the
scripts or sounds of one of the copies, it won't affect the
other existing copies of the character."
/>
other existing copies of the character.
</SectionItem>
<LinkedSectionItem
title='Copying Scripts'
format='full'
thumbnail='/images/tips/copy-script.png'
description='You can copy a script (set of blocks) from one character to another in the same project.'
linkURL='/learn/tips/copy-scripts'
linkText='Read more'
/>
title="Copying Scripts"
format="full"
thumbnail="/images/tips/copy-script.png"
description=''
linkURL="/learn/tips/copy-scripts"
linkText="Read more">
You can copy a script (set of blocks) from one character to another in the same project.
</LinkedSectionItem>
<LinkedSectionItem
title='Multi-page projects'
format='full'
thumbnail='/images/tips/multi-page.png'
description='Projects can have up to four pages with their own characters and scripts.'
linkURL='/learn/tips/pages'
linkText='Read more'
title="Multi-page projects"
format="full"
thumbnail="/images/tips/multi-page.png"
description="Projects can have up to four pages with their own characters and scripts."
linkURL="/learn/tips/pages"
linkText="Read more"
/>
<SectionItem
title='Moving Backwards'
format='full'
thumbnail='/images/tips/backwards-thumb.png'
description='You can make a character move backwards by giving
title="Moving Backwards"
format="full"
thumbnail="/images/tips/backwards-thumb.png">
You can make a character move backwards by giving
your motion blocks negative numbers. If you want to make your
character face the opposite direction without moving forward or
backward, add a motion block with a zero and tap on it.'
/>
backward, add a motion block with a zero and tap on it.
</SectionItem>
</div>
</div>
);

20
src/views/learn/tips/triggers.jsx
View file

@ -1,20 +1,20 @@
import React from 'react';
import {Section} from '../../../components/sectionitem/sectionitem.jsx'
import {Section} from '../../../components/sectionitem/sectionitem.jsx';
export default class TriggersSection extends React.Component {
render () {
return (
<Section
id='trigger-blocks-section'
title='Trigger Blocks'
description='See how to use trigger blocks to specify when a script should run.'>
<div className='content-section-video'>
id="trigger-blocks-section"
title="Trigger Blocks"
description="See how to use trigger blocks to specify when a script should run.">
<div className="content-section-video">
<iframe
width='640'
height='480'
src='https://www.youtube.com/embed/123AdwR_JxI?rel=0'
frameborder='0'
allowfullscreen></iframe>
width="640"
height="480"
src="https://www.youtube.com/embed/123AdwR_JxI?rel=0"
frameBorder="0"
allowFullScreen></iframe>
</div>
</Section>
);

4
src/views/privacy/privacy.jsx
View file

@ -10,7 +10,7 @@ export default class Privacy extends React.Component {
return (
<div>
<NavBar/>
<div id='content'>
<div id="content">
<h1>Privacy Policy</h1>
<p>
We created ScratchJr so that children can create their own
@ -19,7 +19,7 @@ export default class Privacy extends React.Component {
parents. We wrote this privacy policy to explain what
information we collect, how we use it, and what we're doing
to keep it safe. If you have any questions regarding this
privacy policy, you can <a href='mailto:info@scratchjr.org'>
privacy policy, you can <a href="mailto:info@scratchjr.org">
contact us</a>.
</p>
<h2>What information does ScratchJr collect?</h2>

27
src/views/privacy/privacy.scss
View file

@ -1,14 +1,19 @@
$link-blue: #2898cd;
$text-color: #808080;
h2 {
margin-left: 35px;
margin-top: 10px;
margin-bottom: 0px;
font-size: 24px;
color: #2898cd;
margin-top: 10px;
margin-bottom: 0;
margin-left: 35px;
color: $link-blue;
font-size: 24px;
}
p,ul {
margin-left: 35px;
margin-right: 35px;
color: #808080;
line-height: 22px;
font-size: 15px;
p,
ul {
margin-right: 35px;
margin-left: 35px;
line-height: 22px;
color: $text-color;
font-size: 15px;
}

2
src/views/teach/activities.json
View file

@ -21,7 +21,7 @@
"title":"4 Moonrise after Sunset",
"thumbnail": "/images/activitycards/card07-moon.png",
"description": "Learn how to add a new page to change scene...",
"linkURL":"activities/card07-moon.pdf"
"linkURL":"/activities/card07-moon.pdf"
},
{
"title":"5 Spooky Forest",

14
src/views/teach/activities.jsx
View file

@ -17,21 +17,21 @@ export default class ActivitiesSection extends React.Component {
</div>
<div className="content-section-items-container">
<StaticLinkSectionItem
title='Introduction'
format='full'
thumbnail='/images/activitycards/intro.png'
title="Introduction"
format="full"
thumbnail="/images/activitycards/intro.png"
description="Watch this video for a brief introduction to ScratchJr's interface..."
linkURL='https://www.youtube.com/watch?v=ciWPaEgscr0&feature=youtu.be'
linkText='See more'/>
linkURL="https://www.youtube.com/watch?v=ciWPaEgscr0&feature=youtu.be"
linkText="See more"/>
</div>
<div className="content-section-items-container">
{activities.map((activity, index) => {
return (
<StaticLinkSectionItem
key={index}
format='half'
format="half"
{...activity}
linkText='Read more' />
linkText="Read more" />
);
})}

41
src/views/teach/assessments.jsx
View file

@ -5,24 +5,33 @@ export default class AssessmentsSection extends React.Component {
render () {
return(
<Section
id='assessments-section'
title='Assessments'
description="These assessments provide two different ways to help determine the depth of students' understanding of the relationship between the programming blocks and their associated behaviors. Both assessments use the same basic ScratchJr examples.">
id="assessments-section"
title="Assessments">
<div className="content-section-description">
These assessments provide two different ways to help determine
the depth of students' understanding of the relationship between
the programming blocks and their associated behaviors.
Both assessments use the same basic ScratchJr examples
</div>
<StaticLinkSectionItem
title='Circle-the-Blocks Assessment'
format='full'
thumbnail='/images/assessments/circle-the-blocks.png'
description='In this basic assessment, students identify which programming blocks were used in a given ScratchJr project, but the students do not sequence the blocks...'
linkURL='/assessments/circle-the-blocks.pdf'
linkText='Read more'/>
title="Circle-the-Blocks Assessment"
format="full"
thumbnail="/images/assessments/circle-the-blocks.png"
linkURL="/assessments/circle-the-blocks.pdf"
linkText="Read more">
In this basic assessment, students identify which programming
blocks were used in a given ScratchJr project, but the students
do not sequence the blocks...
</StaticLinkSectionItem>
<StaticLinkSectionItem
title='Reverse-Engineering Assessment'
format='full'
thumbnail='/images/assessments/reverse-engineer.png'
description='In this more in-depth assessment, students view a ScratchJr project and then reconstruct the scripts of the project using pre-printed blocks...'
linkURL='/assessments/reverse-engineer-and-labels.pdf'
linkText='Read more'/>
title="Reverse-Engineering Assessment"
format="full"
thumbnail="/images/assessments/reverse-engineer.png"
linkURL="/assessments/reverse-engineer-and-labels.pdf"
linkText="Read more">
In this more in-depth assessment, students view a ScratchJr project
and then reconstruct the scripts of the project using pre-printed blocks...
</StaticLinkSectionItem>
</Section>
);
}

5
src/views/teach/curricula.jsx
View file

@ -1,7 +1,7 @@
import React from 'react';
export default class CurriculaSection extends React.Component {
render() {
render () {
return (
<div>
{this.props.children}
@ -9,3 +9,6 @@ export default class CurriculaSection extends React.Component {
);
}
}
CurriculaSection.propTypes = {
children: React.PropTypes.node
};

51
src/views/teach/curricula/animatedgenres.jsx
View file

@ -5,8 +5,8 @@ export default class AnimatedGenres extends React.Component {
render () {
return (
<Section
id='animated-genres-section'
title='Animated Genres Curriculum'
id="animated-genres-section"
title="Animated Genres Curriculum"
description=''>
<div className="content-section-item-title">
<a href="/curricula/animatedgenres/full.pdf">Download all lessons as one file</a>
@ -18,46 +18,65 @@ export default class AnimatedGenres extends React.Component {
Module 1 - Making a ScratchJr Collage
</div>
<div className="content-section-item-description">
In this module, students learn how to navigate around the ScratchJr iPad app, and they learn simple programming commands that will animate their characters. At the end of the module, students will create a ScratchJr collage project.
In this module, students learn how to navigate around the ScratchJr
iPad app, and they learn simple programming commands that will animate
their characters. At the end of the module, students will create a
ScratchJr collage project.
<br/>
<a href="/curricula/animatedgenres/1.pdf">Lesson 1 - Instructions, Sequencing, and an Introduction to the ScratchJr iPad App</a>
<a href="/curricula/animatedgenres/1.pdf">
Lesson 1 - Instructions, Sequencing, and an Introduction to the ScratchJr iPad App</a>
<br/>
<a href="/curricula/animatedgenres/2.pdf">Lesson 2 - Same Block Sequencing and Motion</a>
<a href="/curricula/animatedgenres/2.pdf">
Lesson 2 - Same Block Sequencing and Motion</a>
<br/>
<a href="/curricula/animatedgenres/3.pdf">Lesson 3 - Start on Green Flag Block, End Block, and Choosing Characters</a>
<a href="/curricula/animatedgenres/3.pdf">
Lesson 3 - Start on Green Flag Block, End Block, and Choosing Characters</a>
<br/>
<a href="/curricula/animatedgenres/4.pdf">Lesson 4 - Backgrounds and Review of Programming Multiple Characters</a>
<a href="/curricula/animatedgenres/4.pdf">
Lesson 4 - Backgrounds and Review of Programming Multiple Characters</a>
<br/>
<a href="/curricula/animatedgenres/collage.pdf">Collage Project</a>
<a href="/curricula/animatedgenres/collage.pdf">
Collage Project</a>
<br/>
</div>
<div className="content-section-item-title">
Module 2 - Making a ScratchJr Story
</div>
<div className="content-section-item-description">
In this module, students learn how to define more specific behavior for their characters, and they use tools such as speech bubbles and pages to help them weave a narrative. At the end of the module, students will create a ScratchJr story project.
In this module, students learn how to define more specific behavior
for their characters, and they use tools such as speech bubbles and
pages to help them weave a narrative. At the end of the module,
students will create a ScratchJr story project.
<br/>
<a href="/curricula/animatedgenres/5.pdf">Lesson 5 - Speed</a>
<a href="/curricula/animatedgenres/5.pdf">
Lesson 5 - Speed</a>
<br/>
<a href="/curricula/animatedgenres/6.pdf">Lesson 6 - Numbers and Repeating Sentences</a>
<a href="/curricula/animatedgenres/6.pdf">
Lesson 6 - Numbers and Repeating Sentences</a>
<br/>
<a href="/curricula/animatedgenres/7.pdf">Lesson 7 - Speech Bubbles, Sounds, Pages and Wait</a>
<a href="/curricula/animatedgenres/7.pdf">
Lesson 7 - Speech Bubbles, Sounds, Pages and Wait</a>
<br/>
<a href="/curricula/animatedgenres/story.pdf">Story Project</a>
<a href="/curricula/animatedgenres/story.pdf">
Story Project</a>
<br/>
</div>
<div className="content-section-item-title">
Module 3 - Making a ScratchJr Game
</div>
<div className="content-section-item-description">
In this module, students learn more advanced concepts in ScratchJr. Most importantly, they discover how to program characters that interact with each other and with the iPad user. At the end of the module, students will create a ScratchJr game project.
In this module, students learn more advanced concepts in ScratchJr.
Most importantly, they discover how to program characters that
interact with each other and with the iPad user. At the end of
the module, students will create a ScratchJr game project.
<br/>
<a href="/curricula/animatedgenres/8.pdf">Lesson 8 - Start on Bump, Start on Tap, Send and Receive Messages, Stop</a>
<a href="/curricula/animatedgenres/8.pdf">Lesson 8 - Start on
Bump, Start on Tap, Send and Receive Messages, Stop</a>
<br/>
<a href="/curricula/animatedgenres/game.pdf">Game Project</a>
<br/>
</div>
</Section>
)
);
}
}

28
src/views/teach/curricula/home.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import {StaticLinkSectionItem, LinkedSectionItem} from '../../../components/sectionitem/sectionitem.jsx';
export default class HomeSection extends React.Component {
render() {
render () {
return (
<div className='content-section' id='curricula-section'>
<div className='content-section-title'>
@ -25,30 +25,40 @@ export default class HomeSection extends React.Component {
title='Printable Block Images'
format='full'
thumbnail='/images/rightandleft.png'
description='You can print high quality images of the ScratchJr blocks for classroom instruction... '
linkURL='/pdfs/blocks.pdf'
linkText='Download PDF'/>
linkText='Download PDF'>
You can print high quality images of the ScratchJr blocks for classroom instruction...
</StaticLinkSectionItem>
<LinkedSectionItem
title='Animated Genres Curriculum'
format='full'
thumbnail='/images/slide1.png'
description='This curriculum provides students with the opportunity to learn all of the concepts in ScratchJr and apply these concepts in their own personal creations. At the heart of the curriculum are three types of interactive projects that can be made with ScratchJr... '
linkURL='/teach/curricula/animated-genres'
linkText='Read more'/>
linkText='Read more'>
This curriculum provides students with the opportunity to learn
all of the concepts in ScratchJr and apply these concepts in
their own personal creations. At the heart of the curriculum are
three types of interactive projects that can be made with ScratchJr...
</LinkedSectionItem>
<LinkedSectionItem
title='Playground Games Curriculum'
format='full'
thumbnail='/images/playground/playground.png'
description='In the eight lessons of this curriculum, children learn how to use ScratchJr as they re-create familiar playground games. ... '
linkText='Read more'
linkURL='/teach/curricula/playground'/>
linkURL='/teach/curricula/playground'>
In the eight lessons of this curriculum, children learn how to use
ScratchJr as they re-create familiar playground games...
</LinkedSectionItem>
<LinkedSectionItem
title='Reinforcing Literacy and Math Curriculum'
format='full'
thumbnail='/images/literacymath/project1.png'
description='These curricular modules describe ScratchJr projects that reinforce the Common Core Standards. They could serve as games programmed by older ScratchJr students to be played by younger ScratchJr students... '
linkURL='/teach/curricula/literacy-math'
linkText='Read more'/>
linkText='Read more'>
These curricular modules describe ScratchJr projects that reinforce
the Common Core Standards. They could serve as games programmed
by older ScratchJr students to be played by younger ScratchJr students...
</LinkedSectionItem>
</div>
</div>

13
src/views/teach/curricula/litmath.jsx
View file

@ -6,22 +6,23 @@ export default class LiteracyMath extends React.Component {
render () {
return (
<Section
id='literacy-math-curriculum-section'
title='Reinforcing Literacy and Math Curriculum'
description='These curricular modules describe ScratchJr projects that reinforce literacy and math standards.'>
id="literacy-math-curriculum-section"
title="Reinforcing Literacy and Math Curriculum"
description="These curricular modules describe ScratchJr projects
that reinforce literacy and math standards.">
<div className="content-section-items-container">
{activities.map((activity, index) => {
return (
<StaticLinkSectionItem
key={index}
format='half'
linkText='Read more'
format="half"
linkText="Read more"
{ ...activity}
/>
);
})}
</div>
</Section>
)
);
}
}

20
src/views/teach/curricula/playground.jsx
View file

@ -2,26 +2,32 @@ import React from 'react';
import {Section, StaticLinkSectionItem} from '../../../components/sectionitem/sectionitem.jsx';
import activities from './playground.json';
export default class AnimatedGenres extends React.Component {
export default class Playground extends React.Component {
render () {
return (
<Section
id='playground-curriculum-section'
title='Playground Curriculum'
description={["This curriculum provides an introduction to ScratchJr by re-creating familiar children's games using the ScratchJr characters and programming blocks. ", <a href="curricula/playground/playground-games-full.pdf">[Download all lessons as one file]</a>]}>
id="playground-curriculum-section"
title="Playground Curriculum">
<div className="content-section-description">
This curriculum provides an introduction to ScratchJr by re-creating
familiar children's games using the ScratchJr characters and programming blocks.
<a href="curricula/playground/playground-games-full.pdf">
[Download all lessons as one file]
</a>
</div>
<div className="content-section-items-container">
{activities.map((activity, index) => {
return (
<StaticLinkSectionItem
key={index}
format='half'
linkText='Read more'
format="half"
linkText="Read more"
{ ...activity}
/>
);
})}
</div>
</Section>
)
);
}
}

25
src/views/teach/teach.jsx
View file

@ -5,6 +5,7 @@ import { useScroll } from 'react-router-scroll';
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 ActivitiesSection from './activities.jsx';
import CurriculaSection from './curricula.jsx';
@ -16,7 +17,7 @@ import AssessmentsSection from './assessments.jsx';
import './teach.scss';
export default class Teach extends React.Component {
render() {
render () {
var tabs = [
{
url: '/teach/activities',
@ -38,7 +39,7 @@ export default class Teach extends React.Component {
return (
<div>
<NavBar selected="teach"/>
<div id='content'>
<div id="content">
<TabNav items={tabs}/>
{this.props.children}
</div>
@ -47,19 +48,23 @@ export default class Teach extends React.Component {
);
}
}
Teach.propTypes = {
children: React.PropTypes.node
};
render((
<Router history={browserHistory} render={applyRouterMiddleware(useScroll())}>
<Route path='/teach' component={Teach}>
<Route path='activities' component={ActivitiesSection}/>
<Route path='curricula' component={CurriculaSection}>
<Route path="/teach" component={Teach}>
<Route path="activities" component={ActivitiesSection}/>
<Route path="curricula" component={CurriculaSection}>
<IndexRoute component={CurriculaHomeSection}/>
<Route path='animated-genres' component={AnimatedGenresSection} />
<Route path='playground' component={PlaygroundSection} />
<Route path='literacy-math' component={LitMathSection} />
<Route path="animated-genres" component={AnimatedGenresSection} />
<Route path="playground" component={PlaygroundSection} />
<Route path="literacy-math" component={LitMathSection} />
</Route>
<Route path='assessments' component={AssessmentsSection}/>
<IndexRedirect to='activities'/>
<Route path="assessments" component={AssessmentsSection}/>
<IndexRedirect to="activities"/>
<Route path="*" component={PageNotFound}/>
</Route>
</Router>
), document.getElementById('app'));

21
src/views/teach/teach.scss
View file

@ -1,27 +1,28 @@
/* SUBMENUS */
// Submenus
.activities-icon {
background-image: url(/images/activities_b.svg);
background-size: 100%;
background-image: url("/images/activities_b.svg");
background-size: 100%;
}
.content-nav-item-selected .activities-icon {
background-image: url(/images/activities_o.svg);
background-image: url("/images/activities_o.svg");
}
.curricula-icon {
background-image: url(/images/curricula_b.svg);
background-size: 100%;
background-image: url("/images/curricula_b.svg");
background-size: 100%;
}
.content-nav-item-selected .curricula-icon {
background-image: url(/images/curricula_o.svg);
background-image: url("/images/curricula_o.svg");
}
.assessments-icon {
background-image: url(/images/assessment_b.svg);
background-size: 100%;
background-image: url("/images/assessment_b.svg");
background-size: 100%;
}
.content-nav-item-selected .assessments-icon {
background-image: url(/images/assessment_o.svg);
background-image: url("/images/assessment_o.svg");
}