scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

start sec

Browse source
This commit is contained in:
caseymm 2022-04-06 14:09:10 -07:00
parent 20cf588745
commit 279be7977e
5 changed files with 263 additions and 425 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

463
src/views/annual-report/2021/annual-report.jsx
View file

@ -11,15 +11,12 @@ const frameless = require('../../../lib/frameless');
const Avatar = require('../../../components/avatar/avatar.jsx'); const Avatar = require('../../../components/avatar/avatar.jsx');
const Page = require('../../../components/page/www/page.jsx'); const Page = require('../../../components/page/www/page.jsx');
const Grid = require('../../../components/grid/grid.jsx');
const Button = require('../../../components/forms/button.jsx'); const Button = require('../../../components/forms/button.jsx');
const FlexRow = require('../../../components/flex-row/flex-row.jsx'); const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const Comment = require('../../../components/comment/comment.jsx'); const Comment = require('../../../components/comment/comment.jsx');
const CountryBlurb = require('./country-blurb/country-blurb.jsx'); const CountryBlurb = require('./country-blurb/country-blurb.jsx');
const TextAndMediaSnippet = require('../../../components/text-and-media-snippet/text-and-media-snippet.jsx'); const TextAndMediaSnippet = require('../../../components/text-and-media-snippet/text-and-media-snippet.jsx');
const TimelineCard = require('../../../components/timeline-card/timeline-card.jsx'); const TimelineCard = require('../../../components/timeline-card/timeline-card.jsx');
const WorldMap = require('../../../components/world-map/world-map.jsx');
const CountryUsage = require('./country-usage.json');
const IndiaProjects = require('./india-projects.json'); const IndiaProjects = require('./india-projects.json');
const PeopleGrid = require('../../../components/people-grid/people-grid.jsx'); const PeopleGrid = require('../../../components/people-grid/people-grid.jsx');
const People = require('./people.json'); const People = require('./people.json');
@ -55,15 +52,6 @@ const SECTION_NAMES = {
donate: <FormattedMessage id="annualReport.2021.subnavDonate" /> donate: <FormattedMessage id="annualReport.2021.subnavDonate" />
}; };
// Constants used for world map data processing/formatting for use with Plotly
const countryNames = Object.keys(CountryUsage);
const countryData = countryNames.map(key =>
`<b>${CountryUsage[key].display}</b><br>${CountryUsage[key].count.toLocaleString('en')}`
);
const colorIndex = countryNames.map(key => CountryUsage[key]['log count']);
const minColor = 'rgba(46, 142, 184, .05)';
const maxColor = 'rgba(46, 142, 184, 1)';
// Create the div given a list of supporter names, // Create the div given a list of supporter names,
// this will contain two columns of names either of equal size // this will contain two columns of names either of equal size
// or with the left column containing 1 more item than the right // or with the left column containing 1 more item than the right
@ -573,7 +561,7 @@ class AnnualReport extends React.Component {
</div> </div>
<img <img
className="world" className="world"
src="/images/annual-report/2021/0_Data Section/Saudi Arabia Data Graphic.svg" src="/images/annual-report/2021/0_Data Section/Saudi Arabia.svg"
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altSaudiArabiaVisualization'} {id: 'annualReport.2021.altSaudiArabiaVisualization'}
)} )}
@ -582,76 +570,6 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
</div> </div>
{/* <div className="map-inner">
<div className="reach-map">
<h3>
<FormattedMessage id="annualReport.2021.reachGlobalCommunity" />
</h3>
<p>
<FormattedMessage id="annualReport.2021.reachMapBlurb" />
</p>
<div className="map-key">
<div className="map-scale">
<div>0</div>
<div className="map-legend" />
<div>
<FormattedMessage id="annualReport.2021.reachMap24M" />
</div>
</div>
<div>
<FormattedMessage id="annualReport.2021.reachMapLog" />
</div>
</div>
<div className="map-wrapper">
<MediaQuery minWidth={frameless.desktop}>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/>
</MediaQuery>
<MediaQuery
maxWidth={frameless.desktop - 1}
minWidth={frameless.tabletPortrait}
>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/>
</MediaQuery>
<MediaQuery
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobileIntermediate}
>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
minColor={minColor}
maxColor={maxColor}
/>
</MediaQuery>
</div>
</div>
</div> */}
</div> </div>
<div <div
className="reach-section t" className="reach-section t"
@ -768,12 +686,12 @@ class AnnualReport extends React.Component {
<div className="three-pillars"> <div className="three-pillars">
<div className="pillar-splash"> <div className="pillar-splash">
<h4> <h4>
<FormattedMessage id="annualReport.2021.connectivityTitle" /> <FormattedMessage id="annualReport.2021.SECTitle" />
</h4> </h4>
</div> </div>
<div className="pillar-splash"> <div className="pillar-splash">
<h4> <h4>
<FormattedMessage id="annualReport.2021.adaptationTitle" /> <FormattedMessage id="annualReport.2021.accessTitle" />
</h4> </h4>
</div> </div>
<div className="pillar-splash"> <div className="pillar-splash">
@ -782,193 +700,86 @@ class AnnualReport extends React.Component {
</h4> </h4>
</div> </div>
</div> </div>
<div className="equity-and-global">
<div className="pillar-splash">
<h4>
<FormattedMessage id="annualReport.2021.equity" />
</h4>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="initiatives-connectivity"> <div className="initiatives-SEC">
<div className="initiatives-subsection-header connectivity"> <div className="initiatives-subsection-header SEC">
<div className="inner"> <div className="inner">
<h2> <h2>
<FormattedMessage id="annualReport.2021.connectivityTitle" /> <FormattedMessage id="annualReport.2021.SECTitle" />
</h2> </h2>
<p> <p>
<FormattedMessage id="annualReport.2021.connectivityIntro" /> <FormattedMessage id="annualReport.2021.SECIntro" />
</p> </p>
</div> </div>
</div> </div>
<div className="initiatives-subsection-content connectivity"> <div className="initiatives-subsection-content SEC">
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<div className="inner"> {/* <div className="inner"> */}
<div className="content"> <div className="content two-up">
<div className="text"> <div className="p-content">
<div className="spotlight bubble connectivity india"> <h4>
<FormattedMessage id="annualReport.2021.spotlightStory" /> <FormattedMessage id="annualReport.2021.SECWhatIs" />
</div> </h4>
<h2> <p><FormattedMessage id="annualReport.2021.SECWhatIsP1" /></p>
<FormattedMessage id="annualReport.2021.connectivityIndia" /> <p><FormattedMessage id="annualReport.2021.SECWhatIsP2" /></p>
</h2> <p><FormattedMessage id="annualReport.2021.SECWhatIsP3" /></p>
<p className="larger">
<FormattedMessage id="annualReport.2021.connectivityIndiaIntro" />
</p>
</div>
<div className="images">
<Grid
showAvatar
items={IndiaProjects}
showFavorites={false}
showLoves={false}
showViews={false}
/>
</div>
</div> </div>
<p className="about-breaker"> <div className="stats">
<FormattedMessage id="annualReport.2021.connectivityIndiaParagraph" /> <div className="stat-block">
</p> <div className="stat-num">
<div className="content around"> <FormattedMessage id="annualReport.2021.SECOrgNumber" />
<img </div>
src="/images/annual-report/2021/connectivity/India_Data/data_projectscreatedonline_graphic.svg" <div className="stat-label">
alt={this.props.intl.formatMessage( <FormattedMessage id="annualReport.2021.SECOrgLabel" />
{id: 'annualReport.2021.altPieChart'}
)}
/>
<div className="india-numbers">
<h2>
<FormattedMessage
id="annualReport.2021.connectivityIndiaProjectsNumber"
values={{
million: (
<span className="million">
<FormattedMessage id="annualReport.2021.reachMillion" />
</span>
)
}}
/>
</h2>
<h4>
<FormattedMessage id="annualReport.2021.connectivityIndiaProjectsSubhead" />
</h4>
<div className="increase bubble inverted">
<FormattedMessage id="annualReport.2021.connectivityIndiaProjectsIncreasePercent" />
</div> </div>
</div> </div>
</div> <div className="stat-block">
<div className="content around users"> <div className="stat-num">
<div className="users-text"> <FormattedMessage id="annualReport.2021.SECCountryNumber" />
<p> </div>
<span className="bold"> <div className="stat-label">
<FormattedMessage id="annualReport.2021.connectivityRegistedUsers" /> <FormattedMessage id="annualReport.2021.SECCountryLabel" />
</span>
<FormattedMessage id="annualReport.2021.connectivityRegistedUsersNumbers" />
</p>
</div>
<img
src="/images/annual-report/2021/connectivity/India_Data/data_alltimeusers_graphic.svg"
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altUsers'}
)}
/>
</div>
<div className="content around users">
<div className="stats">
<p className="bold">
<FormattedMessage id="annualReport.2021.connectivityIndiaUsers" />
</p>
<h2>
<FormattedMessage id="annualReport.2021.connectivityIndiaUsersPercent" />
</h2>
<p className="bold">
<FormattedMessage id="annualReport.2021.connectivityIndiaYear" />
</p>
<div className="bubble inverted">
<FormattedMessage
id="annualReport.2021.connectivityIndiaUsersOld"
values={{
million: (
<FormattedMessage id="annualReport.2021.reachMillion" />
)
}}
/>
<img
src="/images/annual-report/2021/Symbols-UI/Arrow_Next_purple.svg"
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altArrowNext'}
)}
/>
<FormattedMessage
id="annualReport.2021.connectivityIndiaUsersNew"
values={{
million: (
<FormattedMessage id="annualReport.2021.reachMillion" />
)
}}
/>
</div> </div>
</div> </div>
<div className="stats"> <div className="stat-block">
<p className="bold"> <div className="stat-num">
<FormattedMessage id="annualReport.2021.connectivityIndiaProjects" /> <FormattedMessage id="annualReport.2021.SECPartnerNumber" />
</p> </div>
<h2> <div className="stat-label">
<FormattedMessage id="annualReport.2021.connectivityIndiaProjectsPercent" /> <FormattedMessage id="annualReport.2021.SECPartnerLabel" />
</h2>
<p className="bold">
<FormattedMessage id="annualReport.2021.connectivityIndiaYear" />
</p>
<div className="bubble inverted">
<FormattedMessage
id="annualReport.2021.connectivityIndiaProjectsOld"
/>
<img
src="/images/annual-report/2021/Symbols-UI/Arrow_Next_purple.svg"
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altArrowNext'}
)}
/>
<FormattedMessage
id="annualReport.2021.connectivityIndiaProjectsNew"
values={{
million: (
<FormattedMessage id="annualReport.2021.reachMillion" />
)
}}
/>
</div> </div>
</div> </div>
</div> </div>
<div className="world">
<div className="spotlight bubble connectivity">
<FormattedMessage id="annualReport.2021.spotlightStory" />
</div>
<h2>
<FormattedMessage id="annualReport.2021.connectivityWorld" />
</h2>
<span className="subtitle bold">
<FormattedMessage id="annualReport.2021.connectivityWorldSubtitle" />
</span>
</div>
</div> </div>
<div className="video-container connectivity"> <div className="world">
<div className="video-background connectivity"> <div className="spotlight bubble SEC">
<FormattedMessage id="annualReport.2021.spotlightStory" />
</div>
<h2>
<FormattedMessage id="annualReport.2021.SECWorld" />
</h2>
<span className="subtitle bold">
<FormattedMessage id="annualReport.2021.SECWorldSubtitle" />
</span>
</div>
{/* </div> */}
<div className="video-container SEC">
<div className="video-background SEC">
<MediaQuery minWidth={frameless.tabletPortrait}> <MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview <VideoPreview
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
} }
thumbnail="/images/annual-report/2021/connectivity/aroundtheworld_videothumb.png" thumbnail="/images/annual-report/2021/SEC/aroundtheworld_videothumb.png"
videoId="rlsjbx0st4" videoId="rlsjbx0st4"
thumbnailWidth="580" thumbnailWidth="580"
videoHeight={580 * .568} videoHeight={580 * .568}
videoWidth="580" videoWidth="580"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
{id: 'annualReport.2021.altConnectivityVideoPreview'} {id: 'annualReport.2021.altSECVideoPreview'}
) )
} }
/> />
@ -981,14 +792,14 @@ class AnnualReport extends React.Component {
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
} }
thumbnail="/images/annual-report/2021/connectivity/aroundtheworld_videothumb.png" thumbnail="/images/annual-report/2021/SEC/aroundtheworld_videothumb.png"
videoId="rlsjbx0st4" videoId="rlsjbx0st4"
thumbnailWidth="400" thumbnailWidth="400"
videoHeight={400 * .568} videoHeight={400 * .568}
videoWidth="400" videoWidth="400"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
{id: 'annualReport.2021.altConnectivityVideoPreview'} {id: 'annualReport.2021.altSECVideoPreview'}
) )
} }
/> />
@ -998,14 +809,14 @@ class AnnualReport extends React.Component {
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
} }
thumbnail="/images/annual-report/2021/connectivity/aroundtheworld_videothumb.png" thumbnail="/images/annual-report/2021/SEC/aroundtheworld_videothumb.png"
videoId="rlsjbx0st4" videoId="rlsjbx0st4"
thumbnailWidth="300" thumbnailWidth="300"
videoHeight={300 * .568} videoHeight={300 * .568}
videoWidth="300" videoWidth="300"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
{id: 'annualReport.2021.altConnectivityVideoPreview'} {id: 'annualReport.2021.altSECVideoPreview'}
) )
} }
/> />
@ -1015,13 +826,13 @@ class AnnualReport extends React.Component {
<div className="inner"> <div className="inner">
<div className="flex-content"> <div className="flex-content">
<CountryBlurb <CountryBlurb
icon="/images/annual-report/2021/connectivity/Scratch Around the World/Scratch Al Sur logo.png" icon="/images/annual-report/2021/SEC/Scratch Around the World/Scratch Al Sur logo.png"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryChileTitle'} {id: 'annualReport.2021.SECCountryChileTitle'}
)} )}
listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg" listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage( country={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryChile'} {id: 'annualReport.2021.SECCountryChile'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altChile'} {id: 'annualReport.2021.altChile'}
@ -1029,21 +840,21 @@ class AnnualReport extends React.Component {
iconAlt={this.props.intl.formatMessage( iconAlt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altChileIcon'} {id: 'annualReport.2021.altChileIcon'}
)} )}
largeImage="/images/annual-report/2021/connectivity/Scratch Around the World/Scratch Al Sur graphic.svg" largeImage="/images/annual-report/2021/SEC/Scratch Around the World/Scratch Al Sur graphic.svg"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.connectivityCountryChileParagraph" id="annualReport.2021.SECCountryChileParagraph"
/> />
</CountryBlurb> </CountryBlurb>
<CountryBlurb <CountryBlurb
className="reverse" className="reverse"
icon="/images/annual-report/2021/connectivity/Scratch Around the World/Brazil-Creative-Learning-Network-logo.png" icon="/images/annual-report/2021/SEC/Scratch Around the World/Brazil-Creative-Learning-Network-logo.png"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryBrazilTitle'} {id: 'annualReport.2021.SECCountryBrazilTitle'}
)} )}
listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg" listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage( country={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryBrazil'} {id: 'annualReport.2021.SECCountryBrazil'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altBrazil'} {id: 'annualReport.2021.altBrazil'}
@ -1051,20 +862,20 @@ class AnnualReport extends React.Component {
iconAlt={this.props.intl.formatMessage( iconAlt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altBrazilIcon'} {id: 'annualReport.2021.altBrazilIcon'}
)} )}
largeImage="/images/annual-report/2021/connectivity/Scratch Around the World/Brazil Creative Learning Network graphic.svg" largeImage="/images/annual-report/2021/SEC/Scratch Around the World/Brazil Creative Learning Network graphic.svg"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.connectivityCountryBrazilParagraph" id="annualReport.2021.SECCountryBrazilParagraph"
/> />
</CountryBlurb> </CountryBlurb>
<CountryBlurb <CountryBlurb
icon="/images/annual-report/2021/connectivity/Scratch Around the World/Quest Alliance logo.png" icon="/images/annual-report/2021/SEC/Scratch Around the World/Quest Alliance logo.png"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryIndiaTitle'} {id: 'annualReport.2021.SECCountryIndiaTitle'}
)} )}
listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg" listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage( country={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryIndia'} {id: 'annualReport.2021.SECCountryIndia'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altIndia'} {id: 'annualReport.2021.altIndia'}
@ -1072,10 +883,10 @@ class AnnualReport extends React.Component {
iconAlt={this.props.intl.formatMessage( iconAlt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altIndiaIcon'} {id: 'annualReport.2021.altIndiaIcon'}
)} )}
largeImage="/images/annual-report/2021/connectivity/Scratch Around the World/Quest Alliance graphic.svg" largeImage="/images/annual-report/2021/SEC/Scratch Around the World/Quest Alliance graphic.svg"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.connectivityCountryIndiaParagraph" id="annualReport.2021.SECCountryIndiaParagraph"
values={{ values={{
QuestAllianceLink: ( QuestAllianceLink: (
<a href="https://www.facebook.com/118389481508616/videos/818137148590473"> <a href="https://www.facebook.com/118389481508616/videos/818137148590473">
@ -1087,13 +898,13 @@ class AnnualReport extends React.Component {
</CountryBlurb> </CountryBlurb>
<CountryBlurb <CountryBlurb
className="reverse" className="reverse"
icon="/images/annual-report/2021/connectivity/Scratch Around the World/Raspberry-Pi-logo.png" icon="/images/annual-report/2021/SEC/Scratch Around the World/Raspberry-Pi-logo.png"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryUSATitle'} {id: 'annualReport.2021.SECCountryUSATitle'}
)} )}
listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg" listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage( country={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryUSA'} {id: 'annualReport.2021.SECCountryUSA'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altUSA'} {id: 'annualReport.2021.altUSA'}
@ -1101,10 +912,10 @@ class AnnualReport extends React.Component {
iconAlt={this.props.intl.formatMessage( iconAlt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altUSAIcon'} {id: 'annualReport.2021.altUSAIcon'}
)} )}
largeImage="/images/annual-report/2021/connectivity/Scratch Around the World/Raspberry Pi graphic.svg" largeImage="/images/annual-report/2021/SEC/Scratch Around the World/Raspberry Pi graphic.svg"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.connectivityCountryUSAParagraph" id="annualReport.2021.SECCountryUSAParagraph"
values={{ values={{
USALink: ( USALink: (
<a href="https://www.youtube.com/watch?v=kR1o69koAgc"> <a href="https://www.youtube.com/watch?v=kR1o69koAgc">
@ -1117,47 +928,47 @@ class AnnualReport extends React.Component {
</div> </div>
<div className="resources"> <div className="resources">
<h2> <h2>
<FormattedMessage id="annualReport.2021.connectivityResources" /> <FormattedMessage id="annualReport.2021.SECResources" />
</h2> </h2>
<h4> <h4>
<FormattedMessage id="annualReport.2021.connectivityResourcesSubtitle" /> <FormattedMessage id="annualReport.2021.SECResourcesSubtitle" />
</h4> </h4>
<p> <p>
<FormattedMessage id="annualReport.2021.connectivityResourcesParagraph" /> <FormattedMessage id="annualReport.2021.SECResourcesParagraph" />
</p> </p>
</div> </div>
<div className="flex-content"> <div className="flex-content">
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular top" /* Text should be left when side by side, and on top when top and bottom */ className="regular top" /* Text should be left when side by side, and on top when top and bottom */
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityExample1Title'} {id: 'annualReport.2021.SECExample1Title'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altTutorial'} {id: 'annualReport.2021.altTutorial'}
)} )}
type="image" type="image"
largeImage="/images/annual-report/2021/connectivity/TutorialUI.svg" largeImage="/images/annual-report/2021/SEC/TutorialUI.svg"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.connectivityExample1Paragraph" id="annualReport.2021.SECExample1Paragraph"
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.desktop}>
<TextAndMediaSnippet <TextAndMediaSnippet
className="reverse" className="reverse"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityExample2Title'} {id: 'annualReport.2021.SECExample2Title'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altGettingStarted'} {id: 'annualReport.2021.altGettingStarted'}
)} )}
type="video" type="video"
videoId="xfh9bvbeik" videoId="xfh9bvbeik"
largeImage="/images/annual-report/2021/connectivity/Getting Started with Scratch video.png" largeImage="/images/annual-report/2021/SEC/Getting Started with Scratch video.png"
spinnerColor="blue" spinnerColor="blue"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.connectivityExample2Paragraph" id="annualReport.2021.SECExample2Paragraph"
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</MediaQuery> </MediaQuery>
@ -1165,48 +976,48 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityExample2Title'} {id: 'annualReport.2021.SECExample2Title'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altGettingStarted'} {id: 'annualReport.2021.altGettingStarted'}
)} )}
type="video" type="video"
videoId="xfh9bvbeik" videoId="xfh9bvbeik"
largeImage="/images/annual-report/2021/connectivity/Getting Started with Scratch video.png" largeImage="/images/annual-report/2021/SEC/Getting Started with Scratch video.png"
spinnerColor="blue" spinnerColor="blue"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.connectivityExample2Paragraph" id="annualReport.2021.SECExample2Paragraph"
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</MediaQuery> </MediaQuery>
<TextAndMediaSnippet <TextAndMediaSnippet
className="full-width" className="full-width"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityExample3Title'} {id: 'annualReport.2021.SECExample3Title'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altEditor'} {id: 'annualReport.2021.altEditor'}
)} )}
type="image" type="image"
largeImage="/images/annual-report/2021/connectivity/isiXhosa_scratcheditor.png" largeImage="/images/annual-report/2021/SEC/isiXhosa_scratcheditor.png"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.connectivityExample3Paragraph" id="annualReport.2021.SECExample3Paragraph"
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="initiatives-adaptation"> <div className="initiatives-access">
<div className="initiatives-subsection-header adaptation"> <div className="initiatives-subsection-header access">
<div className="inner"> <div className="inner">
<h2> <h2>
<FormattedMessage id="annualReport.2021.adaptationTitle" /> <FormattedMessage id="annualReport.2021.accessTitle" />
</h2> </h2>
<p> <p>
<FormattedMessage id="annualReport.2021.adaptationIntro" /> <FormattedMessage id="annualReport.2021.accessIntro" />
</p> </p>
</div> </div>
</div> </div>
@ -1215,20 +1026,20 @@ class AnnualReport extends React.Component {
<div className="quote-person"> <div className="quote-person">
<Avatar <Avatar
alt={this.props.intl.formatMessage({id: 'annualReport.2021.altBenedict'})} alt={this.props.intl.formatMessage({id: 'annualReport.2021.altBenedict'})}
src="/images/annual-report/2021/adaptation/quote_benedikthochwartner.svg" src="/images/annual-report/2021/access/quote_benedikthochwartner.svg"
/> />
<div> <div>
<h5> <h5>
<FormattedMessage id="annualReport.2021.adaptationQuoteName" /> <FormattedMessage id="annualReport.2021.accessQuoteName" />
</h5> </h5>
<p> <p>
<FormattedMessage id="annualReport.2021.adaptationQuoteTitle" /> <FormattedMessage id="annualReport.2021.accessQuoteTitle" />
</p> </p>
</div> </div>
</div> </div>
<Comment <Comment
comment={this.props.intl.formatMessage( comment={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationQuoteText'} {id: 'annualReport.2021.accessQuoteText'}
)} )}
/> />
</div> </div>
@ -1236,24 +1047,24 @@ class AnnualReport extends React.Component {
<div className="initiatives-subsection-content"> <div className="initiatives-subsection-content">
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<div className="inner"> <div className="inner">
<div className="spotlight bubble adaptation"> <div className="spotlight bubble access">
<FormattedMessage id="annualReport.2021.spotlightStory" /> <FormattedMessage id="annualReport.2021.spotlightStory" />
</div> </div>
<div className="content flex-content aaron"> <div className="content flex-content aaron">
<div className="text"> <div className="text">
<h2> <h2>
<FormattedMessage id="annualReport.2021.adaptationHighlightName" /> <FormattedMessage id="annualReport.2021.accessHighlightName" />
</h2> </h2>
<p className="larger"> <p className="larger">
<FormattedMessage id="annualReport.2021.adaptationHighlightTitle" /> <FormattedMessage id="annualReport.2021.accessHighlightTitle" />
</p> </p>
<p> <p>
<FormattedMessage id="annualReport.2021.adaptationHighlightText" /> <FormattedMessage id="annualReport.2021.accessHighlightText" />
</p> </p>
</div> </div>
<div className="images"> <div className="images">
<img <img
src="/images/annual-report/2021/adaptation/Aaron Reuland Illustration_Photo.svg" src="/images/annual-report/2021/access/Aaron Reuland Illustration_Photo.svg"
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altAaronReuland'} {id: 'annualReport.2021.altAaronReuland'}
)} )}
@ -1310,15 +1121,15 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
<div className="world"> <div className="world">
<div className="spotlight bubble adaptation"> <div className="spotlight bubble access">
<FormattedMessage id="annualReport.2021.spotlightStory" /> <FormattedMessage id="annualReport.2021.spotlightStory" />
</div> </div>
<h2> <h2>
<FormattedMessage id="annualReport.2021.adaptationHighlightTitle2" /> <FormattedMessage id="annualReport.2021.accessHighlightTitle2" />
</h2> </h2>
<p> <p>
<FormattedMessage <FormattedMessage
id="annualReport.2021.adaptationHighlightText2b" id="annualReport.2021.accessHighlightText2b"
values={{ values={{
linkText: ( linkText: (
<a href="https://sip.scratch.mit.edu/scratchathome/"> <a href="https://sip.scratch.mit.edu/scratchathome/">
@ -1331,11 +1142,11 @@ class AnnualReport extends React.Component {
</div> </div>
<div className="world"> <div className="world">
<h4> <h4>
<FormattedMessage id="annualReport.2021.adaptationHighlightTitle3" /> <FormattedMessage id="annualReport.2021.accessHighlightTitle3" />
</h4> </h4>
<p> <p>
<FormattedMessage <FormattedMessage
id="annualReport.2021.adaptationHighlightText3b" id="annualReport.2021.accessHighlightText3b"
values={{ values={{
linkText: ( linkText: (
<a href="https://www.youtube.com/playlist?list=PLpfxVARjkP-953-E52NskKvbCBXEgHkwr"> <a href="https://www.youtube.com/playlist?list=PLpfxVARjkP-953-E52NskKvbCBXEgHkwr">
@ -1347,21 +1158,21 @@ class AnnualReport extends React.Component {
</p> </p>
</div> </div>
</div> </div>
<div className="video-container themes adaptation"> <div className="video-container themes access">
<div className="video-background adaptation"> <div className="video-background access">
<MediaQuery minWidth={frameless.tabletPortrait}> <MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview <VideoPreview
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
} }
thumbnail="/images/annual-report/2021/adaptation/createalongs_videothumb.png" thumbnail="/images/annual-report/2021/access/createalongs_videothumb.png"
videoId="uzfapi7t03" videoId="uzfapi7t03"
thumbnailWidth="580" thumbnailWidth="580"
videoHeight={580 * .568} videoHeight={580 * .568}
videoWidth="580" videoWidth="580"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
{id: 'annualReport.2021.altAdaptationVideoPreview'} {id: 'annualReport.2021.altaccessVideoPreview'}
) )
} }
/> />
@ -1374,14 +1185,14 @@ class AnnualReport extends React.Component {
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
} }
thumbnail="/images/annual-report/2021/adaptation/createalongs_videothumb.png" thumbnail="/images/annual-report/2021/access/createalongs_videothumb.png"
videoId="uzfapi7t03" videoId="uzfapi7t03"
thumbnailWidth="400" thumbnailWidth="400"
videoHeight={400 * .568} videoHeight={400 * .568}
videoWidth="400" videoWidth="400"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
{id: 'annualReport.2021.altAdaptationVideoPreview'} {id: 'annualReport.2021.altaccessVideoPreview'}
) )
} }
/> />
@ -1391,14 +1202,14 @@ class AnnualReport extends React.Component {
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
} }
thumbnail="/images/annual-report/2021/adaptation/createalongs_videothumb.png" thumbnail="/images/annual-report/2021/access/createalongs_videothumb.png"
videoId="uzfapi7t03" videoId="uzfapi7t03"
thumbnailWidth="300" thumbnailWidth="300"
videoHeight={300 * .568} videoHeight={300 * .568}
videoWidth="300" videoWidth="300"
alt={ alt={
this.props.intl.formatMessage( this.props.intl.formatMessage(
{id: 'annualReport.2021.altAdaptationVideoPreview'} {id: 'annualReport.2021.altaccessVideoPreview'}
) )
} }
/> />
@ -1411,16 +1222,16 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet <TextAndMediaSnippet
className="reverse" className="reverse"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationHighlightTitle4'} {id: 'annualReport.2021.accessHighlightTitle4'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altHackYourWindow'} {id: 'annualReport.2021.altHackYourWindow'}
)} )}
type="image" type="image"
largeImage="/images/annual-report/2021/adaptation/hackyourwindow_gif.gif" largeImage="/images/annual-report/2021/access/hackyourwindow_gif.gif"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.adaptationHighlightText4b" id="annualReport.2021.accessHighlightText4b"
values={{ values={{
linkText: ( linkText: (
<a href="https://scratch.mit.edu/studios/25970382"> <a href="https://scratch.mit.edu/studios/25970382">
@ -1435,16 +1246,16 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular" className="regular"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationHighlightTitle4'} {id: 'annualReport.2021.accessHighlightTitle4'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altHackYourWindow'} {id: 'annualReport.2021.altHackYourWindow'}
)} )}
type="image" type="image"
largeImage="/images/annual-report/2021/adaptation/hackyourwindow_gif.gif" largeImage="/images/annual-report/2021/access/hackyourwindow_gif.gif"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.adaptationHighlightText4b" id="annualReport.2021.accessHighlightText4b"
values={{ values={{
linkText: ( linkText: (
<a href="https://scratch.mit.edu/studios/25970382"> <a href="https://scratch.mit.edu/studios/25970382">
@ -1457,8 +1268,8 @@ class AnnualReport extends React.Component {
</MediaQuery> </MediaQuery>
</div> </div>
<div className="connecting-educators"> <div className="connecting-educators">
<h4><FormattedMessage id="annualReport.2021.adaptationEducatorsTitle" /></h4> <h4><FormattedMessage id="annualReport.2021.accessEducatorsTitle" /></h4>
<p><FormattedMessage id="annualReport.2021.adaptationEducatorsText" /></p> <p><FormattedMessage id="annualReport.2021.accessEducatorsText" /></p>
</div> </div>
</div> </div>
<div className="tweet-container"> <div className="tweet-container">
@ -1473,22 +1284,22 @@ class AnnualReport extends React.Component {
</div> </div>
<div className="inner"> <div className="inner">
<div className="flex-content lg"> <div className="flex-content lg">
<div className="snapshot bubble adaptation bump"> <div className="snapshot bubble access bump">
<FormattedMessage id="annualReport.2021.adaptationSnapshot" /> <FormattedMessage id="annualReport.2021.accessSnapshot" />
</div> </div>
<TextAndMediaSnippet <TextAndMediaSnippet
className="reverse big-title" className="reverse big-title"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationSnapshot1Title'} {id: 'annualReport.2021.accessSnapshot1Title'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altScratchInteraction'} {id: 'annualReport.2021.altScratchInteraction'}
)} )}
type="image" type="image"
largeImage="/images/annual-report/2021/adaptation/Computer Clubhouse Illustration.svg" largeImage="/images/annual-report/2021/access/Computer Clubhouse Illustration.svg"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.adaptationSnapshot1Text" id="annualReport.2021.accessSnapshot1Text"
values={{ values={{
linkText: ( linkText: (
<a href="https://theclubhousenetwork.org/"> <a href="https://theclubhousenetwork.org/">
@ -1504,16 +1315,16 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet <TextAndMediaSnippet
className="regular big-title" className="regular big-title"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationSnapshot2Title'} {id: 'annualReport.2021.accessSnapshot2Title'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altImageBubbles'} {id: 'annualReport.2021.altImageBubbles'}
)} )}
type="image" type="image"
largeImage="/images/annual-report/2021/adaptation/BYIS Graphic.svg" largeImage="/images/annual-report/2021/access/BYIS Graphic.svg"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.adaptationSnapshot2Text" id="annualReport.2021.accessSnapshot2Text"
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</MediaQuery> </MediaQuery>
@ -1521,16 +1332,16 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet <TextAndMediaSnippet
className="reverse big-title" className="reverse big-title"
title={this.props.intl.formatMessage( title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationSnapshot2Title'} {id: 'annualReport.2021.accessSnapshot2Title'}
)} )}
alt={this.props.intl.formatMessage( alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altImageBubbles'} {id: 'annualReport.2021.altImageBubbles'}
)} )}
type="image" type="image"
largeImage="/images/annual-report/2021/adaptation/BYIS Graphic.svg" largeImage="/images/annual-report/2021/access/BYIS Graphic.svg"
> >
<FormattedMessage <FormattedMessage
id="annualReport.2021.adaptationSnapshot2Text" id="annualReport.2021.accessSnapshot2Text"
/> />
</TextAndMediaSnippet> </TextAndMediaSnippet>
</MediaQuery> </MediaQuery>
@ -2021,7 +1832,7 @@ class AnnualReport extends React.Component {
<div className="content two-wide split"> <div className="content two-wide split">
<div className="text"> <div className="text">
<div className="snapshot bubble community"> <div className="snapshot bubble community">
<FormattedMessage id="annualReport.2021.adaptationSnapshot" /> <FormattedMessage id="annualReport.2021.accessSnapshot" />
</div> </div>
<h4> <h4>
<FormattedMessage id="annualReport.2021.communitySnapshotTitle" /> <FormattedMessage id="annualReport.2021.communitySnapshotTitle" />

91
src/views/annual-report/2021/annual-report.scss
View file

@ -11,11 +11,11 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
$ui-purple-dark: hsla(260, 55%, 55%, 1); $ui-purple-dark: hsla(260, 55%, 55%, 1);
// $motion-blue-3 #3373CC // $motion-blue-3 #3373CC
.adaptation .button{ .access .button{
background-color: $annual-report-aqua; background-color: $annual-report-aqua;
} }
.connectivity .button{ .SEC .button{
background-color: $ui-purple-dark; background-color: $ui-purple-dark;
} }
@ -78,9 +78,9 @@ a, a:link, a:visited, a:active{
} }
@media #{$small} { @media #{$small} {
.inner { // .inner {
width: $cols4; // width: $cols4;
} // }
h1 { h1 {
font-size: 3.25rem; font-size: 3.25rem;
@ -692,7 +692,7 @@ a, a:link, a:visited, a:active{
} }
&.increase{ &.increase{
&.dark{ &.dark{
background-color: darken($annual-report-teal, 15%); // background-color: darken($annual-report-teal, 15%);
.million{ .million{
font-size: 1rem; font-size: 1rem;
margin: 0 3px; margin: 0 3px;
@ -739,14 +739,14 @@ a, a:link, a:visited, a:active{
} }
} }
&.connectivity{ &.SEC{
background-color: $ui-purple-dark; background-color: $ui-purple-dark;
} }
&.community{ &.community{
background-color: $motion-blue-3; background-color: $motion-blue-3;
} }
&.adaptation{ &.access{
background-color: $annual-report-aqua; background-color: $annual-report-aqua;
} }
} }
@ -842,7 +842,7 @@ img.comment-viz{
} }
.reach-scratch-jr { .reach-scratch-jr {
background-color: darken($annual-report-teal, 10%); background-color: $annual-report-aqua;
color: $ui-white; color: $ui-white;
padding: 100px 0; padding: 100px 0;
@ -921,9 +921,11 @@ img.comment-viz{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%; width: 100%;
background-image: url("/images/annual-report/2020/themes_blobs.svg"); background-image: url("/images/annual-report/2021/Emerging Themes.svg");
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 165px;
margin-bottom: 60px;
h4 { h4 {
color: $ui-white; color: $ui-white;
@ -1056,19 +1058,19 @@ img.comment-viz{
padding: 92px 0; padding: 92px 0;
&.connectivity { &.SEC {
background-color: $ui-purple-dark; background-color: $motion-blue-3;
background-position: 50% 100%; background-position: 50% 100%;
} }
&.adaptation { &.access {
background-color: $ui-aqua-dark; background-color: $ui-aqua-dark;
background-position: 50% 0%; background-position: 50% 0%;
margin: 70px 0; margin: 70px 0;
} }
&.community { &.community {
background-color: $motion-blue-3; background-color: $ui-purple-dark;
background-position: 50% 50%; background-position: 50% 50%;
} }
@ -1154,13 +1156,6 @@ img.comment-viz{
} }
} }
} }
.india-numbers{
max-width: 300px;
text-align: center;
.bubble{
margin-left: auto;
}
}
.users-text{ .users-text{
max-width: 400px; max-width: 400px;
@ -1187,6 +1182,46 @@ img.comment-viz{
line-height: 2rem; line-height: 2rem;
} }
} }
&.two-up{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
max-width: 790px;
margin: 150px auto 50px;
align-items:flex-start;
overflow: hidden;
.p-content{
// flex-grow: 1;
width: 67%;
max-width: 550px;
text-align: left;
padding: 0 15px;
@media #{$small}{
width: 100%;
}
}
.stats{
width: 100%;
max-width: 170px;
// display: flex;
@media #{$small}{
max-width: 100%;
}
.stat-block{
display: inline-block;
text-align: center;
font-weight: 500;
margin-bottom: 50px;
.stat-num{
font-size: 70px;
}
.stat-label{
font-size: 25px;
}
}
}
}
} }
.bubble{ .bubble{
margin-left: 0px; margin-left: 0px;
@ -1283,7 +1318,7 @@ img.comment-viz{
} }
@media #{$medium} { @media #{$medium} {
max-width: 460px; max-width: 540px;
} }
@media #{$small} { @media #{$small} {
@ -1461,7 +1496,7 @@ img.comment-viz{
} }
} }
.initiatives-adaptation, .initiatives-community { .initiatives-access, .initiatives-community {
.world{ .world{
max-width: 600px; max-width: 600px;
margin: 50px auto; margin: 50px auto;
@ -1790,12 +1825,12 @@ img.comment-viz{
height: 300px; height: 300px;
} }
&.adaptation { &.access {
background-image: url("/images/annual-report/2020/adaptation/createalongs_splash.svg"); background-image: url("/images/annual-report/2020/access/createalongs_splash.svg");
} }
&.connectivity { &.SEC {
background-image: url("/images/annual-report/2020/connectivity/aroundtheworld_splash.svg"); background-image: url("/images/annual-report/2020/SEC/aroundtheworld_splash.svg");
} }
} }
@ -1811,7 +1846,7 @@ img.comment-viz{
} }
.tweet-container{ .tweet-container{
background-image: url("/images/annual-report/2020/adaptation/tweet-bg.svg"); background-image: url("/images/annual-report/2020/access/tweet-bg.svg");
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat:no-repeat; background-repeat:no-repeat;

134
src/views/annual-report/2021/l10n.json
View file

@ -66,98 +66,90 @@
"annualReport.2021.reachTranslationIncrease": "10 languages from 2020", "annualReport.2021.reachTranslationIncrease": "10 languages from 2020",
"annualReport.2021.reachTranslationBlurb": "Thanks to volunteer translators from around the world.", "annualReport.2021.reachTranslationBlurb": "Thanks to volunteer translators from around the world.",
"annualReport.2021.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.", "annualReport.2021.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.",
"annualReport.2021.reachDownloadsMillion": "3 {million}", "annualReport.2021.reachDownloadsMillion": "5 {million}",
"annualReport.2021.reachDownloads": "Downloads in 2021", "annualReport.2021.reachDownloads": "Downloads in 2021",
"annualReport.2021.reachDownloadsIncrease": "2 {million} from 2019", "annualReport.2021.reachDownloadsIncrease": "2 {million} from 2020",
"annualReport.2021.themesTitle": "Emerging Themes", "annualReport.2021.themesTitle": "Emerging Themes",
"annualReport.2021.themesDescription": "As young people faced the unprecedented challenges of COVID-19, Scratch became a more important place than ever for them to connect, create, and express themselves. Throughout the year, our work was focused on three areas to best support our growing global community: connectivity, adaptation, and community. As always, our efforts were grounded in our commitment to equity and inclusion.", "annualReport.2021.themesDescription": "Amidst ongoing uncertainty from COVID-19, Scratch continued to serve as a key space for young people to connect and create together. In 2021, we focused our efforts on building a strong foundation to equitably support our growing global community and our growing Scratch Team. Our work was centered around three major themes: fostering community, increasing access and accessibility, and developing the Scratch Education Collaborative (SEC).",
"annualReport.2021.equity": "Equity", "annualReport.2021.equity": "Equity",
"annualReport.2021.globalStrategy": "Global Strategy", "annualReport.2021.globalStrategy": "Global Strategy",
"annualReport.2021.connectivityTitle": "Connectivity", "annualReport.2021.SECTitle": "Scratch Education Collaborative",
"annualReport.2021.connectivityIntro": "While young people were isolated inside of their homes due to COVID-19, Scratch offered an opportunity for them to connect and create with faraway friends, classmates, and family members. It also served as a portal to the outside world, where they discovered that millions of kids across countries and continents were experiencing the same things they were.", "annualReport.2021.SECIntro": "Community voices and partnerships are deeply woven into the fabric of Scratch’s history. They have, and continue to be, integral in helping us increase accessible and equitable coding opportunities worldwide. In 2021, we launched the Scratch Education Collaborative, an initiative committed to identifying and eliminating the barriers to access to creative coding that connects remarkable organizations around the world.",
"annualReport.2021.aaronText": "Aaron’s students worked together to build a “kooky” version of their town called “Norwouldn’t,” packed with storybook creatures, original artwork, and interconnecting narratives. It was one of many collaborative Scratch projects Aaron facilitated to remind students that even while COVID-19 kept them inside their homes, they were still part of a caring and joyful community.", "annualReport.2021.SECWhatIs": "What is SEC?",
"annualReport.2021.spotlightStory": "Spotlight Story", "annualReport.2021.SECWhatIsP1": "The SEC supports and engages participating organizations in a two-year, collaborative cohort experience to strengthen their commitment to, and implementation of, equitable creative coding using Scratch and ScratchJr. By the end of the cohort experience, organizations will have formed new partnerships with each other and with Scratch, and will have established new models for equity-centered creative coding resources.",
"annualReport.2021.connectivityIndia": "Scratch in India", "annualReport.2021.SECWhatIsP2": "Our first cohort included 41 organizations representing 13 countries around the world, united by their commitment to supporting learners from historically marginalized communities in developing their confidence with creative computing.",
"annualReport.2021.connectivityIndiaIntro": "In India, the COVID-19 pandemic took an enormous toll and kept many young people and families isolated inside for long stretches.", "annualReport.2021.SECWhatIsP3": "Our work with the SEC is made possible thanks to a generous grant from Google.org. We’d like to extend our gratitude for their continued support of our mission.",
"annualReport.2021.connectivityIndiaParagraph": "Across the entire global Scratch community, we saw a huge spike in activity beginning in March 2021. Nowhere was this sudden spike more evident than in India, where the COVID-19 pandemic took an enormous toll and kept many young people and families isolated inside for long stretches of time. Through Scratch, kids in India found connection by creating and sharing 602% more projects than the year before.", "annualReport.2021.SECOrgNumber": "41",
"annualReport.2021.connectivityIndiaProjectsNumber": "2.3 {million}", "annualReport.2021.SECOrgLabel": "organizations",
"annualReport.2021.connectivityIndiaProjectsSubhead": "Projects Were Created Online in 2021", "annualReport.2021.SECCountryNumber": "13",
"annualReport.2021.connectivityIndiaProjectsIncreasePercent": "602% from 2019", "annualReport.2021.SECCountryLabel": "countries",
"annualReport.2021.connectivityRegistedUsers": "The number of all-time registered users in India more than doubled in one year, ", "annualReport.2021.SECPartnerNumber": "7",
"annualReport.2021.connectivityRegistedUsersNumbers": "rising from over 300,000 in 2019 to over 700,000 in 2021.", "annualReport.2021.SECPartnerLabel": "partners",
"annualReport.2021.connectivityIndiaUsers": "The number of unique visitors increased",
"annualReport.2021.connectivityIndiaUsersPercent": "156%",
"annualReport.2021.connectivityIndiaUsersOld": "1.8 {million}",
"annualReport.2021.connectivityIndiaUsersNew": "4.6 {million}",
"annualReport.2021.connectivityIndiaProjects": "The number of people creating projects increased",
"annualReport.2021.connectivityIndiaProjectsPercent": "270%",
"annualReport.2021.connectivityIndiaYear": "in 2021",
"annualReport.2021.connectivityIndiaProjectsOld": "303 thousand",
"annualReport.2021.connectivityIndiaProjectsNew": "1.1 {million}",
"annualReport.2021.connectivityWorld": "Scratch Around the World",
"annualReport.2021.connectivityWorldSubtitle": "International Collaborators",
"annualReport.2021.connectivityCountryChileTitle": "Scratch Al Sur", "annualReport.2021.SECWorld": "Scratch Around the World",
"annualReport.2021.connectivityCountryChile": "Chile", "annualReport.2021.SECWorldSubtitle": "International Collaborators",
"annualReport.2021.connectivityCountryChileParagraph": "Scratch Al Sur is dedicated to supporting computational and creative thinking among students and educators in Chile and across Latin America. They aided our translation and localization efforts in Rapa Nui and Spanish, and have engaged many educators in collaborative, playful Scratch professional development workshops.",
"annualReport.2021.connectivityCountryBrazilTitle": "Brazil Creative Learning Network", "annualReport.2021.SECCountryChileTitle": "Scratch Al Sur",
"annualReport.2021.connectivityCountryBrazil": "Brazil", "annualReport.2021.SECCountryChile": "Chile",
"annualReport.2021.connectivityCountryBrazilParagraph": "The Brazilian Creative Learning Network is a grassroots movement that implements playful, creative and relevant hands-on educational practices throughout Brazil. In 2021, the Scratch Team presented at the Brazilian Creative Learning Network’s Creative Learning Week event to share how kids were using Scratch to build community, express themselves, and speak out about what’s important to them. In turn, we learned how educators in the network were creating opportunities for self-expression with learners in their own communities.", "annualReport.2021.SECCountryChileParagraph": "Scratch Al Sur is dedicated to supporting computational and creative thinking among students and educators in Chile and across Latin America. They aided our translation and localization efforts in Rapa Nui and Spanish, and have engaged many educators in collaborative, playful Scratch professional development workshops.",
"annualReport.2021.connectivityCountryIndiaTitle": "Quest Alliance", "annualReport.2021.SECCountryBrazilTitle": "Brazil Creative Learning Network",
"annualReport.2021.connectivityCountryIndia": "India", "annualReport.2021.SECCountryBrazil": "Brazil",
"annualReport.2021.connectivityCountryIndiaParagraph": "Quest Alliance empowers millions of learners and educators with 21st century skills, including creative computing. In 2021, {QuestAllianceLink} shared Scratch with learners and educators across India.", "annualReport.2021.SECCountryBrazilParagraph": "The Brazilian Creative Learning Network is a grassroots movement that implements playful, creative and relevant hands-on educational practices throughout Brazil. In 2021, the Scratch Team presented at the Brazilian Creative Learning Network’s Creative Learning Week event to share how kids were using Scratch to build community, express themselves, and speak out about what’s important to them. In turn, we learned how educators in the network were creating opportunities for self-expression with learners in their own communities.",
"annualReport.2021.connectivityCountryUSATitle": "Raspberry Pi Foundation", "annualReport.2021.SECCountryIndiaTitle": "Quest Alliance",
"annualReport.2021.connectivityCountryUSA": "UK", "annualReport.2021.SECCountryIndia": "India",
"annualReport.2021.connectivityCountryUSAParagraph": "The Raspberry Pi Foundation works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even {USALink}!", "annualReport.2021.SECCountryIndiaParagraph": "Quest Alliance empowers millions of learners and educators with 21st century skills, including creative computing. In 2021, {QuestAllianceLink} shared Scratch with learners and educators across India.",
"annualReport.2021.connectivityResources": "Resources", "annualReport.2021.SECCountryUSATitle": "Raspberry Pi Foundation",
"annualReport.2021.connectivityResourcesSubtitle": "Localizing with Support from the LEGO Foundation", "annualReport.2021.SECCountryUSA": "UK",
"annualReport.2021.connectivityResourcesParagraph": "To support our growing global reach and aid our COVID-19 response, the LEGO Foundation supported Scratch with a generous grant. With this funding, we were able to localize key resources and reach even more young people around the world.", "annualReport.2021.SECCountryUSAParagraph": "The Raspberry Pi Foundation works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even {USALink}!",
"annualReport.2021.connectivityExample1Title": "Tutorial Images", "annualReport.2021.SECResources": "Resources",
"annualReport.2021.connectivityExample1Paragraph": "We created translations of the images for 25 Scratch tutorials in 12 languages—totalling over 1,000 new images!", "annualReport.2021.SECResourcesSubtitle": "Localizing with Support from the LEGO Foundation",
"annualReport.2021.SECResourcesParagraph": "To support our growing global reach and aid our COVID-19 response, the LEGO Foundation supported Scratch with a generous grant. With this funding, we were able to localize key resources and reach even more young people around the world.",
"annualReport.2021.connectivityExample2Title": "Getting Started with Scratch", "annualReport.2021.SECExample1Title": "Tutorial Images",
"annualReport.2021.connectivityExample2Paragraph": "The Getting Started with Scratch video is the most highly accessed and viewed Scratch tutorial video, greeting new Scratchers when they first join the site. We were able to translate this video into 25 new languages and to update the 3 previous translations, including visuals, voiceovers, and subtitles.", "annualReport.2021.SECExample1Paragraph": "We created translations of the images for 25 Scratch tutorials in 12 languages—totalling over 1,000 new images!",
"annualReport.2021.connectivityExample3Title": "Scratch Editor", "annualReport.2021.SECExample2Title": "Getting Started with Scratch",
"annualReport.2021.connectivityExample3Paragraph": "The Scratch project editor is the most essential Scratch resource. We worked with a South African translation company that specializes in culturally-relevant educational translation to translate and review the Scratch editor in five South African languages: isiZulu, isiXhosa, Afrikaans, Sestwana, and Sepedi.", "annualReport.2021.SECExample2Paragraph": "The Getting Started with Scratch video is the most highly accessed and viewed Scratch tutorial video, greeting new Scratchers when they first join the site. We were able to translate this video into 25 new languages and to update the 3 previous translations, including visuals, voiceovers, and subtitles.",
"annualReport.2021.adaptationTitle": "Adaptation", "annualReport.2021.SECExample3Title": "Scratch Editor",
"annualReport.2021.adaptationIntro": "As COVID-19 forced schools to close and pushed learning to virtual spaces, many students and teachers were discovering Scratch for the first time or adapting the way they taught and learned creative coding. From our own homes, the Scratch Team worked to support the changing needs of educators and the online community.", "annualReport.2021.SECExample3Paragraph": "The Scratch project editor is the most essential Scratch resource. We worked with a South African translation company that specializes in culturally-relevant educational translation to translate and review the Scratch editor in five South African languages: isiZulu, isiXhosa, Afrikaans, Sestwana, and Sepedi.",
"annualReport.2021.adaptationQuoteName": "Benedikt Hochwartner", "annualReport.2021.accessTitle": "Access",
"annualReport.2021.adaptationQuoteTitle": "Curator for Creative Learning, mumok, Vienna, Austria", "annualReport.2021.accessIntro": "As COVID-19 forced schools to close and pushed learning to virtual spaces, many students and teachers were discovering Scratch for the first time or adapting the way they taught and learned creative coding. From our own homes, the Scratch Team worked to support the changing needs of educators and the online community.",
"annualReport.2021.adaptationQuoteText": "In all the troubles over the past year, Scratch remained our platform of communication, our place to meet, and our medium of expressing ourselves creatively.",
"annualReport.2021.adaptationHighlightName": "Aaron Reuland", "annualReport.2021.accessQuoteName": "Benedikt Hochwartner",
"annualReport.2021.adaptationHighlightTitle": "K-5 Library Media Teacher, Norwood, MA", "annualReport.2021.accessQuoteTitle": "Curator for Creative Learning, mumok, Vienna, Austria",
"annualReport.2021.adaptationHighlightText": "In Aaron Reuland’s Title One school in Norwood, Massachusetts, he counted on Scratch to help engage remote students in creative learning and rekindle their sense of community “when the only things I could count on us all having were a working computer and an internet connection.”", "annualReport.2021.accessQuoteText": "In all the troubles over the past year, Scratch remained our platform of communication, our place to meet, and our medium of expressing ourselves creatively.",
"annualReport.2021.adaptationHighlightText2": "Aaron’s students worked together to build a “kooky” version of their town called “Norwouldn’t,” packed with storybook creatures, original artwork, and interconnecting narratives. It was one of many collaborative Scratch projects Aaron facilitated to remind students that even while COVID-19 kept them inside their homes, they were still part of a caring and joyful community.",
"annualReport.2021.adaptationHighlightTitle2": "Scratch at Home", "annualReport.2021.accessHighlightName": "Aaron Reuland",
"annualReport.2021.adaptationHighlightText2b": "On March 17, we responded to the COVID-19 crisis by launching the {linkText} to provide children, families, and educators with ideas for engaging in creative learning activities with Scratch at home. It was an invaluable way to connect with our community and adapt to a whole new way of learning and interacting online.", "annualReport.2021.accessHighlightTitle": "K-5 Library Media Teacher, Norwood, MA",
"annualReport.2021.accessHighlightText": "In Aaron Reuland’s Title One school in Norwood, Massachusetts, he counted on Scratch to help engage remote students in creative learning and rekindle their sense of community “when the only things I could count on us all having were a working computer and an internet connection.”",
"annualReport.2021.accessHighlightText2": "Aaron’s students worked together to build a “kooky” version of their town called “Norwouldn’t,” packed with storybook creatures, original artwork, and interconnecting narratives. It was one of many collaborative Scratch projects Aaron facilitated to remind students that even while COVID-19 kept them inside their homes, they were still part of a caring and joyful community.",
"annualReport.2021.adaptationHighlightTitle3": "Live Create-Alongs", "annualReport.2021.accessHighlightTitle2": "Scratch at Home",
"annualReport.2021.adaptationHighlightText3b": "Our team hosted weekly, live {linkText} to connect with kids, parents, and educators at home and share tips and tricks for creating different types of Scratch projects. We had a blast seeing the projects they were inspired to create in our Create-Along studios!", "annualReport.2021.accessHighlightText2b": "On March 17, we responded to the COVID-19 crisis by launching the {linkText} to provide children, families, and educators with ideas for engaging in creative learning activities with Scratch at home. It was an invaluable way to connect with our community and adapt to a whole new way of learning and interacting online.",
"annualReport.2021.adaptationHighlightTitle4": "Hack Your Window", "annualReport.2021.accessHighlightTitle3": "Live Create-Alongs",
"annualReport.2021.adaptationHighlightText4b": "Scratch educator Eduard Muntaner Perich created a #ScratchAtHome-inspired studio that took the community by storm: {linkText}. Hundreds of Scratchers from all over the world imagined fantastical games and stories happening just outside their window.", "annualReport.2021.accessHighlightText3b": "Our team hosted weekly, live {linkText} to connect with kids, parents, and educators at home and share tips and tricks for creating different types of Scratch projects. We had a blast seeing the projects they were inspired to create in our Create-Along studios!",
"annualReport.2021.adaptationEducatorsTitle": "Connecting with Educators", "annualReport.2021.accessHighlightTitle4": "Hack Your Window",
"annualReport.2021.adaptationEducatorsText": "Educators around the world shared their own #ScratchAtHome ideas and discussed the struggles and triumphs of teaching remotely in a lively Twitter Chat on April 8th, 2021.", "annualReport.2021.accessHighlightText4b": "Scratch educator Eduard Muntaner Perich created a #ScratchAtHome-inspired studio that took the community by storm: {linkText}. Hundreds of Scratchers from all over the world imagined fantastical games and stories happening just outside their window.",
"annualReport.2021.adaptationSnapshot": "Snapshots", "annualReport.2021.accessEducatorsTitle": "Connecting with Educators",
"annualReport.2021.accessEducatorsText": "Educators around the world shared their own #ScratchAtHome ideas and discussed the struggles and triumphs of teaching remotely in a lively Twitter Chat on April 8th, 2021.",
"annualReport.2021.adaptationSnapshot1Title": "Computer Clubhouse Network Virtual Workshops", "annualReport.2021.accessSnapshot": "Snapshots",
"annualReport.2021.adaptationSnapshot1Text": "As part of our longstanding partnership, the Scratch Team conducts workshops for youth educators from {linkText}. Like educators around the world, our team had to conduct online workshops for the first time in 2021—and learn how to combat the isolation and technical difficulties of virtual learning. But thanks to online collaboration tools and innovative methods of sharing and reflecting, the team was able to recreate the collaborative, playful spirit of in-person workshops in a virtual space.",
"annualReport.2021.adaptationSnapshot2Title": "Bring Yourself Into Scratch", "annualReport.2021.accessSnapshot1Title": "Computer Clubhouse Network Virtual Workshops",
"annualReport.2021.adaptationSnapshot2Text": "2021 was also a year of adapting our tools and platform. We developed and added new sprites to the Sprite Library to inspire and enable beginner Scratchers to make projects representative of their racial, cultural, gender, or other personal identity.", "annualReport.2021.accessSnapshot1Text": "As part of our longstanding partnership, the Scratch Team conducts workshops for youth educators from {linkText}. Like educators around the world, our team had to conduct online workshops for the first time in 2021—and learn how to combat the isolation and technical difficulties of virtual learning. But thanks to online collaboration tools and innovative methods of sharing and reflecting, the team was able to recreate the collaborative, playful spirit of in-person workshops in a virtual space.",
"annualReport.2021.accessSnapshot2Title": "Bring Yourself Into Scratch",
"annualReport.2021.accessSnapshot2Text": "2021 was also a year of adapting our tools and platform. We developed and added new sprites to the Sprite Library to inspire and enable beginner Scratchers to make projects representative of their racial, cultural, gender, or other personal identity.",
"annualReport.2021.communityTitle": "Community", "annualReport.2021.communityTitle": "Community",
"annualReport.2021.communityIntro": "In 2021, the Scratch Community became an even more vital place for young people to find a sense of togetherness and belonging. As we saw the meaningful conversations, collaborative projects, and moving stories Scratchers shared, we were in awe of their creative and resilient spirit.", "annualReport.2021.communityIntro": "In 2021, the Scratch Community became an even more vital place for young people to find a sense of togetherness and belonging. As we saw the meaningful conversations, collaborative projects, and moving stories Scratchers shared, we were in awe of their creative and resilient spirit.",
@ -357,8 +349,8 @@
"annualReport.2021.altScratchInteraction": "Two people talk amongst scratch components. One is handing a component to the other one.", "annualReport.2021.altScratchInteraction": "Two people talk amongst scratch components. One is handing a component to the other one.",
"annualReport.2021.altImageBubbles": "Images from Scratch projects appear in bubble shapes grouped together.", "annualReport.2021.altImageBubbles": "Images from Scratch projects appear in bubble shapes grouped together.",
"annualReport.2021.altConnectivityVideoPreview": "A play button appears over a scene of friendly sea creatures.", "annualReport.2021.altSECVideoPreview": "A play button appears over a scene of friendly sea creatures.",
"annualReport.2021.altAdaptationVideoPreview": "A play button apppears over various scenes from the Scratch user interface.", "annualReport.2021.altaccessVideoPreview": "A play button apppears over various scenes from the Scratch user interface.",
"annualReport.2021.altJanuaryCard": "Rey from Star Wars holds a staff and stands in the desert.", "annualReport.2021.altJanuaryCard": "Rey from Star Wars holds a staff and stands in the desert.",
"annualReport.2021.altAprilCard": "Multiple screenshots from the Scratch UI are placed together.", "annualReport.2021.altAprilCard": "Multiple screenshots from the Scratch UI are placed together.",

0
static/images/annual-report/2021/0_Data Section/Saudi Arabia Data Graphic.svg → static/images/annual-report/2021/0_Data Section/Saudi Arabia.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

BIN
static/images/annual-report/2021/Visual Assets Guide 2021.xlsx
View file

Binary file not shown.