@robotical/martyblocksjr 4.2.2 → 4.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/editions/free/src/app.bundle.js +1 -1
  2. package/editions/free/src/css/editor.css +5 -0
  3. package/editions/free/src/css/editorleftpanel.css +12 -6
  4. package/editions/free/src/inapp/about.html +55 -26
  5. package/editions/free/src/inapp/blocks.html +16 -459
  6. package/editions/free/src/inapp/images/interface.png +0 -0
  7. package/editions/free/src/inapp/images/paint.png +0 -0
  8. package/editions/free/src/inapp/interface.html +136 -123
  9. package/editions/free/src/inapp/style/about.css +333 -21
  10. package/editions/free/src/inapp/style/blocks.css +423 -82
  11. package/editions/free/src/inapp/style/interface.css +178 -453
  12. package/editions/free/src/localizations/bg.json +36 -2
  13. package/editions/free/src/localizations/ca.json +36 -2
  14. package/editions/free/src/localizations/cs.json +36 -2
  15. package/editions/free/src/localizations/cy.json +36 -2
  16. package/editions/free/src/localizations/da.json +36 -2
  17. package/editions/free/src/localizations/de.json +36 -2
  18. package/editions/free/src/localizations/el.json +36 -2
  19. package/editions/free/src/localizations/en.json +114 -7
  20. package/editions/free/src/localizations/es.json +36 -2
  21. package/editions/free/src/localizations/fi.json +36 -2
  22. package/editions/free/src/localizations/fr.json +36 -2
  23. package/editions/free/src/localizations/it.json +36 -2
  24. package/editions/free/src/localizations/ja.json +36 -2
  25. package/editions/free/src/localizations/ko.json +36 -2
  26. package/editions/free/src/localizations/nl.json +36 -2
  27. package/editions/free/src/localizations/no.json +36 -2
  28. package/editions/free/src/localizations/pl.json +36 -2
  29. package/editions/free/src/localizations/pt-br.json +36 -2
  30. package/editions/free/src/localizations/pt.json +36 -2
  31. package/editions/free/src/localizations/sv.json +36 -2
  32. package/editions/free/src/localizations/th.json +36 -2
  33. package/editions/free/src/localizations/tr.json +36 -2
  34. package/editions/free/src/localizations/uk.json +36 -2
  35. package/editions/free/src/localizations/zh-cn.json +36 -2
  36. package/editions/free/src/localizations/zh-tw.json +36 -2
  37. package/package.json +1 -1
  38. package/scripts/a11y-structure.mjs +9 -2
  39. package/tests/BlockGuideRegistry.test.js +60 -0
  40. package/tests/MartyManager.test.js +88 -0
  41. package/tests/e2e/accessibility.e2e.test.js +153 -10
  42. package/tests/e2e/blocks-jr-hidden-blocks.e2e.test.js +84 -0
  43. package/tests/e2e/chromium-79-smoke.test.js +12 -17
  44. package/tests/e2e/marty-connection-ui.e2e.test.js +177 -12
  45. package/tests/e2e/microbit-extension-project-reload.e2e.test.js +1 -6
  46. package/tests/e2e/project-load-progress-loop.e2e.test.js +1 -6
  47. package/tests/e2e/sidebar-scrollbars.e2e.test.js +179 -0
package/editions/free/src/css/editor.css CHANGED
@@ -111,6 +111,11 @@ div.frame {
111
111
  height: ${css_vh(37.29)};
112
112
  }
113
113
 
