scratchfoundation/scratchjr
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratchjr.git synced 2024-11-29 02:25:39 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

blocks.html, interface.html, paint.html remaining scripts

Browse source 
Moved to app.js entry
This commit is contained in:
Tim Mickel 2016-02-02 16:38:31 -05:00
parent fdbf07b6d9
commit 7b28c13f84
4 changed files with 253 additions and 246 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

174
editions/free/src/inapp/blocks.html
View file

@ -14,366 +14,304 @@
<div class="learn-tab learn-blocks"> <div class="learn-tab learn-blocks">
<!-- Yellow Blocks --> <!-- Yellow Blocks -->
<div class="block-category-header" id="yellow-block-category-header"> <div class="block-category-header" id="yellow-block-category-header">
<script>document.write(Localization.localize("BLOCKS_TRIGGERING_BLOCKS"));</script>
</div> </div>
<div class="block-category-header-line" id="yellow-block-category-header-line"></div> <div class="block-category-header-line" id="yellow-block-category-header-line"></div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_GREEN_FLAG">
<script>document.write(Localization.localize("BLOCKS_GREEN_FLAG"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/onflag.png" /> <img class="block-image" src="images/onflag.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_GREEN_FLAG_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_GREEN_FLAG_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_ON_TAP">
<script>document.write(Localization.localize("BLOCKS_ON_TAP"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/ontap.png" /> <img class="block-image" src="images/ontap.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_ON_TAP_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_ON_TAP_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_ON_TOUCH">
<script>document.write(Localization.localize("BLOCKS_ON_TOUCH"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/onbump.png" /> <img class="block-image" src="images/onbump.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_ON_TOUCH_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_ON_TOUCH_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_ON_MESSAGE">
<script>document.write(Localization.localize("BLOCKS_ON_MESSAGE"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/messagereceive.png" /> <img class="block-image" src="images/messagereceive.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_ON_MESSAGE_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_ON_MESSAGE_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_SEND_MESSAGE">
<script>document.write(Localization.localize("BLOCKS_SEND_MESSAGE"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/messagesend.png" /> <img class="block-image" src="images/messagesend.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_SEND_MESSAGE_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_SEND_MESSAGE_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<!-- Blue Blocks --> <!-- Blue Blocks -->
<div class="block-category-header" id="blue-block-category-header"> <div class="block-category-header" id="blue-block-category-header">
<script>document.write(Localization.localize("BLOCKS_MOTION_BLOCKS"));</script>
</div> </div>
<div class="block-category-header-line" id="blue-block-category-header-line"></div> <div class="block-category-header-line" id="blue-block-category-header-line"></div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_MOVE_RIGHT">
<script>document.write(Localization.localize("BLOCKS_MOVE_RIGHT"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/right.png" /> <img class="block-image" src="images/right.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_MOVE_RIGHT_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_MOVE_RIGHT_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_MOVE_LEFT">
<script>document.write(Localization.localize("BLOCKS_MOVE_LEFT"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/left.png" /> <img class="block-image" src="images/left.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_MOVE_LEFT_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_MOVE_LEFT_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_MOVE_UP">
<script>document.write(Localization.localize("BLOCKS_MOVE_UP"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/up.png" /> <img class="block-image" src="images/up.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_MOVE_UP_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_MOVE_UP_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_MOVE_DOWN">
<script>document.write(Localization.localize("BLOCKS_MOVE_DOWN"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/down.png" /> <img class="block-image" src="images/down.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_MOVE_DOWN_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_MOVE_DOWN_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_TURN_RIGHT">
<script>document.write(Localization.localize("BLOCKS_TURN_RIGHT"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/turnright.png" /> <img class="block-image" src="images/turnright.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_TURN_RIGHT_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_TURN_RIGHT_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_TURN_LEFT">
<script>document.write(Localization.localize("BLOCKS_TURN_LEFT"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/turnleft.png" /> <img class="block-image" src="images/turnleft.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_TURN_LEFT_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_TURN_LEFT_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_HOP">
<script>document.write(Localization.localize("BLOCKS_HOP"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/hop.png" /> <img class="block-image" src="images/hop.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_HOP_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_HOP_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_GO_HOME">
<script>document.write(Localization.localize("BLOCKS_GO_HOME"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/gohome.png" /> <img class="block-image" src="images/gohome.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_GO_HOME_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_GO_HOME_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<!-- Purple Blocks --> <!-- Purple Blocks -->
<div class="block-category-header" id="purple-block-category-header"> <div class="block-category-header" id="purple-block-category-header">
<script>document.write(Localization.localize("BLOCKS_LOOKS_BLOCKS"));</script>
</div> </div>
<div class="block-category-header-line" id="purple-block-category-header-line"></div> <div class="block-category-header-line" id="purple-block-category-header-line"></div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_SAY">
<script>document.write(Localization.localize("BLOCKS_SAY"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/say.png" /> <img class="block-image" src="images/say.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_SAY_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_SAY_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_GROW">
<script>document.write(Localization.localize("BLOCKS_GROW"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/grow.png" /> <img class="block-image" src="images/grow.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_GROW_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_GROW_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_SHRINK">
<script>document.write(Localization.localize("BLOCKS_SHRINK"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/shrink.png" /> <img class="block-image" src="images/shrink.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_SHRINK_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_SHRINK_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_RESET_SIZE">
<script>document.write(Localization.localize("BLOCKS_RESET_SIZE"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/reset.png" /> <img class="block-image" src="images/reset.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_RESET_SIZE_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_RESET_SIZE_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_HIDE">
<script>document.write(Localization.localize("BLOCKS_HIDE"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/hide.png" /> <img class="block-image" src="images/hide.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_HIDE_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_HIDE_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_SHOW">
<script>document.write(Localization.localize("BLOCKS_SHOW"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/show.png" /> <img class="block-image" src="images/show.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_SHOW_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_SHOW_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-category-header" id="green-block-category-header"> <div class="block-category-header" id="green-block-category-header">
<script>document.write(Localization.localize("BLOCKS_SOUND_BLOCKS"));</script>
</div> </div>
<div class="block-category-header-line" id="green-block-category-header-line"></div> <div class="block-category-header-line" id="green-block-category-header-line"></div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_POP">
<script>document.write(Localization.localize("BLOCKS_POP"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/pop.png" /> <img class="block-image" src="images/pop.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_POP_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_POP_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_PLAY_RECORDED">
<script>document.write(Localization.localize("BLOCKS_PLAY_RECORDED"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/playsound.png" /> <img class="block-image" src="images/playsound.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_PLAY_RECORDED_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_PLAY_RECORDED_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-category-header" id="orange-block-category-header"> <div class="block-category-header" id="orange-block-category-header">
<script>document.write(Localization.localize("BLOCKS_CONTROL_BLOCKS"));</script>
</div> </div>
<div class="block-category-header-line" id="orange-block-category-header-line"></div> <div class="block-category-header-line" id="orange-block-category-header-line"></div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_WAIT">
<script>document.write(Localization.localize("BLOCKS_WAIT"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/wait.png" /> <img class="block-image" src="images/wait.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_WAIT_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_WAIT_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_STOP">
<script>document.write(Localization.localize("BLOCKS_STOP"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/stop.png" /> <img class="block-image" src="images/stop.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_STOP_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_STOP_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_SET_SPEED">
<script>document.write(Localization.localize("BLOCKS_SET_SPEED"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/speed.png" /> <img class="block-image" src="images/speed.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_SET_SPEED_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_SET_SPEED_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_REPEAT">
<script>document.write(Localization.localize("BLOCKS_REPEAT"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image-repeat" src="images/repeat.png" /> <img class="block-image-repeat" src="images/repeat.png" />
</div> </div>
<div class="block-description-repeat"> <div class="block-description-repeat" id="BLOCKS_REPEAT_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_REPEAT_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-category-header" id="red-block-category-header"> <div class="block-category-header" id="red-block-category-header">
<script>document.write(Localization.localize("BLOCKS_END_BLOCKS"));</script>
</div> </div>
<div class="block-category-header-line" id="red-block-category-header-line"></div> <div class="block-category-header-line" id="red-block-category-header-line"></div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_END">
<script>document.write(Localization.localize("BLOCKS_END"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/end.png" /> <img class="block-image" src="images/end.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_END_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_END_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div class="block-wrapper-right"> <div class="block-wrapper-right">
<div class="block-title"> <div class="block-title" id="BLOCKS_REPEAT_FOREVER">
<script>document.write(Localization.localize("BLOCKS_REPEAT_FOREVER"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/forever.png" /> <img class="block-image" src="images/forever.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_REPEAT_FOREVER_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_REPEAT_FOREVER_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
<div class="block-wrapper"> <div class="block-wrapper">
<div class="block-wrapper-left"> <div class="block-wrapper-left">
<div class="block-title"> <div class="block-title" id="BLOCKS_GO_TO_PAGE">
<script>document.write(Localization.localize("BLOCKS_GO_TO_PAGE"));</script>
</div> </div>
<div class="block-image-wrapper"> <div class="block-image-wrapper">
<img class="block-image" src="images/page.png" /> <img class="block-image" src="images/page.png" />
</div> </div>
<div class="block-description"> <div class="block-description" id="BLOCKS_GO_TO_PAGE_DESCRIPTION">
<script>document.write(Localization.localize("BLOCKS_GO_TO_PAGE_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>

82
editions/free/src/inapp/interface.html
View file

@ -15,13 +15,13 @@
<div class="learn-tab learn-tab-selected learn-interface"> <div class="learn-tab learn-tab-selected learn-interface">
<!-- 1. Save --> <!-- 1. Save -->
<div class="interface-button interface-button-selected" id="interface-button-save"> <div class="interface-button interface-button-selected" id="interface-button-save">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 1}));</script></div> <div class="interface-button-text">1</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-save"></div> <div class="interface-vertical-line" id="interface-vertical-line-save"></div>
<div class="interface-dot" id="interface-dot-save"></div> <div class="interface-dot" id="interface-dot-save"></div>
<!-- 2. Stage --> <!-- 2. Stage -->
<div class="interface-button" id="interface-button-stage"> <div class="interface-button" id="interface-button-stage">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 2}));</script></div> <div class="interface-button-text">2</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-stage-1"></div> <div class="interface-vertical-line" id="interface-vertical-line-stage-1"></div>
<div class="interface-horizontal-line" id="interface-horizontal-line-stage-1"></div> <div class="interface-horizontal-line" id="interface-horizontal-line-stage-1"></div>
@ -30,55 +30,55 @@
<div class="interface-horizontal-line" id="interface-horizontal-line-stage-3"></div> <div class="interface-horizontal-line" id="interface-horizontal-line-stage-3"></div>
<!-- 3. Presentation Mode --> <!-- 3. Presentation Mode -->
<div class="interface-button" id="interface-button-presentation-mode"> <div class="interface-button" id="interface-button-presentation-mode">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 3}));</script></div> <div class="interface-button-text">3</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-presentation-mode"></div> <div class="interface-vertical-line" id="interface-vertical-line-presentation-mode"></div>
<div class="interface-dot" id="interface-dot-presentation-mode"></div> <div class="interface-dot" id="interface-dot-presentation-mode"></div>
<!-- 4. Grid --> <!-- 4. Grid -->
<div class="interface-button" id="interface-button-grid"> <div class="interface-button" id="interface-button-grid">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 4}));</script></div> <div class="interface-button-text">4</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-grid"></div> <div class="interface-vertical-line" id="interface-vertical-line-grid"></div>
<div class="interface-dot" id="interface-dot-grid"></div> <div class="interface-dot" id="interface-dot-grid"></div>
<!-- 5. Change Background --> <!-- 5. Change Background -->
<div class="interface-button" id="interface-button-add-text"> <div class="interface-button" id="interface-button-add-text">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 5}));</script></div> <div class="interface-button-text">5</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-add-text"></div> <div class="interface-vertical-line" id="interface-vertical-line-add-text"></div>
<div class="interface-dot" id="interface-dot-add-text"></div> <div class="interface-dot" id="interface-dot-add-text"></div>
<!-- 6. Add Text --> <!-- 6. Add Text -->
<div class="interface-button" id="interface-button-change-background"> <div class="interface-button" id="interface-button-change-background">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 6}));</script></div> <div class="interface-button-text">6</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-change-background"></div> <div class="interface-vertical-line" id="interface-vertical-line-change-background"></div>
<div class="interface-dot" id="interface-dot-change-background"></div> <div class="interface-dot" id="interface-dot-change-background"></div>
<!-- 7. Reset Characters --> <!-- 7. Reset Characters -->
<div class="interface-button" id="interface-button-reset-characters"> <div class="interface-button" id="interface-button-reset-characters">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 7}));</script></div> <div class="interface-button-text">7</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-reset-characters"></div> <div class="interface-vertical-line" id="interface-vertical-line-reset-characters"></div>
<div class="interface-dot" id="interface-dot-reset-characters"></div> <div class="interface-dot" id="interface-dot-reset-characters"></div>
<!-- 8. Green Flag --> <!-- 8. Green Flag -->
<div class="interface-button" id="interface-button-green-flag"> <div class="interface-button" id="interface-button-green-flag">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 8}));</script></div> <div class="interface-button-text">8</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-green-flag"></div> <div class="interface-vertical-line" id="interface-vertical-line-green-flag"></div>
<div class="interface-dot" id="interface-dot-green-flag"></div> <div class="interface-dot" id="interface-dot-green-flag"></div>
<!-- 9. Pages --> <!-- 9. Pages -->
<div class="interface-button" id="interface-button-pages"> <div class="interface-button" id="interface-button-pages">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 9}));</script></div> <div class="interface-button-text">9</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-pages"></div> <div class="interface-vertical-line" id="interface-vertical-line-pages"></div>
<div class="interface-dot" id="interface-dot-pages"></div> <div class="interface-dot" id="interface-dot-pages"></div>
<!-- 10. Project Information --> <!-- 10. Project Information -->
<div class="interface-button" id="interface-button-project-information"> <div class="interface-button" id="interface-button-project-information">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 10}));</script></div> <div class="interface-button-text">10</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-project-information"></div> <div class="interface-vertical-line" id="interface-vertical-line-project-information"></div>
<div class="interface-dot" id="interface-dot-project-information"></div> <div class="interface-dot" id="interface-dot-project-information"></div>
<!-- 16. Characters --> <!-- 16. Characters -->
<div class="interface-button" id="interface-button-characters"> <div class="interface-button" id="interface-button-characters">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 16}));</script></div> <div class="interface-button-text">16</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-characters-1"></div> <div class="interface-vertical-line" id="interface-vertical-line-characters-1"></div>
<div class="interface-vertical-line" id="interface-vertical-line-characters-3"></div> <div class="interface-vertical-line" id="interface-vertical-line-characters-3"></div>
@ -86,7 +86,7 @@
<div class="interface-vertical-line" id="interface-vertical-line-characters-2"></div> <div class="interface-vertical-line" id="interface-vertical-line-characters-2"></div>
<!-- 15. Block Categories --> <!-- 15. Block Categories -->
<div class="interface-button" id="interface-button-block-categories"> <div class="interface-button" id="interface-button-block-categories">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 15}));</script></div> <div class="interface-button-text">15</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-block-categories-1"></div> <div class="interface-vertical-line" id="interface-vertical-line-block-categories-1"></div>
<div class="interface-horizontal-line" id="interface-horizontal-line-block-categories"></div> <div class="interface-horizontal-line" id="interface-horizontal-line-block-categories"></div>
@ -94,7 +94,7 @@
<div class="interface-vertical-line" id="interface-vertical-line-block-categories-3"></div> <div class="interface-vertical-line" id="interface-vertical-line-block-categories-3"></div>
<!-- 14. Blocks Palette --> <!-- 14. Blocks Palette -->
<div class="interface-button" id="interface-button-block-palette"> <div class="interface-button" id="interface-button-block-palette">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 14}));</script></div> <div class="interface-button-text">14</div>
</div> </div>
<div class="interface-horizontal-line" id="interface-horizontal-line-blocks-palette"></div> <div class="interface-horizontal-line" id="interface-horizontal-line-blocks-palette"></div>
<div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-1"></div> <div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-1"></div>
@ -102,13 +102,13 @@
<div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-3"></div> <div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-3"></div>
<!-- 13. Programming Area --> <!-- 13. Programming Area -->
<div class="interface-button" id="interface-button-programming-area"> <div class="interface-button" id="interface-button-programming-area">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 13}));</script></div> <div class="interface-button-text">13</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-programming-area"></div> <div class="interface-vertical-line" id="interface-vertical-line-programming-area"></div>
<div class="interface-dot" id="interface-dot-programming-area"></div> <div class="interface-dot" id="interface-dot-programming-area"></div>
<!-- 12. Programming Script --> <!-- 12. Programming Script -->
<div class="interface-button" id="interface-button-programming-script"> <div class="interface-button" id="interface-button-programming-script">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 12}));</script></div> <div class="interface-button-text">12</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-programming-script-1"></div> <div class="interface-vertical-line" id="interface-vertical-line-programming-script-1"></div>
<div class="interface-horizontal-line" id="interface-horizontal-line-programming-script"></div> <div class="interface-horizontal-line" id="interface-horizontal-line-programming-script"></div>
@ -116,7 +116,7 @@
<div class="interface-vertical-line" id="interface-vertical-line-programming-script-3"></div> <div class="interface-vertical-line" id="interface-vertical-line-programming-script-3"></div>
<!-- 11. Undo Redo --> <!-- 11. Undo Redo -->
<div class="interface-button" id="interface-button-undo-redo"> <div class="interface-button" id="interface-button-undo-redo">
<div class="interface-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 11}));</script></div> <div class="interface-button-text">11</div>
</div> </div>
<div class="interface-vertical-line" id="interface-vertical-line-undo-redo-1"></div> <div class="interface-vertical-line" id="interface-vertical-line-undo-redo-1"></div>
<div class="interface-horizontal-line" id="interface-horizontal-line-undo-redo"></div> <div class="interface-horizontal-line" id="interface-horizontal-line-undo-redo"></div>
@ -126,10 +126,8 @@
<div id="right-column"> <div id="right-column">
<div id="interface-key"> <div id="interface-key">
<div id="interface-key-header"> <div id="interface-key-header">
<script>document.write(Localization.localize("INTERFACE_GUIDE_SAVE", {N:1}));</script>
</div> </div>
<div id="interface-key-description"> <div id="interface-key-description">
<script>document.write(Localization.localize("INTERFACE_GUIDE_SAVE_DESCRIPTION"));</script>
</div> </div>
</div> </div>
<div id="video-wrapper"> <div id="video-wrapper">
@ -138,53 +136,5 @@
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript">
var interfaceKeys = [
"SAVE",
"STAGE",
"PRESENTATION_MODE",
"GRID",
"CHANGE_BG",
"ADD_TEXT",
"RESET_CHAR",
"GREEN_FLAG",
"PAGES",
"PROJECT_INFO",
"UNDO_REDO",
"PROGRAMMING_SCRIPT",
"PROGRAMMING_AREA",
"BLOCKS_PALETTE",
"BLOCKS_CATEGORIES",
"CHARACTERS"
];
var interfaceDescriptions = [];
for (var i = 0; i < interfaceKeys.length; i++) {
var key = interfaceKeys[i];
interfaceDescriptions.push([
Localization.localize("INTERFACE_GUIDE_" + key, {N: i+1}),
Localization.localize("INTERFACE_GUIDE_" + key + "_DESCRIPTION")
]);
}
var interfaceKeyHeaderNode = document.getElementById('interface-key-header');
var interfaceKeyDescriptionNode = document.getElementById('interface-key-description');
var currentButton = document.getElementById('interface-button-save');
var switchHelp = function(e) {
var target = e.target;
if (target.className == 'interface-button-text') {
descriptionId = parseInt(target.innerText - 1);
interfaceKeyHeaderNode.textContent = interfaceDescriptions[descriptionId][0];
interfaceKeyDescriptionNode.textContent = interfaceDescriptions[descriptionId][1];
currentButton.className = 'interface-button';
currentButton = target.parentNode;
currentButton.className = currentButton.className + ' interface-button-selected';
parent.ScratchAudio.sndFXWithVolume("keydown.wav", 0.3);
}
};
document.addEventListener('touchstart', switchHelp, false);
</script>
</body> </body>
</html> </html>

72
editions/free/src/inapp/paint.html
View file

@ -15,19 +15,19 @@
<div class="learn-tab learn-tab-selected learn-paint"> <div class="learn-tab learn-tab-selected learn-paint">
<!-- 1. Undo --> <!-- 1. Undo -->
<div class="paint-button paint-button-selected" id="paint-button-undo"> <div class="paint-button paint-button-selected" id="paint-button-undo">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 1}));</script></div> <div class="paint-button-text">1</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-undo"></div> <div class="paint-vertical-line" id="paint-vertical-line-undo"></div>
<div class="paint-dot" id="paint-dot-undo"></div> <div class="paint-dot" id="paint-dot-undo"></div>
<!-- 2. Redo --> <!-- 2. Redo -->
<div class="paint-button" id="paint-button-redo"> <div class="paint-button" id="paint-button-redo">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 2}));</script></div> <div class="paint-button-text">2</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-redo"></div> <div class="paint-vertical-line" id="paint-vertical-line-redo"></div>
<div class="paint-dot" id="paint-dot-redo"></div> <div class="paint-dot" id="paint-dot-redo"></div>
<!-- 3. Select Shape --> <!-- 3. Select Shape -->
<div class="paint-button" id="paint-button-select-shape"> <div class="paint-button" id="paint-button-select-shape">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 3}));</script></div> <div class="paint-button-text">3</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-select-shape-1"></div> <div class="paint-vertical-line" id="paint-vertical-line-select-shape-1"></div>
<div class="paint-horizontal-line" id="paint-horizontal-line-select-shape-1"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-select-shape-1"></div>
@ -36,13 +36,13 @@
<div class="paint-horizontal-line" id="paint-horizontal-line-select-shape-3"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-select-shape-3"></div>
<!-- 4. Character Name --> <!-- 4. Character Name -->
<div class="paint-button" id="paint-button-character-name"> <div class="paint-button" id="paint-button-character-name">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 4}));</script></div> <div class="paint-button-text">4</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-character-name"></div> <div class="paint-vertical-line" id="paint-vertical-line-character-name"></div>
<div class="paint-dot" id="paint-dot-character-name"></div> <div class="paint-dot" id="paint-dot-character-name"></div>
<!-- 5. Cut --> <!-- 5. Cut -->
<div class="paint-button" id="paint-button-cut"> <div class="paint-button" id="paint-button-cut">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 5}));</script></div> <div class="paint-button-text">5</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-cut"></div> <div class="paint-vertical-line" id="paint-vertical-line-cut"></div>
<div class="paint-horizontal-line" id="paint-horizontal-line-cut"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-cut"></div>
@ -50,48 +50,48 @@
<img class="ipad-project-view" src="images/paint.png" /> <img class="ipad-project-view" src="images/paint.png" />
<!-- 6. Duplicate --> <!-- 6. Duplicate -->
<div class="paint-button" id="paint-button-duplicate"> <div class="paint-button" id="paint-button-duplicate">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 6}));</script></div> <div class="paint-button-text">6</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-duplicate"></div> <div class="paint-vertical-line" id="paint-vertical-line-duplicate"></div>
<div class="paint-horizontal-line" id="paint-horizontal-line-duplicate"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-duplicate"></div>
<div class="paint-dot" id="paint-dot-duplicate"></div> <div class="paint-dot" id="paint-dot-duplicate"></div>
<!-- 7. Rotate --> <!-- 7. Rotate -->
<div class="paint-button" id="paint-button-rotate"> <div class="paint-button" id="paint-button-rotate">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 7}));</script></div> <div class="paint-button-text">7</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-rotate"></div> <div class="paint-vertical-line" id="paint-vertical-line-rotate"></div>
<div class="paint-horizontal-line" id="paint-horizontal-line-rotate"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-rotate"></div>
<div class="paint-dot" id="paint-dot-rotate"></div> <div class="paint-dot" id="paint-dot-rotate"></div>
<!-- 8. Drag --> <!-- 8. Drag -->
<div class="paint-button" id="paint-button-drag"> <div class="paint-button" id="paint-button-drag">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 8}));</script></div> <div class="paint-button-text">8</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-drag"></div> <div class="paint-vertical-line" id="paint-vertical-line-drag"></div>
<div class="paint-horizontal-line" id="paint-horizontal-line-drag"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-drag"></div>
<div class="paint-dot" id="paint-dot-drag"></div> <div class="paint-dot" id="paint-dot-drag"></div>
<!-- 9. Save --> <!-- 9. Save -->
<div class="paint-button" id="paint-button-save"> <div class="paint-button" id="paint-button-save">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 9}));</script></div> <div class="paint-button-text">9</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-save"></div> <div class="paint-vertical-line" id="paint-vertical-line-save"></div>
<div class="paint-dot" id="paint-dot-save"></div> <div class="paint-dot" id="paint-dot-save"></div>
<!-- 10. Fill --> <!-- 10. Fill -->
<div class="paint-button" id="paint-button-fill"> <div class="paint-button" id="paint-button-fill">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 10}));</script></div> <div class="paint-button-text">10</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-fill"></div> <div class="paint-vertical-line" id="paint-vertical-line-fill"></div>
<div class="paint-horizontal-line" id="paint-horizontal-line-fill"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-fill"></div>
<div class="paint-dot" id="paint-dot-fill"></div> <div class="paint-dot" id="paint-dot-fill"></div>
<!-- 11. Camera --> <!-- 11. Camera -->
<div class="paint-button" id="paint-button-camera"> <div class="paint-button" id="paint-button-camera">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 11}));</script></div> <div class="paint-button-text">11</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-camera"></div> <div class="paint-vertical-line" id="paint-vertical-line-camera"></div>
<div class="paint-horizontal-line" id="paint-horizontal-line-camera"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-camera"></div>
<div class="paint-dot" id="paint-dot-camera"></div> <div class="paint-dot" id="paint-dot-camera"></div>
<!-- 12. Select Color --> <!-- 12. Select Color -->
<div class="paint-button" id="paint-button-select-color"> <div class="paint-button" id="paint-button-select-color">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 12}));</script></div> <div class="paint-button-text">12</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-select-color-1"></div> <div class="paint-vertical-line" id="paint-vertical-line-select-color-1"></div>
<div class="paint-horizontal-line" id="paint-horizontal-line-select-color-1"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-select-color-1"></div>
@ -99,7 +99,7 @@
<div class="paint-vertical-line" id="paint-vertical-line-select-color-3"></div> <div class="paint-vertical-line" id="paint-vertical-line-select-color-3"></div>
<!-- 13. Select Line Size --> <!-- 13. Select Line Size -->
<div class="paint-button" id="paint-button-select-line-size"> <div class="paint-button" id="paint-button-select-line-size">
<div class="paint-button-text"><script>document.write(Localization.localize("INTERFACE_GUIDE_NUMBER", {N: 13}));</script></div> <div class="paint-button-text">13</div>
</div> </div>
<div class="paint-vertical-line" id="paint-vertical-line-select-line-size-1"></div> <div class="paint-vertical-line" id="paint-vertical-line-select-line-size-1"></div>
<div class="paint-horizontal-line" id="paint-horizontal-line-select-line-size-1"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-select-line-size-1"></div>
@ -108,58 +108,12 @@
<div class="paint-horizontal-line" id="paint-horizontal-line-select-line-size-3"></div> <div class="paint-horizontal-line" id="paint-horizontal-line-select-line-size-3"></div>
<div id="paint-key"> <div id="paint-key">
<div id="paint-key-header"> <div id="paint-key-header">
<script>document.write(Localization.localize("PAINT_GUIDE_UNDO", {N:1}));</script>
</div> </div>
<div id="paint-key-description"> <div id="paint-key-description">
<script>document.write(Localization.localize("PAINT_GUIDE_UNDO_DESCRIPTION"));</script>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript">
var paintKeys = [
"UNDO",
"REDO",
"SHAPE",
"CHARACTER_NAME",
"CUT",
"DUPLICATE",
"ROTATE",
"DRAG",
"SAVE",
"FILL",
"CAMERA",
"COLOR",
"LINE_WIDTH"
];
var paintDescriptions = [];
for (var i = 0; i < paintKeys.length; i++) {
var key = paintKeys[i];
paintDescriptions.push([
Localization.localize("PAINT_GUIDE_" + key, {N: i+1}),
Localization.localize("PAINT_GUIDE_" + key + "_DESCRIPTION")
]);
}
var paintKeyHeaderNode = document.getElementById('paint-key-header');
var paintKeyDescriptionNode = document.getElementById('paint-key-description');
var currentButton = document.getElementById('paint-button-undo');
var switchHelp = function(e) {
var target = e.target;
if (target.className == 'paint-button-text') {
descriptionId = parseInt(target.innerText - 1);
paintKeyHeaderNode.textContent = paintDescriptions[descriptionId][0];
paintKeyDescriptionNode.textContent = paintDescriptions[descriptionId][1];
currentButton.className = 'paint-button';
currentButton = target.parentNode;
currentButton.className = currentButton.className + ' paint-button-selected';
parent.ScratchAudio.sndFXWithVolume("keydown.wav", 0.3);
}
};
document.addEventListener('touchstart', switchHelp, false);
</script>
</body> </body>
</html> </html>

