scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -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 Page = require('../../../components/page/www/page.jsx');
const Grid = require('../../../components/grid/grid.jsx');
const Button = require('../../../components/forms/button.jsx');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const Comment = require('../../../components/comment/comment.jsx');
const CountryBlurb = require('./country-blurb/country-blurb.jsx');
const TextAndMediaSnippet = require('../../../components/text-and-media-snippet/text-and-media-snippet.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 PeopleGrid = require('../../../components/people-grid/people-grid.jsx');
const People = require('./people.json');
@ -55,15 +52,6 @@ const SECTION_NAMES = {
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,
// this will contain two columns of names either of equal size
// or with the left column containing 1 more item than the right
@ -573,7 +561,7 @@ class AnnualReport extends React.Component {
</div>
<img
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(
{id: 'annualReport.2021.altSaudiArabiaVisualization'}
)}
@ -582,76 +570,6 @@ class AnnualReport extends React.Component {
</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
className="reach-section t"
@ -768,12 +686,12 @@ class AnnualReport extends React.Component {
<div className="three-pillars">
<div className="pillar-splash">
<h4>
<FormattedMessage id="annualReport.2021.connectivityTitle" />
<FormattedMessage id="annualReport.2021.SECTitle" />
</h4>
</div>
<div className="pillar-splash">
<h4>
<FormattedMessage id="annualReport.2021.adaptationTitle" />
<FormattedMessage id="annualReport.2021.accessTitle" />
</h4>
</div>
<div className="pillar-splash">
@ -782,193 +700,86 @@ class AnnualReport extends React.Component {
</h4>
</div>
</div>
<div className="equity-and-global">
<div className="pillar-splash">
<h4>
<FormattedMessage id="annualReport.2021.equity" />
</h4>
</div>
</div>
</div>
</div>
</div>
<div className="initiatives-connectivity">
<div className="initiatives-subsection-header connectivity">
<div className="initiatives-SEC">
<div className="initiatives-subsection-header SEC">
<div className="inner">
<h2>
<FormattedMessage id="annualReport.2021.connectivityTitle" />
<FormattedMessage id="annualReport.2021.SECTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.2021.connectivityIntro" />
<FormattedMessage id="annualReport.2021.SECIntro" />
</p>
</div>
</div>
<div className="initiatives-subsection-content connectivity">
<div className="initiatives-subsection-content SEC">
{/* eslint-disable max-len */}
<div className="inner">
<div className="content">
<div className="text">
<div className="spotlight bubble connectivity india">
<FormattedMessage id="annualReport.2021.spotlightStory" />
</div>
<h2>
<FormattedMessage id="annualReport.2021.connectivityIndia" />
</h2>
<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 className="inner"> */}
<div className="content two-up">
<div className="p-content">
<h4>
<FormattedMessage id="annualReport.2021.SECWhatIs" />
</h4>
<p><FormattedMessage id="annualReport.2021.SECWhatIsP1" /></p>
<p><FormattedMessage id="annualReport.2021.SECWhatIsP2" /></p>
<p><FormattedMessage id="annualReport.2021.SECWhatIsP3" /></p>
</div>
<p className="about-breaker">
<FormattedMessage id="annualReport.2021.connectivityIndiaParagraph" />
</p>
<div className="content around">
<img
src="/images/annual-report/2021/connectivity/India_Data/data_projectscreatedonline_graphic.svg"
alt={this.props.intl.formatMessage(
{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 className="stats">
<div className="stat-block">
<div className="stat-num">
<FormattedMessage id="annualReport.2021.SECOrgNumber" />
</div>
<div className="stat-label">
<FormattedMessage id="annualReport.2021.SECOrgLabel" />
</div>
</div>
</div>
<div className="content around users">
<div className="users-text">
<p>
<span className="bold">
<FormattedMessage id="annualReport.2021.connectivityRegistedUsers" />
</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 className="stat-block">
<div className="stat-num">
<FormattedMessage id="annualReport.2021.SECCountryNumber" />
</div>
<div className="stat-label">
<FormattedMessage id="annualReport.2021.SECCountryLabel" />
</div>
</div>
<div className="stats">
<p className="bold">
<FormattedMessage id="annualReport.2021.connectivityIndiaProjects" />
</p>
<h2>
<FormattedMessage id="annualReport.2021.connectivityIndiaProjectsPercent" />
</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 className="stat-block">
<div className="stat-num">
<FormattedMessage id="annualReport.2021.SECPartnerNumber" />
</div>
<div className="stat-label">
<FormattedMessage id="annualReport.2021.SECPartnerLabel" />
</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 className="video-container connectivity">
<div className="video-background connectivity">
<div className="world">
<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}>
<VideoPreview
buttonMessage={
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"
thumbnailWidth="580"
videoHeight={580 * .568}
videoWidth="580"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altConnectivityVideoPreview'}
{id: 'annualReport.2021.altSECVideoPreview'}
)
}
/>
@ -981,14 +792,14 @@ class AnnualReport extends React.Component {
buttonMessage={
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"
thumbnailWidth="400"
videoHeight={400 * .568}
videoWidth="400"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altConnectivityVideoPreview'}
{id: 'annualReport.2021.altSECVideoPreview'}
)
}
/>
@ -998,14 +809,14 @@ class AnnualReport extends React.Component {
buttonMessage={
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"
thumbnailWidth="300"
videoHeight={300 * .568}
videoWidth="300"
alt={
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="flex-content">
<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(
{id: 'annualReport.2021.connectivityCountryChileTitle'}
{id: 'annualReport.2021.SECCountryChileTitle'}
)}
listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryChile'}
{id: 'annualReport.2021.SECCountryChile'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altChile'}
@ -1029,21 +840,21 @@ class AnnualReport extends React.Component {
iconAlt={this.props.intl.formatMessage(
{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
id="annualReport.2021.connectivityCountryChileParagraph"
id="annualReport.2021.SECCountryChileParagraph"
/>
</CountryBlurb>
<CountryBlurb
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(
{id: 'annualReport.2021.connectivityCountryBrazilTitle'}
{id: 'annualReport.2021.SECCountryBrazilTitle'}
)}
listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryBrazil'}
{id: 'annualReport.2021.SECCountryBrazil'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altBrazil'}
@ -1051,20 +862,20 @@ class AnnualReport extends React.Component {
iconAlt={this.props.intl.formatMessage(
{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
id="annualReport.2021.connectivityCountryBrazilParagraph"
id="annualReport.2021.SECCountryBrazilParagraph"
/>
</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(
{id: 'annualReport.2021.connectivityCountryIndiaTitle'}
{id: 'annualReport.2021.SECCountryIndiaTitle'}
)}
listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryIndia'}
{id: 'annualReport.2021.SECCountryIndia'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altIndia'}
@ -1072,10 +883,10 @@ class AnnualReport extends React.Component {
iconAlt={this.props.intl.formatMessage(
{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
id="annualReport.2021.connectivityCountryIndiaParagraph"
id="annualReport.2021.SECCountryIndiaParagraph"
values={{
QuestAllianceLink: (
<a href="https://www.facebook.com/118389481508616/videos/818137148590473">
@ -1087,13 +898,13 @@ class AnnualReport extends React.Component {
</CountryBlurb>
<CountryBlurb
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(
{id: 'annualReport.2021.connectivityCountryUSATitle'}
{id: 'annualReport.2021.SECCountryUSATitle'}
)}
listIcon="/images/annual-report/2021/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityCountryUSA'}
{id: 'annualReport.2021.SECCountryUSA'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altUSA'}
@ -1101,10 +912,10 @@ class AnnualReport extends React.Component {
iconAlt={this.props.intl.formatMessage(
{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
id="annualReport.2021.connectivityCountryUSAParagraph"
id="annualReport.2021.SECCountryUSAParagraph"
values={{
USALink: (
<a href="https://www.youtube.com/watch?v=kR1o69koAgc">
@ -1117,47 +928,47 @@ class AnnualReport extends React.Component {
</div>
<div className="resources">
<h2>
<FormattedMessage id="annualReport.2021.connectivityResources" />
<FormattedMessage id="annualReport.2021.SECResources" />
</h2>
<h4>
<FormattedMessage id="annualReport.2021.connectivityResourcesSubtitle" />
<FormattedMessage id="annualReport.2021.SECResourcesSubtitle" />
</h4>
<p>
<FormattedMessage id="annualReport.2021.connectivityResourcesParagraph" />
<FormattedMessage id="annualReport.2021.SECResourcesParagraph" />
</p>
</div>
<div className="flex-content">
<TextAndMediaSnippet
className="regular top" /* Text should be left when side by side, and on top when top and bottom */
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityExample1Title'}
{id: 'annualReport.2021.SECExample1Title'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altTutorial'}
)}
type="image"
largeImage="/images/annual-report/2021/connectivity/TutorialUI.svg"
largeImage="/images/annual-report/2021/SEC/TutorialUI.svg"
>
<FormattedMessage
id="annualReport.2021.connectivityExample1Paragraph"
id="annualReport.2021.SECExample1Paragraph"
/>
</TextAndMediaSnippet>
<MediaQuery minWidth={frameless.desktop}>
<TextAndMediaSnippet
className="reverse"
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityExample2Title'}
{id: 'annualReport.2021.SECExample2Title'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altGettingStarted'}
)}
type="video"
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"
>
<FormattedMessage
id="annualReport.2021.connectivityExample2Paragraph"
id="annualReport.2021.SECExample2Paragraph"
/>
</TextAndMediaSnippet>
</MediaQuery>
@ -1165,48 +976,48 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet
className="regular"
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityExample2Title'}
{id: 'annualReport.2021.SECExample2Title'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altGettingStarted'}
)}
type="video"
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"
>
<FormattedMessage
id="annualReport.2021.connectivityExample2Paragraph"
id="annualReport.2021.SECExample2Paragraph"
/>
</TextAndMediaSnippet>
</MediaQuery>
<TextAndMediaSnippet
className="full-width"
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.connectivityExample3Title'}
{id: 'annualReport.2021.SECExample3Title'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altEditor'}
)}
type="image"
largeImage="/images/annual-report/2021/connectivity/isiXhosa_scratcheditor.png"
largeImage="/images/annual-report/2021/SEC/isiXhosa_scratcheditor.png"
>
<FormattedMessage
id="annualReport.2021.connectivityExample3Paragraph"
id="annualReport.2021.SECExample3Paragraph"
/>
</TextAndMediaSnippet>
</div>
</div>
</div>
</div>
<div className="initiatives-adaptation">
<div className="initiatives-subsection-header adaptation">
<div className="initiatives-access">
<div className="initiatives-subsection-header access">
<div className="inner">
<h2>
<FormattedMessage id="annualReport.2021.adaptationTitle" />
<FormattedMessage id="annualReport.2021.accessTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.2021.adaptationIntro" />
<FormattedMessage id="annualReport.2021.accessIntro" />
</p>
</div>
</div>
@ -1215,20 +1026,20 @@ class AnnualReport extends React.Component {
<div className="quote-person">
<Avatar
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>
<h5>
<FormattedMessage id="annualReport.2021.adaptationQuoteName" />
<FormattedMessage id="annualReport.2021.accessQuoteName" />
</h5>
<p>
<FormattedMessage id="annualReport.2021.adaptationQuoteTitle" />
<FormattedMessage id="annualReport.2021.accessQuoteTitle" />
</p>
</div>
</div>
<Comment
comment={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationQuoteText'}
{id: 'annualReport.2021.accessQuoteText'}
)}
/>
</div>
@ -1236,24 +1047,24 @@ class AnnualReport extends React.Component {
<div className="initiatives-subsection-content">
{/* eslint-disable max-len */}
<div className="inner">
<div className="spotlight bubble adaptation">
<div className="spotlight bubble access">
<FormattedMessage id="annualReport.2021.spotlightStory" />
</div>
<div className="content flex-content aaron">
<div className="text">
<h2>
<FormattedMessage id="annualReport.2021.adaptationHighlightName" />
<FormattedMessage id="annualReport.2021.accessHighlightName" />
</h2>
<p className="larger">
<FormattedMessage id="annualReport.2021.adaptationHighlightTitle" />
<FormattedMessage id="annualReport.2021.accessHighlightTitle" />
</p>
<p>
<FormattedMessage id="annualReport.2021.adaptationHighlightText" />
<FormattedMessage id="annualReport.2021.accessHighlightText" />
</p>
</div>
<div className="images">
<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(
{id: 'annualReport.2021.altAaronReuland'}
)}
@ -1310,15 +1121,15 @@ class AnnualReport extends React.Component {
</div>
</div>
<div className="world">
<div className="spotlight bubble adaptation">
<div className="spotlight bubble access">
<FormattedMessage id="annualReport.2021.spotlightStory" />
</div>
<h2>
<FormattedMessage id="annualReport.2021.adaptationHighlightTitle2" />
<FormattedMessage id="annualReport.2021.accessHighlightTitle2" />
</h2>
<p>
<FormattedMessage
id="annualReport.2021.adaptationHighlightText2b"
id="annualReport.2021.accessHighlightText2b"
values={{
linkText: (
<a href="https://sip.scratch.mit.edu/scratchathome/">
@ -1331,11 +1142,11 @@ class AnnualReport extends React.Component {
</div>
<div className="world">
<h4>
<FormattedMessage id="annualReport.2021.adaptationHighlightTitle3" />
<FormattedMessage id="annualReport.2021.accessHighlightTitle3" />
</h4>
<p>
<FormattedMessage
id="annualReport.2021.adaptationHighlightText3b"
id="annualReport.2021.accessHighlightText3b"
values={{
linkText: (
<a href="https://www.youtube.com/playlist?list=PLpfxVARjkP-953-E52NskKvbCBXEgHkwr">
@ -1347,21 +1158,21 @@ class AnnualReport extends React.Component {
</p>
</div>
</div>
<div className="video-container themes adaptation">
<div className="video-background adaptation">
<div className="video-container themes access">
<div className="video-background access">
<MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview
buttonMessage={
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"
thumbnailWidth="580"
videoHeight={580 * .568}
videoWidth="580"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altAdaptationVideoPreview'}
{id: 'annualReport.2021.altaccessVideoPreview'}
)
}
/>
@ -1374,14 +1185,14 @@ class AnnualReport extends React.Component {
buttonMessage={
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"
thumbnailWidth="400"
videoHeight={400 * .568}
videoWidth="400"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altAdaptationVideoPreview'}
{id: 'annualReport.2021.altaccessVideoPreview'}
)
}
/>
@ -1391,14 +1202,14 @@ class AnnualReport extends React.Component {
buttonMessage={
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"
thumbnailWidth="300"
videoHeight={300 * .568}
videoWidth="300"
alt={
this.props.intl.formatMessage(
{id: 'annualReport.2021.altAdaptationVideoPreview'}
{id: 'annualReport.2021.altaccessVideoPreview'}
)
}
/>
@ -1411,16 +1222,16 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet
className="reverse"
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationHighlightTitle4'}
{id: 'annualReport.2021.accessHighlightTitle4'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altHackYourWindow'}
)}
type="image"
largeImage="/images/annual-report/2021/adaptation/hackyourwindow_gif.gif"
largeImage="/images/annual-report/2021/access/hackyourwindow_gif.gif"
>
<FormattedMessage
id="annualReport.2021.adaptationHighlightText4b"
id="annualReport.2021.accessHighlightText4b"
values={{
linkText: (
<a href="https://scratch.mit.edu/studios/25970382">
@ -1435,16 +1246,16 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet
className="regular"
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationHighlightTitle4'}
{id: 'annualReport.2021.accessHighlightTitle4'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altHackYourWindow'}
)}
type="image"
largeImage="/images/annual-report/2021/adaptation/hackyourwindow_gif.gif"
largeImage="/images/annual-report/2021/access/hackyourwindow_gif.gif"
>
<FormattedMessage
id="annualReport.2021.adaptationHighlightText4b"
id="annualReport.2021.accessHighlightText4b"
values={{
linkText: (
<a href="https://scratch.mit.edu/studios/25970382">
@ -1457,8 +1268,8 @@ class AnnualReport extends React.Component {
</MediaQuery>
</div>
<div className="connecting-educators">
<h4><FormattedMessage id="annualReport.2021.adaptationEducatorsTitle" /></h4>
<p><FormattedMessage id="annualReport.2021.adaptationEducatorsText" /></p>
<h4><FormattedMessage id="annualReport.2021.accessEducatorsTitle" /></h4>
<p><FormattedMessage id="annualReport.2021.accessEducatorsText" /></p>
</div>
</div>
<div className="tweet-container">
@ -1473,22 +1284,22 @@ class AnnualReport extends React.Component {
</div>
<div className="inner">
<div className="flex-content lg">
<div className="snapshot bubble adaptation bump">
<FormattedMessage id="annualReport.2021.adaptationSnapshot" />
<div className="snapshot bubble access bump">
<FormattedMessage id="annualReport.2021.accessSnapshot" />
</div>
<TextAndMediaSnippet
className="reverse big-title"
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationSnapshot1Title'}
{id: 'annualReport.2021.accessSnapshot1Title'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altScratchInteraction'}
)}
type="image"
largeImage="/images/annual-report/2021/adaptation/Computer Clubhouse Illustration.svg"
largeImage="/images/annual-report/2021/access/Computer Clubhouse Illustration.svg"
>
<FormattedMessage
id="annualReport.2021.adaptationSnapshot1Text"
id="annualReport.2021.accessSnapshot1Text"
values={{
linkText: (
<a href="https://theclubhousenetwork.org/">
@ -1504,16 +1315,16 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet
className="regular big-title"
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationSnapshot2Title'}
{id: 'annualReport.2021.accessSnapshot2Title'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altImageBubbles'}
)}
type="image"
largeImage="/images/annual-report/2021/adaptation/BYIS Graphic.svg"
largeImage="/images/annual-report/2021/access/BYIS Graphic.svg"
>
<FormattedMessage
id="annualReport.2021.adaptationSnapshot2Text"
id="annualReport.2021.accessSnapshot2Text"
/>
</TextAndMediaSnippet>
</MediaQuery>
@ -1521,16 +1332,16 @@ class AnnualReport extends React.Component {
<TextAndMediaSnippet
className="reverse big-title"
title={this.props.intl.formatMessage(
{id: 'annualReport.2021.adaptationSnapshot2Title'}
{id: 'annualReport.2021.accessSnapshot2Title'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2021.altImageBubbles'}
)}
type="image"
largeImage="/images/annual-report/2021/adaptation/BYIS Graphic.svg"
largeImage="/images/annual-report/2021/access/BYIS Graphic.svg"
>
<FormattedMessage
id="annualReport.2021.adaptationSnapshot2Text"
id="annualReport.2021.accessSnapshot2Text"
/>
</TextAndMediaSnippet>
</MediaQuery>
@ -2021,7 +1832,7 @@ class AnnualReport extends React.Component {
<div className="content two-wide split">
<div className="text">
<div className="snapshot bubble community">
<FormattedMessage id="annualReport.2021.adaptationSnapshot" />
<FormattedMessage id="annualReport.2021.accessSnapshot" />
</div>
<h4>
<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);
// $motion-blue-3 #3373CC
.adaptation .button{
.access .button{
background-color: $annual-report-aqua;
}
.connectivity .button{
.SEC .button{
background-color: $ui-purple-dark;
}
@ -78,9 +78,9 @@ a, a:link, a:visited, a:active{
}
@media #{$small} {
.inner {
width: $cols4;
}
// .inner {
// width: $cols4;
// }
h1 {
font-size: 3.25rem;
@ -692,7 +692,7 @@ a, a:link, a:visited, a:active{
}
&.increase{
&.dark{
background-color: darken($annual-report-teal, 15%);
// background-color: darken($annual-report-teal, 15%);
.million{
font-size: 1rem;
margin: 0 3px;
@ -739,14 +739,14 @@ a, a:link, a:visited, a:active{
}
}
&.connectivity{
&.SEC{
background-color: $ui-purple-dark;
}
&.community{
background-color: $motion-blue-3;
}
&.adaptation{
&.access{
background-color: $annual-report-aqua;
}
}
@ -842,7 +842,7 @@ img.comment-viz{
}
.reach-scratch-jr {
background-color: darken($annual-report-teal, 10%);
background-color: $annual-report-aqua;
color: $ui-white;
padding: 100px 0;
@ -921,9 +921,11 @@ img.comment-viz{
flex-direction: column;
align-items: center;
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-repeat: no-repeat;
height: 165px;
margin-bottom: 60px;
h4 {
color: $ui-white;
@ -1056,19 +1058,19 @@ img.comment-viz{
padding: 92px 0;
&.connectivity {
background-color: $ui-purple-dark;
&.SEC {
background-color: $motion-blue-3;
background-position: 50% 100%;
}
&.adaptation {
&.access {
background-color: $ui-aqua-dark;
background-position: 50% 0%;
margin: 70px 0;
}
&.community {
background-color: $motion-blue-3;
background-color: $ui-purple-dark;
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{
max-width: 400px;
@ -1187,6 +1182,46 @@ img.comment-viz{
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{
margin-left: 0px;
@ -1283,7 +1318,7 @@ img.comment-viz{
}
@media #{$medium} {
max-width: 460px;
max-width: 540px;
}
@media #{$small} {
@ -1461,7 +1496,7 @@ img.comment-viz{
}
}
.initiatives-adaptation, .initiatives-community {
.initiatives-access, .initiatives-community {
.world{
max-width: 600px;
margin: 50px auto;
@ -1790,12 +1825,12 @@ img.comment-viz{
height: 300px;
}
&.adaptation {
background-image: url("/images/annual-report/2020/adaptation/createalongs_splash.svg");
&.access {
background-image: url("/images/annual-report/2020/access/createalongs_splash.svg");
}
&.connectivity {
background-image: url("/images/annual-report/2020/connectivity/aroundtheworld_splash.svg");
&.SEC {
background-image: url("/images/annual-report/2020/SEC/aroundtheworld_splash.svg");
}
}
@ -1811,7 +1846,7 @@ img.comment-viz{
}
.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-position: center;
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.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.reachDownloadsMillion": "3 {million}",
"annualReport.2021.reachDownloadsMillion": "5 {million}",
"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.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.globalStrategy": "Global Strategy",
"annualReport.2021.connectivityTitle": "Connectivity",
"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.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.spotlightStory": "Spotlight Story",
"annualReport.2021.connectivityIndia": "Scratch in India",
"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.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.connectivityIndiaProjectsNumber": "2.3 {million}",
"annualReport.2021.connectivityIndiaProjectsSubhead": "Projects Were Created Online in 2021",
"annualReport.2021.connectivityIndiaProjectsIncreasePercent": "602% from 2019",
"annualReport.2021.connectivityRegistedUsers": "The number of all-time registered users in India more than doubled in one year, ",
"annualReport.2021.connectivityRegistedUsersNumbers": "rising from over 300,000 in 2019 to over 700,000 in 2021.",
"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.SECTitle": "Scratch Education Collaborative",
"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.SECWhatIs": "What is SEC?",
"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.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.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.SECOrgNumber": "41",
"annualReport.2021.SECOrgLabel": "organizations",
"annualReport.2021.SECCountryNumber": "13",
"annualReport.2021.SECCountryLabel": "countries",
"annualReport.2021.SECPartnerNumber": "7",
"annualReport.2021.SECPartnerLabel": "partners",
"annualReport.2021.connectivityCountryChileTitle": "Scratch Al Sur",
"annualReport.2021.connectivityCountryChile": "Chile",
"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.SECWorld": "Scratch Around the World",
"annualReport.2021.SECWorldSubtitle": "International Collaborators",
"annualReport.2021.connectivityCountryBrazilTitle": "Brazil Creative Learning Network",
"annualReport.2021.connectivityCountryBrazil": "Brazil",
"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.SECCountryChileTitle": "Scratch Al Sur",
"annualReport.2021.SECCountryChile": "Chile",
"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.connectivityCountryIndia": "India",
"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.SECCountryBrazilTitle": "Brazil Creative Learning Network",
"annualReport.2021.SECCountryBrazil": "Brazil",
"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.connectivityCountryUSA": "UK",
"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.SECCountryIndiaTitle": "Quest Alliance",
"annualReport.2021.SECCountryIndia": "India",
"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.connectivityResourcesSubtitle": "Localizing with Support from the LEGO Foundation",
"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.SECCountryUSATitle": "Raspberry Pi Foundation",
"annualReport.2021.SECCountryUSA": "UK",
"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.connectivityExample1Paragraph": "We created translations of the images for 25 Scratch tutorials in 12 languages—totalling over 1,000 new images!",
"annualReport.2021.SECResources": "Resources",
"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.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.SECExample1Title": "Tutorial Images",
"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.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.SECExample2Title": "Getting Started with Scratch",
"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.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.SECExample3Title": "Scratch Editor",
"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.adaptationQuoteTitle": "Curator for Creative Learning, mumok, Vienna, Austria",
"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.accessTitle": "Access",
"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.adaptationHighlightName": "Aaron Reuland",
"annualReport.2021.adaptationHighlightTitle": "K-5 Library Media Teacher, Norwood, MA",
"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.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.accessQuoteName": "Benedikt Hochwartner",
"annualReport.2021.accessQuoteTitle": "Curator for Creative Learning, mumok, Vienna, Austria",
"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.adaptationHighlightTitle2": "Scratch at Home",
"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.accessHighlightName": "Aaron Reuland",
"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.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.accessHighlightTitle2": "Scratch at Home",
"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.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.accessHighlightTitle3": "Live Create-Alongs",
"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.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.accessHighlightTitle4": "Hack Your Window",
"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.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.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.accessSnapshot": "Snapshots",
"annualReport.2021.accessSnapshot1Title": "Computer Clubhouse Network Virtual Workshops",
"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.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.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.altAdaptationVideoPreview": "A play button apppears over various scenes from the Scratch user interface.",
"annualReport.2021.altSECVideoPreview": "A play button appears over a scene of friendly sea creatures.",
"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.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.