114
+ .pages .scrollbar {
115
+ top: ${css_vh(2.60)};
116
+ height: ${css_vh(37.29)};
117
+ }
118
+
114
119
  .pagelist {
115
120
  position: relative;
116
121
  width: ${css_vh(21.09)};
package/editions/free/src/css/editorleftpanel.css CHANGED
@@ -241,18 +241,19 @@
241
241
  .scrollbar {
242
242
  display: none;
243
243
  position: absolute;
244
- /* display: inline-block; */
245
244
  margin: 0px;
246
245
  padding: 0px;
247
246
  top: 0px;
248
- left: ${css_vh(32.29)};
247
+ right: 0;
249
248
  width: ${css_vh(1.04)};
250
- height: ${css_vh(40.63)};
249
+ height: ${css_vh(25.63)};
251
250
  background: rgba(255,255,255,0.5);
251
+ touch-action: none;
252
+ z-index: 8;
252
253
  }
253
254
 
254
255
  .scrollbar .sbthumb {
255
- display: none;
256
+ display: block;
256
257
  position: absolute;
257
258
  margin: 0px;
258
259
  padding: 0px;
@@ -260,10 +261,15 @@
260
261
  height: 0px;
261
262
  background: #C9C9C9;
262
263
  }
263
- /*
264
+
264
265
  .scrollbar.off { display: none;}
265
266
 
266
- .scrollbar.on {display: inline-block;} */
267
+ .scrollbar.on {display: block;}
268
+
269
+ .scrollbar:focus-visible {
270
+ outline: 3px solid #133C46;
271
+ outline-offset: 2px;
272
+ }
267
273
 
268
274
  #library {
269
275
  position: absolute;
package/editions/free/src/inapp/about.html CHANGED
@@ -6,37 +6,66 @@
6
6
  window.scratchJrPage = 'inappAbout';
7
7
  </script>
8
8
  <script type="text/javascript" src="../app.bundle.js"></script>
9
-
10
9
  </head>
11
10
  <body>
12
- <h1 id="aboutScratchjrTitle"></h1>
13
- <div class="about-section-wrapper">
14
- <h2 class="title" id="aboutWhatIs"></h2>
15
- <div class="description" id="aboutDescription">
16
- </div>
17
- </div>
18
-
19
- <div class="about-section-wrapper">
20
- <h2 class="title" id="aboutWhyCreate"></h2>
21
- <div class="description" id="aboutWhyCreateDescription">
22
- </div>
23
- </div>
24
-
25
- <div class="about-section-wrapper">
26
- <h2 class="title" id="aboutWhoCreated"></h2>
27
- <div class="description" id="aboutWhoCreatedDescription">
28
- </div></div>
11
+ <main id="content" class="about-page">
12
+ <header class="about-hero">
13
+ <div class="about-hero-copy">
14
+ <p class="about-eyebrow" id="aboutBlocksJrEyebrow"></p>
15
+ <h1 id="aboutBlocksJrTitle"></h1>
16
+ <p class="about-tagline" id="aboutBlocksJrTagline"></p>
17
+ </div>
18
+ <div class="about-hero-art" aria-hidden="true">
19
+ <span class="about-spark about-spark-one"></span>
20
+ <span class="about-spark about-spark-two"></span>
21
+ <img class="about-logo" src="../assets/start/MartyBlocks Jr Icon.png" alt="">
22
+ <img class="about-marty" src="../pnglibrary/Sprites_Marty.png" alt="">
23
+ </div>
24
+ </header>
29
25
 
30
- <div class="about-section-wrapper">
31
- <h2 class="title" id="aboutWhoSupported"></h2>
32
- <div class="description" id="aboutWhoSupportedDescription">
33
- </div>
26
+ <section class="about-introduction" aria-labelledby="aboutBlocksJrIntroductionTitle">
27
+ <h2 id="aboutBlocksJrIntroductionTitle"></h2>
28
+ <p id="aboutBlocksJrIntroductionDescription"></p>
29
+ </section>
34
30
 
35
- <div class="description">
36
- Aaron Suggs, Abe Stein, Abinash Bishoyi, Adam Bellow, Adam Skylar Miner, Adriana Moscatelli, Adrienne Tilley, Agnes Wagenh&auml;user, Aidan Raney, Aiden &amp; Eryn Murphy, Akim Boyko, Akinsola Akinbiyi, Alain-Christian, Albert Oldfield, Alex Abdugafarov, Alexander &amp; Edward Grabon, Alexander Falk, Alice Gamache, Alicia Ca&ntilde;ellas Mayor, Alison &amp; Tyler Oakman, Al Sweigart, Althea Champagnie, Amelia G. Kahler, Am&eacute;lie Marian, Ana Aparecida Abrantes da Silva, Anasol Pe&ntilde;a-Rios, Anastasia &amp; Guenevere Miller, Anat Paskin-Cherniavsky, Anatole Debierre, Andr&eacute; &quot;Takras&quot; Nordstrand, Andreas Elf, Andreas Thaller, Andrew Morris, Andrew Reback, Andy Gray, Andy Schmitz, Ann Chao, Ann Nicholson, Anna Valderzalm, Annie Huddleston, Anthony Christopher Vicari, Anthony Deighton, Ari Bader-Natal, Ariel Malka, Ariel Segall, Arlin Maeve Jem, Armando Ricalde, Arnold Abelman, Ash Wakeman, Asli Aydin, Astrid Jehg Giardino, Ava Kuperman, Avery Heltsley, Axel Duerkop, Barbara Reichart, Ben Plantinga, Ben Rugg, Benjamin Reynolds, Benjohn Barnes, Berenice Chong, Besjan Xhika, Beth McFadden Schilke, Beth Poss, Bex Tuchman, Bob Brinker, Bodhi Verhaeghen, Brad Dickason, Brad Phillips, Brandon Zylstra, Brevynn Marie Authement, Brian Sucer, Bryan Hartman, Burrall Family, Caleb Gretz, Callan McCluskey, Camille Teicheira, Carlos Ferreira, Carlos Ravelo, Carmelo Presicce, Charlene Costello, Charles Goddard, Charles Overy, Charles Wiles, Charlotte Pivot, Chloe Ward, Chris Baum, Chris Swan, Chris Wolfe, Christian Duckworth, Christian G. Panzer, Christian Printzell Halvorsen, Christina Osieja, Christine Tempesta, Christofer Bernander, Christoph Derndorfer, Christopher Harris, Christy Heyob, Chuck Pickelhaupt, Cindy Alvarez, Claudia Truesdell, Clement Chau, Colin J. White, Comrade Alex, Craig Janis, Craig Lucci, Cristina Campos, Damon May, Dan Callahan, Dan Hill, Dan Lowe, Dan Malec, Dan Martines, Dan Salvucci, Dana Pavel, Dandelion Collective, Daniel Barbosa, Daniel Moix, Daniel Rehn, Daniella Jaeger, Daniella Latham, Danielle Feerst, Danil Sokolov, Danny Dulak, Darragh J. Delany, Dave Haynes, Dave Rapin, Dave Wolles, David Dorrier, David Mellis, David Bonner, David Dance, David Drew, David Dufresne, David Monreal i Prat, David Peter, David Schaub, David Wilson, Deanna Stanley, Debbie Lai, Debbie Wizig, Derek Sheen, Derry Lammerding, Diane Pierce Skinner, Diego Diaz, Digital Dream Labs, Dmitry Kazantsev, Don McCurdy, Donald Utley, Doug Morris, Steve Bunce, Dushyant Arora, Dyah Purwati, Dylan Byth, Ed Robinson, Eelco Lempsink, Eivind Melleby, Elise Lemle, Elizabeth Bagish, Emilio Vacca, Emily Nikolaisen, Emma Healy, Emma &amp; Sasha Telerant Blau, Eric Buess, Eric Elliott, Eric Henderson, Eric Hoffman, Eric Novik, Eric Whittington, Erik Ashby, Erik Goodlad, Erwin Mazariegos, Esben Collstrup, Espen Lodden, Ethan Bauley, Evan Scruggs, Fabio Albanese, Felici&aacute;n D&aacute;vid Nagy, Felipe Santi, Finkelstein Family, Flavia Dyer, Frank &amp; Vik Delporte, Frank Kam Lee, Frank Sperber, Gabriela Richard, Gary Ball, Geoff Allmand, George V. Robinson, Gerald Chao, German Bauer, Grace A. Thrasher, Gracie Elqura, Graham Toal, Graham Wallis, Greg Linch, Guillermo G. Espins, Hakan Atas, Hamish Grace, Hannah Celeste Radunovich, Hans Petter Amundsen, Hartmuth Gieldanowski, Harvey Brinda, Heinrich Langos, Helena Rollins, Herv&eacute; Gallaire, Howard Ho, I.Z. aka IDzeroNo, Ian Viemeister, Ilayda-Laurens-Oliver, Isao Sonobe, Islam Youssef, Ivan Koldaev, Ivan Makfinsky, J. Becket Linn, Jackson &amp; Jacob Malory, Jacky K.C Yau, Jaka Mele, James Brophy, James Brown, James Coleman, James Dellow, James Droskoski, James E. Pace, James Evans, James McAllen III, Jan Bernatik, Jared Mortensen, Jason A. Torres, Jason Ballard, Jason Ostrander, Jason VanOrd &amp; Mai Thao Pham, Javed Hasnat, Jaynemarie Lentlie, Jeanne &amp; Louise Delalonde, Jeff Gilfelt, Jeff Magnusson, Jenn Hudak, Jennifer Leigh Allard, Jens Woyke, Jeremy Cee, Jeremy Douglass, Jeremy Goldin, Jerry Owens, Jess Ren&egrave; Hedegaard Gertsen, Jill Truesdale, Jimba George, Joan Miquel Payeras Cresp&iacute;, Joanna Doyle, Joe Jones, Joe Mills, Joe Nachison, Joek van Montfort, Joel Grasmeyer, Joerg Schwanke, Johann Stockinger, John C. Vivenzio, John Hritz, John Moore, John Morrow, John P. Carr, John Scott Tynes, John Sosoka, John Thurmond, John Umekubo, Johnny Clark, Jon &amp; Susan, Jon Sj&ouml;din, Jonathan Ferrell, Jonathan Hunt, Jonathan Marc Holtan, Jordan C. Seidel, Jose Alberto Carcas Mullor, Jose Chitty, Jose Julio Rodrigo, Jose Tijam, Josep Gabriel Cerd&agrave; Ferr&agrave;ndiz, Joseph Civin, Joseph Cohen, Joseph Giordano, Joseph Rork, Joshua Mack, Josh Paul, Josh Renner, Josh Richau, Josh Thompson, Josiah Reynolds, J. Shorr, Juan Antonio Casado, Julie West, Julie Wood, Justin Carpenter, Justin Chines, Justin Ellis, Justin Hamilton, Justin K Rising, Justin Chung, Kaia Dekker, Kaisla Vuorinen, Kaloyan Raev, Kaman Cheung, Karina Linch, Karla Brown, Karsten Gresch, Kasper Kamperman, Kathryn Bryant, Katharine Pong, Katherine Senzee, Kathrin Brogli, Katie Tekula, Kazuhiro Abe, Keawe Maximillian Landgraf, Keith Lewis, Kendra J. Crawford, Kenneth Sizer, Kevin Niemczyk, Kevin Nunnelly, Kevin Ye, Kimberly McAfee, Kira Franz, Koidin Family , Kovelman Family, Kris Hanks, Kristian Cibulskis, Kristiina Hurme, Kristin Orwig, Krzysztof Czai&nacute;ski, Kurt Tholking, Lara &amp; Martin Kastner, Larissa Swanland, Lasse Schwarten, L&aacute;szl&oacute; Ag&aacute;rdi, Lauri Ulm, Lee Tratnyek, Lefevre-Ardant Family, Leigh Klotz, Liam Welsh, Liliana Reynoso, Lilliana Richter, Linda George, Lindsey Blackman Shepard, Little British Robot Company, Luca L&uuml;chinger, Lucien &amp; Amelia Salinas, Luis Carbajosa, Lynn Roberts, Matt Senne, Magic Light Show, Magnus Edvard Nielsen, Mai T. Vu, Marco Vigelini, Margaret A. Staton, Marissa Mocenigo, Marius Voskamp, Mark Best, Mark Budak, Mark Jaroski, Mark Schroeder, Markus Gassenbauer, Markus Gerhard, Markus Mohr, Marlene Getzendanner, Martin Darebn&yacute;, Martin Dinov, Martin Pol&aacute;k, Martin Scherer, Mats R&ouml;rbecker, Matt Sanda, Matt Anestis, Matt Shannon, Matthew Boulay, Matthew Nohr, Matthew Peterson, Maui McAdams, Maureen Tumenas, Mauricio Pontes, Max Lim, Maxine-Antoine Nassim, Megan Myers, Megan Stetz, Melanie Barker, Mete Akcaoglu, Michael Kyed, Michael MJ John, Michael Smith, Michal Copko, Michelle Sharkey, Michi Eder, Mike Grusell, Mike Renne, Mike Welsh, Mikey Pechner, Miki Leskinen, Miklos Kozary, Milan Raj, Miles Skorpen, Mohamed Shareef, Maldives, Moris Danon, Mudit Dalmia, My New Enterprise, Myadiyev Family, Myra Deister, Nanette Donohue, Natalie Freed, Nathan Battan, Neil C.C. Brown, Neil Ferreri, Neville &amp; Julie Cook, Nick Gleason, Nick Schneble, Nick Semenkovich, Nick, Sam &amp; Jesse Corston, Nicolas Lobrot, Nicole Goddard, Niels Huijbregts, Nigel P. Henderson, Nikolay Kolev, Nina Nahyeon Shin, Olivier Dupont, Oren Pinsky, Orion Reblitz-Richardson, Osman E-Baba, Owen Ashford, Owen-Landon-Carson, &Oslash;yvind Selbek, Pablo Burgos, Pari Lingampally, Patrick Bernhardt, Patrick Conway, Pau C&oacute;rdoba, Paul A. Stancik, Paul Brody, Paul Grasso, Paul Muston, Pepijn Kummel, Per Mosseby, Peter Jaros, Pfautz Family, Philipp Thun, Philly Cashion, Pierre Thienpont, PK Shiu, Polly Murray, Pontus &quot;Ponni&quot; Nilsson, Rachel Lea Fox, Rahul Walawalkar, Ramona Bernard, Randy Lynn, Rebecca Hornstein Doede, Richard Monson-Haefel, Rick Anderson, Rick Yvanovich, Rik Bennett, rkt88edmo, Rob Guth, Rob MacAndrew, Robert Elek, Robert T. Williams Jr., Roger Sodre, Ross Peyton, Rowan Elessar Moran, Russell S. Ahlstrom, Ryan Finley, Ryan Grepper, Ryan Nellis, Sacha Mallais, Sage Ross, Salvador, Samantha Packingham Cornell, Sandor Weisz, Sanjay Khuttan, Sara Beshawred, Sarah Faisal, Sarah Richards, Scarlett &amp; Magenta Smith, Scott Manuel, Sean Chou, Sean McManus, Sebastian Hudak, Seokjun Kim, Sergio Marco del Fresno, Sergio Toporek, Servaas Vandecappelle, Shan Zhi Thi, Sharna Jackson, Sharon Kinkead, Shelly &amp; Peter Murphy, Shervyn von Hoerl, Shinichi Fujita, Shinji Niwa, Shruti Maidam, Sid Meredith, Siddharth Saran, Simon Barrett, Simon Dugard, Simon Plutz, Simon Wood, Sistemas Electr&oacute;nicos, Sjoerd Dirk Meijer, Slavko Milekic, Sofica Gonzalez, Sol &amp; Skyla Cannon, Sonya &amp; Nikki Patel, Sophia &amp; Frances Ahern, Sophie Mattholie, Stephen Powell, Stanislav Sinitsyn, Stanislav Sultanov, Stella Zogopoulos Demis, Stephanie Grant, Stephen Sanzo, Stephen Schug, Stephen York, Steve Bagnall, Steve Dembo, Steve Lawton, Steven A. Hauck, Stu Coates, Sunny Amies, Svend Andersen, Sverre Rabbelier, Szescko Cyril, Tabatha DiDomenico, Taj &amp; Joseph Chiu, Takatoshi Suenaga, Tammy Lee, Tanja Borzel, Tarmo Protsin, Tauno Palts, Thomas Hessler, Thomas Schwarz, Tiago C&eacute;sar Volpato Maluta, Tiffany daSilva, Tobias Hartmann, Todd &amp; Monica Warnell, Todd Cowley, Tom Broughton, Tom Plaskon, Tom Ricket, Tom Stacey, Tom Wang, Toma&zcaron; Kocman, Tommy Casanova, Tommy Falgout, Tomohiro Ueno, Tony Cheal, Torbjorn Skauli, Trisha Callella, Tyler Reeves, Ulrich Tausend, Unmesh Gundecha, Ureka Moore-Washington, Vadim Oss, Victor R. Lee, Victoria Crespo Carballo, Victoria Vega, Ville Caribas Lima de Medeiros, Vince Kim, Virginia Malanog, Viviane Pretet, V.R. Bones, Andrew Walton, Wayne Blackburn, Wendy E. Rowe, Will Ober, William Bettridge-Radford, William Wnekowicz, Wincent Balin, Xose P&eacute;rez, Yannick Methot, Yeou-Hsiang Cheng, Yoojin Lim, Yoshihiro Kawahara, Yrjan Tangenes, Zachary Kestenbaum, Zack Chapple, Z&eacute;bulon Grav&eacute;, Zoe Franklyn, and 141Learning.
37
- </div>
31
+ <section class="about-features" aria-labelledby="aboutBlocksJrFeaturesTitle">
32
+ <h2 id="aboutBlocksJrFeaturesTitle"></h2>
33
+ <div class="about-feature-grid">
34
+ <article class="about-feature-card about-feature-create">
35
+ <span class="about-feature-icon" aria-hidden="true">✦</span>
36
+ <h3 id="aboutBlocksJrCreateTitle"></h3>
37
+ <p id="aboutBlocksJrCreateDescription"></p>
38
+ </article>
39
+ <article class="about-feature-card about-feature-code">
40
+ <span class="about-feature-icon" aria-hidden="true">◆</span>
41
+ <h3 id="aboutBlocksJrCodeTitle"></h3>
42
+ <p id="aboutBlocksJrCodeDescription"></p>
43
+ </article>
44
+ <article class="about-feature-card about-feature-connect">
45
+ <span class="about-feature-icon" aria-hidden="true">↗</span>
46
+ <h3 id="aboutBlocksJrConnectTitle"></h3>
47
+ <p id="aboutBlocksJrConnectDescription"></p>
48
+ </article>
49
+ </div>
50
+ </section>
38
51
 
39
- </div>
52
+ <div class="about-story-grid">
53
+ <section class="about-story-card about-robotical" aria-labelledby="aboutBlocksJrRoboticalTitle">
54
+ <div class="about-story-marker" aria-hidden="true">R</div>
55
+ <div>
56
+ <h2 id="aboutBlocksJrRoboticalTitle"></h2>
57
+ <p id="aboutBlocksJrRoboticalDescription"></p>
58
+ </div>
59
+ </section>
40
60
 
61
+ <section class="about-story-card about-foundation" aria-labelledby="aboutBlocksJrFoundationTitle">
62
+ <div class="about-story-marker" aria-hidden="true">S</div>
63
+ <div>
64
+ <h2 id="aboutBlocksJrFoundationTitle"></h2>
65
+ <p id="aboutBlocksJrFoundationDescription"></p>
66
+ </div>
67
+ </section>
68
+ </div>
69
+ </main>
41
70
  </body>
42
71
  </html>
package/editions/free/src/inapp/blocks.html CHANGED
@@ -7,467 +7,24 @@
7
7
  </script>
8
8
  <script type="text/javascript" src="../app.bundle.js"></script>
9
9
  </head>
10
-
11
10
  <body>
12
- <div id="content">
13
- <div id="ipad-project-view-wrapper">
14
- <div class="learn-tab learn-blocks">
15
- <!-- Yellow Blocks -->
16
- <div class="block-category-header" id="yellow-block-category-header">
17
- </div>
18
- <div class="block-category-header-line" id="yellow-block-category-header-line"></div>
19
- <div class="block-wrapper">
20
- <div class="block-wrapper-left">
21
- <div class="block-title" id="BLOCKS_GREEN_FLAG">
22
- </div>
23
- <div class="block-image-wrapper">
24
- <img class="block-image" src="images/onflag.png" alt="" />
25
- </div>
26
- <div class="block-description" id="BLOCKS_GREEN_FLAG_DESCRIPTION">
27
- </div>
28
- </div>
29
- <div class="block-wrapper-right">
30
- <div class="block-title" id="BLOCKS_ON_TILT">
31
- </div>
32
- <div class="block-image-wrapper">
33
- <img class="block-image" src="images/ontiltany.png" alt="" />
34
- </div>
35
- <div class="block-description" id="BLOCKS_ON_TILT_DESCRIPTION">
36
- </div>
37
- </div>
38
- </div>
39
- <div class="block-wrapper">
40
- <div class="block-wrapper-left">
41
- <div class="block-title" id="BLOCKS_ON_TOUCH_Cog">
42
- </div>
43
- <div class="block-image-wrapper">
44
- <img class="block-image" src="images/ontouch.png" alt="" />
45
- </div>
46
- <div class="block-description" id="BLOCKS_ON_TOUCH_Cog_DESCRIPTION">
47
- </div>
48
- </div>
49
- <div class="block-wrapper-right">
50
- <div class="block-title" id="BLOCKS_ON_MOVE">
51
- </div>
52
- <div class="block-image-wrapper">
53
- <img class="block-image" src="images/onshake.png" alt="" />
54
- </div>
55
- <div class="block-description" id="BLOCKS_ON_MOVE_DESCRIPTION">
56
- </div>
57
- </div>
58
- </div>
59
- <div class="block-wrapper">
60
- <div class="block-wrapper-left">
61
- <div class="block-title" id="BLOCKS_ON_TAP">
62
- </div>
63
- <div class="block-image-wrapper">
64
- <img class="block-image" src="images/ontap.png" alt="" />
65
- </div>
66
- <div class="block-description" id="BLOCKS_ON_TAP_DESCRIPTION">
67
- </div>
68
- </div>
69
- <div class="block-wrapper-right">
70
- <div class="block-title" id="BLOCKS_ON_TOUCH">
71
- </div>
72
- <div class="block-image-wrapper">
73
- <img class="block-image" src="images/onbump.png" alt="" />
74
- </div>
75
- <div class="block-description" id="BLOCKS_ON_TOUCH_DESCRIPTION">
76
- </div>
77
- </div>
78
- </div>
79
- <div class="block-wrapper">
80
- <div class="block-wrapper-left">
81
- <div class="block-title" id="BLOCKS_ON_MESSAGE">
82
- </div>
83
- <div class="block-image-wrapper">
84
- <img class="block-image" src="images/messagereceive.png" alt="" />
85
- </div>
86
- <div class="block-description" id="BLOCKS_ON_MESSAGE_DESCRIPTION">
87
- </div>
88
- </div>
89
- <div class="block-wrapper-right">
90
- <div class="block-title" id="BLOCKS_SEND_MESSAGE">
91
- </div>
92
- <div class="block-image-wrapper">
93
- <img class="block-image" src="images/messagesend.png" alt="" />
94
- </div>
95
- <div class="block-description" id="BLOCKS_SEND_MESSAGE_DESCRIPTION">
96
- </div>
97
- </div>
98
- </div>
99
- <div class="block-wrapper">
100
- <div class="block-wrapper-left">
101
- <div class="block-title" id="BLOCK_DESC_ON_STEER">
102
- </div>
103
- <div class="block-image-wrapper">
104
- <img class="block-image" src="images/steerleft.png" alt="" />
105
- </div>
106
- <div class="block-description" id="BLOCKS_ON_STEER_COG_DESCRIPTION">
107
- </div>
108
- </div>
109
- <div class="block-wrapper-right">
110
- <div class="block-title" id="BLOCK_DESC_MARTY_ON_COLOUR_SENSED">
111
- </div>
112
- <div class="block-image-wrapper">
113
- <img class="block-image" src="images/martycoloursensedblue.png" alt="" />
114
- </div>
115
- <div class="block-description" id="BLOCK_DESC_MARTY_ON_COLOUR_SENSED_DESCRIPTION">
116
- </div>
117
- </div>
118
- </div>
119
- <div class="block-wrapper">
120
- <div class="block-wrapper-left">
121
- <div class="block-title" id="BLOCK_DESC_MARTY_ON_OBSTACLE_SENSED">
122
- </div>
123
- <div class="block-image-wrapper">
124
- <img class="block-image" src="images/martyobstaclesensedobstaclesensed.png" alt="" />
125
- </div>
126
- <div class="block-description" id="BLOCK_DESC_MARTY_ON_OBSTACLE_SENSED_DESCRIPTION">
127
- </div>
128
- </div>
129
- <div class="block-wrapper-right">
130
- <div class="block-title" id="BLOCK_DESC_MARTY_ON_LIGHT_SENSED">
131
- </div>
132
- <div class="block-image-wrapper">
133
- <img class="block-image" src="images/martylightsensedhigh.png" alt="" />
134
- </div>
135
- <div class="block-description" id="BLOCK_DESC_MARTY_ON_LIGHT_SENSED_DESCRIPTION">
136
- </div>
137
- </div>
138
- </div>
139
- <div class="block-wrapper">
140
- <div class="block-wrapper-left">
141
- <div class="block-title" id="BLOCK_DESC_MARTY_ON_NOISE_SENSED">
142
- </div>
143
- <div class="block-image-wrapper">
144
- <img class="block-image" src="images/martynoisesensednoisesensed.png" alt="" />
145
- </div>
146
- <div class="block-description" id="BLOCK_DESC_MARTY_ON_NOISE_SENSED_DESCRIPTION">
147
- </div>
148
- </div>
149
- </div>
150
- <!-- Blue Blocks -->
151
- <div class="block-category-header" id="blue-block-category-header">
152
- </div>
153
- <div class="block-category-header-line" id="blue-block-category-header-line"></div>
154
- <div class="block-wrapper">
155
- <div class="block-wrapper-left">
156
- <div class="block-title" id="BLOCKS_MOVE_RIGHT">
157
- </div>
158
- <div class="block-image-wrapper">
159
- <img class="block-image" src="images/right.png" alt="" />
160
- </div>
161
- <div class="block-description" id="BLOCKS_MOVE_RIGHT_DESCRIPTION">
162
- </div>
163
- </div>
164
- <div class="block-wrapper-right">
165
- <div class="block-title" id="BLOCKS_MOVE_LEFT">
166
- </div>
167
- <div class="block-image-wrapper">
168
- <img class="block-image" src="images/left.png" alt="" />
169
- </div>
170
- <div class="block-description" id="BLOCKS_MOVE_LEFT_DESCRIPTION">
171
- </div>
172
- </div>
173
- </div>
174
- <div class="block-wrapper">
175
- <div class="block-wrapper-left">
176
- <div class="block-title" id="BLOCKS_MOVE_UP">
177
- </div>
178
- <div class="block-image-wrapper">
179
- <img class="block-image" src="images/up.png" alt="" />
180
- </div>
181
- <div class="block-description" id="BLOCKS_MOVE_UP_DESCRIPTION">
182
- </div>
183
- </div>
184
- <div class="block-wrapper-right">
185
- <div class="block-title" id="BLOCKS_MOVE_DOWN">
186
- </div>
187
- <div class="block-image-wrapper">
188
- <img class="block-image" src="images/down.png" alt="" />
189
- </div>
190
- <div class="block-description" id="BLOCKS_MOVE_DOWN_DESCRIPTION">
191
- </div>
192
- </div>
193
- </div>
194
- <div class="block-wrapper">
195
- <div class="block-wrapper-left">
196
- <div class="block-title" id="BLOCKS_TURN_RIGHT">
197
- </div>
198
- <div class="block-image-wrapper">
199
- <img class="block-image" src="images/turnright.png" alt="" />
200
- </div>
201
- <div class="block-description" id="BLOCKS_TURN_RIGHT_DESCRIPTION">
202
- </div>
203
- </div>
204
- <div class="block-wrapper-right">
205
- <div class="block-title" id="BLOCKS_TURN_LEFT">
206
- </div>
207
- <div class="block-image-wrapper">
208
- <img class="block-image" src="images/turnleft.png" alt="" />
209
- </div>
210
- <div class="block-description" id="BLOCKS_TURN_LEFT_DESCRIPTION">
211
- </div>
212
- </div>
213
- </div>
214
- <div class="block-wrapper">
215
- <div class="block-wrapper-left">
216
- <div class="block-title" id="BLOCKS_HOP">
217
- </div>
218
- <div class="block-image-wrapper">
219
- <img class="block-image" src="images/hop.png" alt="" />
220
- </div>
221
- <div class="block-description" id="BLOCKS_HOP_DESCRIPTION">
222
- </div>
223
- </div>
224
- <div class="block-wrapper-right">
225
- <div class="block-title" id="BLOCKS_GO_HOME">
226
- </div>
227
- <div class="block-image-wrapper">
228
- <img class="block-image" src="images/gohome.png" alt="" />
229
- </div>
230
- <div class="block-description" id="BLOCKS_GO_HOME_DESCRIPTION">
231
- </div>
232
- </div>
233
- </div>
234
- <!-- Purple Blocks -->
235
- <div class="block-category-header" id="purple-block-category-header">
236
- </div>
237
- <div class="block-category-header-line" id="purple-block-category-header-line"></div>
238
- <div class="block-wrapper">
239
- <div class="block-wrapper-left">
240
- <div class="block-title" id="BLOCKS_SET_PATTERN">
241
- </div>
242
- <div class="block-image-wrapper">
243
- <img class="block-image" src="images/patternrainbow.png" alt="" />
244
- </div>
245
- <div class="block-description" id="BLOCKS_SET_PATTERN_DESCRIPTION">
246
- </div>
247
- </div>
248
- <div class="block-wrapper-right">
249
- <div class="block-title" id="BLOCKS_SELECT_COLOUR">
250
- </div>
251
- <div class="block-image-wrapper">
252
- <img class="block-image" src="images/clearcolours.png" alt="" />
253
- </div>
254
- <div class="block-description" id="BLOCKS_SELECT_COLOUR_DESCRIPTION">
255
- </div>
256
- </div>
257
- </div>
258
- <div class="block-wrapper">
259
- <div class="block-wrapper-left">
260
- <div class="block-title" id="BLOCKS_SAY">
261
- </div>
262
- <div class="block-image-wrapper">
263
- <img class="block-image" src="images/say.png" alt="" />
264
- </div>
265
- <div class="block-description" id="BLOCKS_SAY_DESCRIPTION">
266
- </div>
267
- </div>
268
- <div class="block-wrapper-right">
269
- <div class="block-title" id="BLOCKS_GROW">
270
- </div>
271
- <div class="block-image-wrapper">
272
- <img class="block-image" src="images/grow.png" alt="" />
273
- </div>
274
- <div class="block-description" id="BLOCKS_GROW_DESCRIPTION">
275
- </div>
276
- </div>
277
- </div>
278
- <div class="block-wrapper">
279
- <div class="block-wrapper-left">
280
- <div class="block-title" id="BLOCKS_SHRINK">
281
- </div>
282
- <div class="block-image-wrapper">
283
- <img class="block-image" src="images/shrink.png" alt="" />
284
- </div>
285
- <div class="block-description" id="BLOCKS_SHRINK_DESCRIPTION">
286
- </div>
287
- </div>
288
- <div class="block-wrapper-right">
289
- <div class="block-title" id="BLOCKS_RESET_SIZE">
290
- </div>
291
- <div class="block-image-wrapper">
292
- <img class="block-image" src="images/reset.png" alt="" />
293
- </div>
294
- <div class="block-description" id="BLOCKS_RESET_SIZE_DESCRIPTION">
295
- </div>
296
- </div>
297
- </div>
298
- <div class="block-wrapper">
299
- <div class="block-wrapper-left">
300
- <div class="block-title" id="BLOCKS_HIDE">
301
- </div>
302
- <div class="block-image-wrapper">
303
- <img class="block-image" src="images/hide.png" alt="" />
304
- </div>
305
- <div class="block-description" id="BLOCKS_HIDE_DESCRIPTION">
306
- </div>
307
- </div>
308
- <div class="block-wrapper-right">
309
- <div class="block-title" id="BLOCKS_SHOW">
310
- </div>
311
- <div class="block-image-wrapper">
312
- <img class="block-image" src="images/show.png" alt="" />
313
- </div>
314
- <div class="block-description" id="BLOCKS_SHOW_DESCRIPTION">
315
- </div>
316
- </div>
317
- </div>
318
- <div class="block-category-header" id="green-block-category-header">
319
- </div>
320
- <div class="block-category-header-line" id="green-block-category-header-line"></div>
321
- <div class="block-wrapper">
322
- <div class="block-wrapper-left">
323
- <div class="block-title" id="BLOCK_PLAY_CONFUSION_SOUND">
324
- </div>
325
- <div class="block-image-wrapper">
326
- <img class="block-image" src="../assets/blockicons/MartyConfusion.svg" alt="" />
327
- </div>
328
- <div class="block-description" id="BLOCK_PLAY_CONFUSION_SOUND_DESCRIPTION">
329
- </div>
330
- </div>
331
- <div class="block-wrapper-right">
332
- <div class="block-title" id="BLOCK_PLAY_DISBELIEF_SOUND">
333
- </div>
334
- <div class="block-image-wrapper">
335
- <img class="block-image" src="../assets/blockicons/MartyDisbelief.svg" alt="" />
336
- </div>
337
- <div class="block-description" id="BLOCK_PLAY_DISBELIEF_SOUND_DESCRIPTION">
338
- </div>
339
- </div>
340
- </div>
341
- <div class="block-wrapper">
342
- <div class="block-wrapper-left">
343
- <div class="block-title" id="BLOCK_PLAY_EXCITEMENT_SOUND">
344
- </div>
345
- <div class="block-image-wrapper">
346
- <img class="block-image" src="../assets/blockicons/MartyExcitment.svg" alt="" />
347
- </div>
348
- <div class="block-description" id="BLOCK_PLAY_EXCITEMENT_SOUND_DESCRIPTION">
349
- </div>
350
- </div>
351
- <div class="block-wrapper-right">
352
- <div class="block-title" id="BLOCK_PLAY_NOWAY_SOUND">
353
- </div>
354
- <div class="block-image-wrapper">
355
- <img class="block-image" src="../assets/blockicons/MartyNoWay.svg" alt="" />
356
- </div>
357
- <div class="block-description" id="BLOCK_PLAY_NOWAY_SOUND_DESCRIPTION">
358
- </div>
359
- </div>
360
- </div>
361
- <div class="block-wrapper">
362
- <div class="block-wrapper-left">
363
- <div class="block-title" id="BLOCK_PLAY_NO_SOUND">
364
- </div>
365
- <div class="block-image-wrapper">
366
- <img class="block-image" src="../assets/blockicons/MartyNo.svg" alt="" />
367
- </div>
368
- <div class="block-description" id="BLOCK_PLAY_NO_SOUND_DESCRIPTION">
369
- </div>
370
- </div>
371
- <div class="block-wrapper-right">
372
- <div class="block-title" id="BLOCK_PLAY_WHISTLE_SOUND">
373
- </div>
374
- <div class="block-image-wrapper">
375
- <img class="block-image" src="../assets/blockicons/MartyWhistle.svg" alt="" />
376
- </div>
377
- <div class="block-description" id="BLOCK_PLAY_WHISTLE_SOUND_DESCRIPTION">
378
- </div>
379
- </div>
380
- </div>
381
- <div class="block-wrapper">
382
- <div class="block-wrapper-left">
383
- <div class="block-title" id="BLOCK_PLAY_NOTE">
384
- </div>
385
- <div class="block-image-wrapper">
386
- <img class="block-image" src="images/playnote.png" alt="" />
387
- </div>
388
- <div class="block-description" id="BLOCK_PLAY_NOTE_DESCRIPTION">
389
- </div>
390
- </div>
391
- </div>
392
- <div class="block-category-header" id="orange-block-category-header">
393
- </div>
394
- <div class="block-category-header-line" id="orange-block-category-header-line"></div>
395
- <div class="block-wrapper">
396
- <div class="block-wrapper-left">
397
- <div class="block-title" id="BLOCKS_WAIT">
398
- </div>
399
- <div class="block-image-wrapper">
400
- <img class="block-image" src="images/wait.png" alt="" />
401
- </div>
402
- <div class="block-description" id="BLOCKS_WAIT_DESCRIPTION">
403
- </div>
404
- </div>
405
- <div class="block-wrapper-right">
406
- <div class="block-title" id="BLOCKS_STOP">
407
- </div>
408
- <div class="block-image-wrapper">
409
- <img class="block-image" src="images/stop.png" alt="" />
410
- </div>
411
- <div class="block-description" id="BLOCKS_STOP_DESCRIPTION">
412
- </div>
413
- </div>
414
- </div>
415
- <div class="block-wrapper">
416
- <div class="block-wrapper-left">
417
- <div class="block-title" id="BLOCKS_SET_SPEED">
418
- </div>
419
- <div class="block-image-wrapper">
420
- <img class="block-image" src="images/speed.png" alt="" />
421
- </div>
422
- <div class="block-description" id="BLOCKS_SET_SPEED_DESCRIPTION">
423
- </div>
424
- </div>
425
- <div class="block-wrapper-right">
426
- <div class="block-title" id="BLOCKS_REPEAT">
427
- </div>
428
- <div class="block-image-wrapper">
429
- <img class="block-image-repeat" src="images/repeat.png" alt="" />
430
- </div>
431
- <div class="block-description-repeat" id="BLOCKS_REPEAT_DESCRIPTION">
432
- </div>
433
- </div>
434
- </div>
435
- <div class="block-category-header" id="red-block-category-header">
436
- </div>
437
- <div class="block-category-header-line" id="red-block-category-header-line"></div>
438
- <div class="block-wrapper">
439
- <div class="block-wrapper-left">
440
- <div class="block-title" id="BLOCKS_END">
441
- </div>
442
- <div class="block-image-wrapper">
443
- <img class="block-image" src="images/end.png" alt="" />
444
- </div>
445
- <div class="block-description" id="BLOCKS_END_DESCRIPTION">
446
- </div>
447
- </div>
448
- <div class="block-wrapper-right">
449
- <div class="block-title" id="BLOCKS_REPEAT_FOREVER">
450
- </div>
451
- <div class="block-image-wrapper">
452
- <img class="block-image" src="images/forever.png" alt="" />
453
- </div>
454
- <div class="block-description" id="BLOCKS_REPEAT_FOREVER_DESCRIPTION">
455
- </div>
456
- </div>
457
- </div>
458
- <div class="block-wrapper">
459
- <div class="block-wrapper-left">
460
- <div class="block-title" id="BLOCKS_GO_TO_PAGE">
461
- </div>
462
- <div class="block-image-wrapper">
463
- <img class="block-image" src="images/page.png" alt="" />
464
- </div>
465
- <div class="block-description" id="BLOCKS_GO_TO_PAGE_DESCRIPTION">
466
- </div>
467
- </div>
468
- </div>
11
+ <main id="content" class="blocks-guide-page">
12
+ <header class="blocks-guide-hero">
13
+ <div class="blocks-guide-hero-copy">
14
+ <p class="blocks-guide-eyebrow" id="blocks-guide-eyebrow"></p>
15
+ <h1 id="blocks-guide-title"></h1>
16
+ <p class="blocks-guide-introduction" id="blocks-guide-introduction"></p>
469
17
  </div>
18
+ <div class="blocks-guide-hero-summary" id="blocks-guide-summary" aria-hidden="true"></div>
19
+ </header>
20
+
21
+ <div class="blocks-guide-tabs-shell">
22
+ <div class="blocks-guide-tabs" id="blocks-guide-tabs" role="tablist"></div>
470
23
  </div>
471
- </div>
24
+
25
+ <div class="blocks-guide-panels" id="blocks-guide-panels"></div>
26
+
27
+ <section class="blocks-guide-extension" id="blocks-guide-extension"></section>
28
+ </main>
472
29
  </body>
473
30
  </html>