171
src/entry/app.js
View file

@ -177,14 +177,179 @@ function inappAbout () {
function inappInterfaceGuide () { function inappInterfaceGuide () {
var interfaceKeyHeaderNode = gn('interface-key-header');
var interfaceKeyDescriptionNode = gn('interface-key-description');
interfaceKeyHeaderNode.textContent = Localization.localize('INTERFACE_GUIDE_SAVE', {N: 1});
interfaceKeyDescriptionNode.textContent = Localization.localize('INTERFACE_GUIDE_SAVE_DESCRIPTION');
var interfaceKeys = [
'SAVE',
'STAGE',
'PRESENTATION_MODE',
'GRID',
'CHANGE_BG',
'ADD_TEXT',
'RESET_CHAR',
'GREEN_FLAG',
'PAGES',
'PROJECT_INFO',
'UNDO_REDO',
'PROGRAMMING_SCRIPT',
'PROGRAMMING_AREA',
'BLOCKS_PALETTE',
'BLOCKS_CATEGORIES',
'CHARACTERS'
];
var interfaceDescriptions = [];
for (var i = 0; i < interfaceKeys.length; i++) {
var key = interfaceKeys[i];
interfaceDescriptions.push([
Localization.localize('INTERFACE_GUIDE_' + key, {N: i+1}),
Localization.localize('INTERFACE_GUIDE_' + key + '_DESCRIPTION')
]);
}
var currentButton = document.getElementById('interface-button-save');
var switchHelp = function (e) {
var target = e.target;
if (target.className == 'interface-button-text') {
var descriptionId = parseInt(target.innerText - 1);
interfaceKeyHeaderNode.textContent = interfaceDescriptions[descriptionId][0];
interfaceKeyDescriptionNode.textContent = interfaceDescriptions[descriptionId][1];
currentButton.className = 'interface-button';
currentButton = target.parentNode;
currentButton.className = currentButton.className + ' interface-button-selected';
ScratchAudio.sndFXWithVolume('keydown.wav', 0.3);
}
};
document.addEventListener('touchstart', switchHelp, false);
} }
function inappPaintEditorGuide () { function inappPaintEditorGuide () {
var paintKeyHeaderNode = gn('paint-key-header');
var paintKeyDescriptionNode = gn('paint-key-description');
paintKeyHeaderNode.textContent = Localization.localize('PAINT_GUIDE_UNDO', {N:1});
paintKeyDescriptionNode.textContent = Localization.localize('PAINT_GUIDE_UNDO_DESCRIPTION');
var paintKeys = [
'UNDO',
'REDO',
'SHAPE',
'CHARACTER_NAME',
'CUT',
'DUPLICATE',
'ROTATE',
'DRAG',
'SAVE',
'FILL',
'CAMERA',
'COLOR',
'LINE_WIDTH'
];
var paintDescriptions = [];
for (var i = 0; i < paintKeys.length; i++) {
var key = paintKeys[i];
paintDescriptions.push([
Localization.localize('PAINT_GUIDE_' + key, {N: i+1}),
Localization.localize('PAINT_GUIDE_' + key + '_DESCRIPTION')
]);
}
var currentButton = document.getElementById('paint-button-undo');
var switchHelp = function (e) {
var target = e.target;
if (target.className == 'paint-button-text') {
var descriptionId = parseInt(target.innerText - 1);
paintKeyHeaderNode.textContent = paintDescriptions[descriptionId][0];
paintKeyDescriptionNode.textContent = paintDescriptions[descriptionId][1];
currentButton.className = 'paint-button';
currentButton = target.parentNode;
currentButton.className = currentButton.className + ' paint-button-selected';
ScratchAudio.sndFXWithVolume('keydown.wav', 0.3);
}
};
document.addEventListener('touchstart', switchHelp, false);
} }
function inappBlocksGuide () { function inappBlocksGuide () {
// Localized category names
gn('yellow-block-category-header').textContent = Localization.localize('BLOCKS_TRIGGERING_BLOCKS');
gn('blue-block-category-header').textContent = Localization.localize('BLOCKS_MOTION_BLOCKS');
gn('purple-block-category-header').textContent = Localization.localize('BLOCKS_LOOKS_BLOCKS');
gn('green-block-category-header').textContent = Localization.localize('BLOCKS_SOUND_BLOCKS');
gn('orange-block-category-header').textContent = Localization.localize('BLOCKS_CONTROL_BLOCKS');
gn('red-block-category-header').textContent = Localization.localize('BLOCKS_END_BLOCKS');
var blockDescriptionKeys = [
'BLOCKS_GREEN_FLAG',
'BLOCKS_GREEN_FLAG_DESCRIPTION',
'BLOCKS_ON_TAP',
'BLOCKS_ON_TAP_DESCRIPTION',
'BLOCKS_ON_TOUCH',
'BLOCKS_ON_TOUCH_DESCRIPTION',
'BLOCKS_ON_MESSAGE',
'BLOCKS_ON_MESSAGE_DESCRIPTION',
'BLOCKS_SEND_MESSAGE',
'BLOCKS_SEND_MESSAGE_DESCRIPTION',
'BLOCKS_MOVE_RIGHT',
'BLOCKS_MOVE_RIGHT_DESCRIPTION',
'BLOCKS_MOVE_LEFT',
'BLOCKS_MOVE_LEFT_DESCRIPTION',
'BLOCKS_MOVE_UP',
'BLOCKS_MOVE_UP_DESCRIPTION',
'BLOCKS_MOVE_DOWN',
'BLOCKS_MOVE_DOWN_DESCRIPTION',
'BLOCKS_TURN_RIGHT',
'BLOCKS_TURN_RIGHT_DESCRIPTION',
'BLOCKS_TURN_LEFT',
'BLOCKS_TURN_LEFT_DESCRIPTION',
'BLOCKS_HOP',
'BLOCKS_HOP_DESCRIPTION',
'BLOCKS_GO_HOME',
'BLOCKS_GO_HOME_DESCRIPTION',
'BLOCKS_SAY',
'BLOCKS_SAY_DESCRIPTION',
'BLOCKS_GROW',
'BLOCKS_GROW_DESCRIPTION',
'BLOCKS_SHRINK',
'BLOCKS_SHRINK_DESCRIPTION',
'BLOCKS_RESET_SIZE',
'BLOCKS_RESET_SIZE_DESCRIPTION',
'BLOCKS_HIDE',
'BLOCKS_HIDE_DESCRIPTION',
'BLOCKS_SHOW',
'BLOCKS_SHOW_DESCRIPTION',
'BLOCKS_POP',
'BLOCKS_POP_DESCRIPTION',
'BLOCKS_PLAY_RECORDED',
'BLOCKS_PLAY_RECORDED_DESCRIPTION',
'BLOCKS_WAIT',
'BLOCKS_WAIT_DESCRIPTION',
'BLOCKS_STOP',
'BLOCKS_STOP_DESCRIPTION',
'BLOCKS_SET_SPEED',
'BLOCKS_SET_SPEED_DESCRIPTION',
'BLOCKS_REPEAT',
'BLOCKS_REPEAT_DESCRIPTION',
'BLOCKS_END',
'BLOCKS_END_DESCRIPTION',
'BLOCKS_REPEAT_FOREVER',
'BLOCKS_REPEAT_FOREVER_DESCRIPTION',
'BLOCKS_GO_TO_PAGE',
'BLOCKS_GO_TO_PAGE_DESCRIPTION'
];
for (let key of blockDescriptionKeys) {
gn(key).textContent = Localization.localize(key);
}
} }
// App-wide entry-point // App-wide entry-point
@ -239,15 +404,15 @@ window.onload = () => {
} else if (page == 'inappInterfaceGuide') { } else if (page == 'inappInterfaceGuide') {
preprocessAndLoadCss('style', 'style/style.css'); preprocessAndLoadCss('style', 'style/style.css');
preprocessAndLoadCss('style', 'style/interface.css'); preprocessAndLoadCss('style', 'style/interface.css');
iOS.waitForInterface(inappInterfaceGuide); inappInterfaceGuide();
} else if (page == 'inappPaintEditorGuide') { } else if (page == 'inappPaintEditorGuide') {
preprocessAndLoadCss('style', 'style/style.css'); preprocessAndLoadCss('style', 'style/style.css');
preprocessAndLoadCss('style', 'style/paint.css'); preprocessAndLoadCss('style', 'style/paint.css');
iOS.waitForInterface(inappPaintEditorGuide); inappPaintEditorGuide();
} else if (page == 'inappBlocksGuide') { } else if (page == 'inappBlocksGuide') {
preprocessAndLoadCss('style', 'style/style.css'); preprocessAndLoadCss('style', 'style/style.css');
preprocessAndLoadCss('style', 'style/blocks.css'); preprocessAndLoadCss('style', 'style/blocks.css');
iOS.waitForInterface(inappBlocksGuide); inappBlocksGuide();
} }
}); });
}); });