diff --git a/.github/workflows/specs.yml b/.github/workflows/specs.yml new file mode 100644 index 0000000000..a9dd5301ef --- /dev/null +++ b/.github/workflows/specs.yml @@ -0,0 +1,37 @@ +name: Run rspec tests + +on: + - pull_request + - push + - workflow_dispatch + +jobs: + a11y: + runs-on: ubuntu-latest + continue-on-error: true + # env: + # BUNDLE_GEMFILE: utilities/Gemfile + strategy: + matrix: + # The files in /bjc-r/course w/o a .html extension + # These correspond to rspec tags for each test run. + course: + - bjc4nyc + - bjc4nyc.es + - sparks + - bjc4nyc_teacher + - sparks-teacher + suite: + - wcag20 + - wcag22 + steps: + - uses: actions/checkout@v3 + - uses: ruby/setup-ruby@v1 + with: + # ruby-version: 3.2.2 + bundler-cache: true + - name: a11y tests + run: bundle exec rspec utilities/specs --tag ${{ matrix.course }}_${{ matrix.suite }} + - name: summary + if: always() + run: ruby utilities/specs/spec_summary.rb diff --git a/.gitignore b/.gitignore index 617a75c0d2..90526c0a91 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ *.log ._* .#* +tmp/ # IDE-Specific Files .project diff --git a/.rspec b/.rspec new file mode 100644 index 0000000000..08cae59ec5 --- /dev/null +++ b/.rspec @@ -0,0 +1 @@ +-f progress -f documentation --out tmp/rspec_output.txt -f json --out tmp/rspec_output.json -f html --out tmp/rspec_output.html diff --git a/Gemfile b/Gemfile deleted file mode 120000 index e9e778af86..0000000000 --- a/Gemfile +++ /dev/null @@ -1 +0,0 @@ -utilities/build-tools/Gemfile \ No newline at end of file diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000000..6dbbaa8550 --- /dev/null +++ b/Gemfile @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +# This Gemfile is for tests inside this repo. +# The `build-tools` directory has its own Gemfile for the build tools. + +# Install with: bundle install +source 'https://rubygems.org' + +ruby file: '.ruby-version' + +gem 'axe-core-capybara' +gem 'axe-core-rspec' +gem 'capybara' +gem 'capybara-screenshot' +gem 'nokogiri' +gem 'rack-jekyll' +gem 'rspec' +gem 'selenium-webdriver' +gem 'webdrivers' +gem 'webrick' diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 120000 index 969152c473..0000000000 --- a/Gemfile.lock +++ /dev/null @@ -1 +0,0 @@ -utilities/build-tools/Gemfile.lock \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000000..b920e8339b --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,235 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.8.6) + public_suffix (>= 2.0.2, < 6.0) + axe-core-api (4.9.1) + dumb_delegator + virtus + axe-core-capybara (4.9.1) + axe-core-api (= 4.9.1) + dumb_delegator + axe-core-rspec (4.9.1) + axe-core-api (= 4.9.1) + dumb_delegator + virtus + axiom-types (0.1.1) + descendants_tracker (~> 0.0.4) + ice_nine (~> 0.11.0) + thread_safe (~> 0.3, >= 0.3.1) + bigdecimal (3.1.8) + capybara (3.40.0) + addressable + matrix + mini_mime (>= 0.1.3) + nokogiri (~> 1.11) + rack (>= 1.6.0) + rack-test (>= 0.6.3) + regexp_parser (>= 1.5, < 3.0) + xpath (~> 3.2) + capybara-screenshot (1.0.26) + capybara (>= 1.0, < 4) + launchy + childprocess (5.0.0) + coercible (1.0.0) + descendants_tracker (~> 0.0.1) + colorator (1.1.0) + concurrent-ruby (1.3.3) + descendants_tracker (0.0.4) + thread_safe (~> 0.3, >= 0.3.1) + diff-lcs (1.5.1) + dumb_delegator (1.0.0) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + eventmachine (1.2.7) + ffi (1.17.0-aarch64-linux-gnu) + ffi (1.17.0-aarch64-linux-musl) + ffi (1.17.0-arm-linux-gnu) + ffi (1.17.0-arm-linux-musl) + ffi (1.17.0-arm64-darwin) + ffi (1.17.0-x86-linux-gnu) + ffi (1.17.0-x86-linux-musl) + ffi (1.17.0-x86_64-darwin) + ffi (1.17.0-x86_64-linux-gnu) + ffi (1.17.0-x86_64-linux-musl) + forwardable-extended (2.6.0) + google-protobuf (4.27.1) + bigdecimal + rake (>= 13) + google-protobuf (4.27.1-aarch64-linux) + bigdecimal + rake (>= 13) + google-protobuf (4.27.1-arm64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.27.1-x86-linux) + bigdecimal + rake (>= 13) + google-protobuf (4.27.1-x86_64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.27.1-x86_64-linux) + bigdecimal + rake (>= 13) + http_parser.rb (0.8.0) + i18n (1.14.5) + concurrent-ruby (~> 1.0) + ice_nine (0.11.2) + jekyll (4.3.3) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (>= 2.0, < 4.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.3, >= 2.3.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (>= 0.3.6, < 0.5) + pathutil (~> 0.9) + rouge (>= 3.0, < 5.0) + safe_yaml (~> 1.0) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) + jekyll-sass-converter (3.0.0) + sass-embedded (~> 1.54) + jekyll-watch (2.2.1) + listen (~> 3.0) + kramdown (2.4.0) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + launchy (3.0.1) + addressable (~> 2.8) + childprocess (~> 5.0) + liquid (4.0.4) + listen (3.9.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + matrix (0.4.2) + mercenary (0.4.0) + mini_mime (1.1.5) + nokogiri (1.16.6-aarch64-linux) + racc (~> 1.4) + nokogiri (1.16.6-arm-linux) + racc (~> 1.4) + nokogiri (1.16.6-arm64-darwin) + racc (~> 1.4) + nokogiri (1.16.6-x86-linux) + racc (~> 1.4) + nokogiri (1.16.6-x86_64-darwin) + racc (~> 1.4) + nokogiri (1.16.6-x86_64-linux) + racc (~> 1.4) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (5.1.1) + racc (1.8.0) + rack (1.6.13) + rack-jekyll (0.5.0) + jekyll (>= 1.3) + listen (>= 1.3) + rack (~> 1.5) + rack-test (2.1.0) + rack (>= 1.3) + rake (13.2.1) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) + regexp_parser (2.9.2) + rexml (3.3.2) + strscan + rouge (4.3.0) + rspec (3.13.0) + rspec-core (~> 3.13.0) + rspec-expectations (~> 3.13.0) + rspec-mocks (~> 3.13.0) + rspec-core (3.13.0) + rspec-support (~> 3.13.0) + rspec-expectations (3.13.1) + diff-lcs (>= 1.2.0, < 2.0) + rspec-support (~> 3.13.0) + rspec-mocks (3.13.1) + diff-lcs (>= 1.2.0, < 2.0) + rspec-support (~> 3.13.0) + rspec-support (3.13.1) + rubyzip (2.3.2) + safe_yaml (1.0.5) + sass-embedded (1.77.5-aarch64-linux-gnu) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.77.5-aarch64-linux-musl) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.77.5-arm-linux-gnueabihf) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.77.5-arm-linux-musleabihf) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.77.5-arm64-darwin) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.77.5-x86-linux-gnu) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.77.5-x86-linux-musl) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.77.5-x86_64-darwin) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.77.5-x86_64-linux-gnu) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.77.5-x86_64-linux-musl) + google-protobuf (>= 3.25, < 5.0) + selenium-webdriver (4.10.0) + rexml (~> 3.2, >= 3.2.5) + rubyzip (>= 1.2.2, < 3.0) + websocket (~> 1.0) + strscan (3.1.0) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) + thread_safe (0.3.6) + unicode-display_width (2.5.0) + virtus (2.0.0) + axiom-types (~> 0.1) + coercible (~> 1.0) + descendants_tracker (~> 0.0, >= 0.0.3) + webdrivers (5.3.1) + nokogiri (~> 1.6) + rubyzip (>= 1.3.0) + selenium-webdriver (~> 4.0, < 4.11) + webrick (1.8.1) + websocket (1.2.10) + xpath (3.2.0) + nokogiri (~> 1.8) + +PLATFORMS + aarch64-linux + aarch64-linux-gnu + aarch64-linux-musl + arm-linux + arm-linux-gnu + arm-linux-gnueabihf + arm-linux-musl + arm-linux-musleabihf + arm64-darwin + x86-linux + x86-linux-gnu + x86-linux-musl + x86_64-darwin + x86_64-linux + x86_64-linux-gnu + x86_64-linux-musl + +DEPENDENCIES + axe-core-capybara + axe-core-rspec + capybara + capybara-screenshot + nokogiri + rack-jekyll + rspec + selenium-webdriver + webdrivers + webrick + +RUBY VERSION + ruby 3.2.2p53 + +BUNDLED WITH + 2.5.6 diff --git a/css/bjc.css b/css/bjc.css index c08c088b0c..5524c48806 100755 --- a/css/bjc.css +++ b/css/bjc.css @@ -10,6 +10,7 @@ h4, h5, h6 { font-family: "work_sansregular", "Open Sans", sans-serif; + color: #000; } .anchor { @@ -18,12 +19,22 @@ h6 { } a:visited { - color: #248694; + color: #106070; /* darkened for a11y. */ + /* color: #248694; */ } a, .dialogue a { - color: #2a6496; + /* color: #28499F; */ + color: #3056AA; + /* color: #2a6496; */ + /* TODO-A11Y: We need to find better contrasting colors, or make links visual. */ + /* text-decoration: underline; */ +} + +a.btn, +.dialogue a.btn { + text-decoration: none } /* development comments are hidden by default. @@ -253,7 +264,7 @@ var { } .todo:before { - font-size: 18px; + font-size: 20px; font-weight: bold; } @@ -332,6 +343,32 @@ img.noshadow { filter: none; } +/*** OPEN/CLOSE Sections */ +/* This is the text that allows you to expand/collapse contet. */ +summary.disclosure-heading { + font-weight: bold; + font-size: 14pt; + cursor: pointer; + color: #285a8c; +} + +details > summary::after { + content: " ▸"; + font-size: 1.2rem; + text-decoration: none; +} + +details[open] > summary::after { + content: " ▾"; + font-size: 1.2rem; + text-decoration: none; +} + +/* Hide Safari's disclosure triangle before the text. */ +summary::-webkit-details-marker { + display: none; +} + /* Used in teaching guide */ .apStandards, .Standards { @@ -426,7 +463,7 @@ img.noshadow { } .atwork, .atworkFullWidth { - background-color: #fcc589; + background-color: #fcc890; } .vocab, .vocabBig, @@ -477,7 +514,6 @@ div.comment, } .forYouToDo:before, -.forYouToDoHeader, .ifTime:before, .dialogue:before, .takeItFurther:before, @@ -495,7 +531,7 @@ div.comment, .vocabSummary ):not(.pseudop):not(.bordered-table), .time:before { - font-size: 18px; + font-size: 20px; font-weight: bold; line-height: 2.5em; } @@ -540,10 +576,6 @@ div.comment, width: 9em; } -.forYouToDoHeader { - text-indent: -40px; -} - .forYouToDo { margin-bottom: 0.5em; } @@ -727,6 +759,11 @@ html[lang="es"] .time:before { content: "Si tienes poco tiempo, puedes avanzar..."; } +/* Orange blobs with text overlays. */ +.saveAs { + color: #333; +} + div.saveAs img { position: relative; z-index: 1; @@ -737,7 +774,6 @@ div.saveAs span.text { margin-left: 182px; padding-top: 1.05em; z-index: 2; - color: #333; } html[lang="es"] div.saveAs span.text { @@ -745,7 +781,6 @@ html[lang="es"] div.saveAs span.text { margin-left: 211px; padding-top: 1.13em; z-index: 2; - color: #333; } div.newProject span.text { @@ -753,7 +788,6 @@ div.newProject span.text { margin-left: 323px; padding-top: 1.05em; z-index: 2; - color: #333; } html[lang="es"] div.newProject span.text { @@ -761,7 +795,6 @@ html[lang="es"] div.newProject span.text { margin-left: 445px; padding-top: 1.18em; z-index: 2; - color: #333; } /* Gifffer Library */ @@ -1049,7 +1082,8 @@ table.videos td { /* TODO: Refactor to use bs collapse + delete arrows */ a.expansion-menu h4, a.expansion-menu { - color: #2a6496; + color: #28499F; + /* color: #2a6496; */ } a.expansion-menu:visited h4, a.expansion-menu:visited { @@ -1098,3 +1132,17 @@ div.index-letter-target p { div.index-letter-target li { margin-left: 25px; } + + +/* A little rounded rect showing whatever is specified as the background color. + Use in HTML as
*/ +.color-swatch { + box-sizing: border-box; + display: inline-block; + margin: 2px; + vertical-align: sub; + width: 1.1rem; + height: 1.1rem; + border-radius: 4px; + border: 1px solid black; +} diff --git a/css/edcdevtech-headerfooter.css b/css/edcdevtech-headerfooter.css index 030cbad5d3..f313d6412a 100644 --- a/css/edcdevtech-headerfooter.css +++ b/css/edcdevtech-headerfooter.css @@ -39,7 +39,7 @@ header { .site-title { font-family: 'work_sansregular', Helvetica, Arial, sans-serif; - font-size: 1.6em; + font-size: 1.6rem; font-weight: bold; color: #FFF; text-decoration: none; @@ -48,8 +48,10 @@ header { .txtTitle { display: block; + font-size: 1.6rem; /* unset h1 size to be smaller. */ + font-weight: 700; padding-left: 88px; - margin-top: 7px; + margin: 7px 0 0 0; } .title-small-screen { diff --git a/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html b/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html index 17232262d4..e18153d97c 100644 --- a/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html +++ b/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html @@ -11,13 +11,13 @@

Saving Snap! Projects

On this page, you'll learn how to save Snap! projects.

- +
  1. There are different ways to save Snap! projects. Some of them involve logging in or creating a Snap! account. Your teacher will let you know which option to use.
    -

    Option A: Save your project to your computer

    +
    Option A: Save your project to your computer
    You can save this file to your computer, a USB drive, Google Drive, or any other place you keep files.
    @@ -28,7 +28,7 @@

    Option A: Save your project to your computer

    -

    Option B: Your teacher has set up an account for you

    +
    Option B: Your teacher has set up an account for you
    Your teacher will let you know your Snap! username and password. If you ever need to reset your password, the request will go to your teacher.
    @@ -52,7 +52,7 @@

    Option B: Your teacher has set up an account for you

    -

    Option C: Create a Snap! account with a personal email

    +
    Option C: Create a Snap! account with a personal email
    This is a Snap! account where any password reset requests will go to your personal email account. Your teacher may ask you to use their email address.
    @@ -79,7 +79,7 @@

    Option C: Create a Snap! account with a personal email
  2. Once you have saved your Click Alonzo project to your computer or to your account, you can continue to the next page.

-
+
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.es.html b/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.es.html index e9eba16133..b746ea4531 100644 --- a/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.es.html +++ b/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.es.html @@ -60,7 +60,7 @@

Explorar bloques personalizados

AAP-3.B.6, DAT-1.A.5
-

Abstracción es la idea fundamental en las ciencias de la computación, aunque es difícil de definir hasta que no veamos algunos ejemplos. La idea más básica de abstracción es la de dar un nombre a algo en un programa. Por ejemplo, en este ejercicio le hemos dado el nombre quien a la idea "selecciona un elemento de forma aleatoria desde una lista de personas (o gatos)." A esto se le conoce como abstracción procedimental ya que utilizamos un procedimiento (un bloque) para representar la idea. De esta forma hacemos más fácil la lectura del código. Vamos a ver otras formas de abstracción más adelante.

+

Abstracción es la idea fundamental en las ciencias de la computación, aunque es difícil de definir hasta que no veamos algunos ejemplos. La idea más básica de abstracción es la de dar un nombre a algo en un programa. Por ejemplo, en este ejercicio le hemos dado el nombre quien a la idea "selecciona un elemento de forma aleatoria desde una lista de personas (o gatos)." A esto se le conoce como abstracción procedimental ya que utilizamos un procedimiento (un bloque) para representar la idea. De esta forma hacemos más fácil la lectura del código. Vamos a ver otras formas de abstracción más adelante.

AAP-3.B.7
diff --git a/cur/programming/1-introduction/3-drawing/6-the-for-block.es.html b/cur/programming/1-introduction/3-drawing/6-the-for-block.es.html index 1b53a2e368..0dde826f55 100755 --- a/cur/programming/1-introduction/3-drawing/6-the-for-block.es.html +++ b/cur/programming/1-introduction/3-drawing/6-the-for-block.es.html @@ -53,7 +53,7 @@

Iterar con un contador

para (i)= (1) hasta (10) {decir (i) por (2) segs}

Cada vez que el bloque para ejecuta el código en su interior, incrementa el valor del contador en 1, empezando con el primer valor y terminando en el último valor que aparece (en el ejemplo el 10).

-
El bloque para define con i (letra i significa "índice") el nombre de contador de forma predeterminada. Puedes cambiar el nombre haciendo clic sobre él. Para usar el contador, arrástralo a la ubicación requerida.
+
El bloque para define con i (letra i significa "índice") el nombre de contador de forma predeterminada. Puedes cambiar el nombre haciendo clic sobre él. Para usar el contador, arrástralo a la ubicación requerida.
    diff --git a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.es.html b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.es.html index b1de221519..10446f3aca 100644 --- a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.es.html +++ b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.es.html @@ -116,8 +116,8 @@

    Especificación de un tipo de entrada

  • - Crea una variable global para almacenar los elementos de tu prueba e inicialízalo como una lista de elementos, utilizando su constructor cuando corresponda.
    • - + Crea una variable global para almacenar los elementos de tu prueba e inicialízalo como una lista de elementos, utilizando su constructor cuando corresponda. +
    Snap! tiene dos vistas diferentes para listas dentro de listas. Puedes cambiar la vista que ves haciendo clic con el botón derecho (o control-clic) en el observador cuestionario (o el nombre que le hayas dado a la variable) en el escenario.
    diff --git a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html index b67e7a19ab..09704e54ff 100644 --- a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html +++ b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html @@ -117,7 +117,7 @@

    Specifying an Input Type

  • - Create a global variable to store your quiz items and initialize it as a list of items, using your constructor where appropriate.
    • + Create a global variable to store your quiz items and initialize it as a list of items, using your constructor where appropriate.
    Snap! has two different views for lists within lists. You can switch which view you see by right-clicking (or control-clicking) on the quiz watcher (or whatever you called the variable) on the stage. diff --git a/cur/programming/2-complexity/optional-projects/1-magic8ball.es.html b/cur/programming/2-complexity/optional-projects/1-magic8ball.es.html index 3c23edbc99..13a4841520 100644 --- a/cur/programming/2-complexity/optional-projects/1-magic8ball.es.html +++ b/cur/programming/2-complexity/optional-projects/1-magic8ball.es.html @@ -23,7 +23,7 @@

    Adivino automático

    1. Crea tu propia aplicación de adivinación. Puedes personalizarla como quieras. Por ejemplo, puedes crear tus propios mensajes.
      2. -

      Puede que necesites consultar la Entrada de Wikipedia para Magic 8 Ball® para conocer algunas respuestas posibles que la aplicación podría dar a una pregunta de sí/no. Observa que de las veinte posibles respuestas enumeradas, diez son afirmativas (verde), cinco son evasivas (amarillo) y cinco son negativas (rojo).

      +

      Puede que necesites consultar la Entrada de Wikipedia para Magic 8 Ball® para conocer algunas respuestas posibles que la aplicación podría dar a una pregunta de sí/no. Observa que de las veinte posibles respuestas enumeradas, diez son afirmativas (verde), cinco son evasivas (amarillo) y cinco son negativas (rojo).

    diff --git a/cur/programming/2-complexity/optional-projects/1-magic8ball.html b/cur/programming/2-complexity/optional-projects/1-magic8ball.html index 8e3496a901..ce4529496b 100644 --- a/cur/programming/2-complexity/optional-projects/1-magic8ball.html +++ b/cur/programming/2-complexity/optional-projects/1-magic8ball.html @@ -23,7 +23,7 @@

    Automated Fortune Teller

    1. Create your own fortune-telling app. You can personalize it as you like. For example, you might create your own messages.
      2. -

      You may wish to look at the Wikipedia entry for Magic 8 Ball® for some possible responses that the app could give to a yes/no question. Notice that of the twenty possible answers listed, ten are affirmative (green), five are non-committal (yellow), and five are negative (red).

      +

      You may wish to look at the Wikipedia entry for Magic 8 Ball® for some possible responses that the app could give to a yes/no question. Notice that of the twenty possible answers listed, ten are affirmative (green), five are non-committal (yellow), and five are negative (red).

    diff --git a/cur/programming/3-lists/2-contact-list/5-mapping-over-list.html b/cur/programming/3-lists/2-contact-list/5-mapping-over-list.html index 9f7c7f083b..1710c57cd7 100644 --- a/cur/programming/3-lists/2-contact-list/5-mapping-over-list.html +++ b/cur/programming/3-lists/2-contact-list/5-mapping-over-list.html @@ -251,29 +251,32 @@

    Transforming Every List Item

    map (sqrt of()) over (squares)
    Correct.
    -
    +
    keep items (()mod(2)=0) from (squares)
    -
    +
    combine (squares) using (()+())
    -
    +
    keep items (letter (length of ()) of () = 1) from (squares)
    -
    +
    combine (squares) using (join ()()) items of
    -
    +
    map ((0)-()) over (squares)
    +
    +
    +
    diff --git a/cur/programming/5-algorithms/1-searching-lists/3-spell-checker.es.html b/cur/programming/5-algorithms/1-searching-lists/3-spell-checker.es.html index 170809e569..e2510271a2 100755 --- a/cur/programming/5-algorithms/1-searching-lists/3-spell-checker.es.html +++ b/cur/programming/5-algorithms/1-searching-lists/3-spell-checker.es.html @@ -88,17 +88,17 @@

    ¿Está deletreado correctamente "seperar"?

    - + - + - + diff --git a/cur/programming/5-algorithms/1-searching-lists/3-spell-checker.html b/cur/programming/5-algorithms/1-searching-lists/3-spell-checker.html index 55fb9ab572..3fc25549ba 100755 --- a/cur/programming/5-algorithms/1-searching-lists/3-spell-checker.html +++ b/cur/programming/5-algorithms/1-searching-lists/3-spell-checker.html @@ -88,17 +88,17 @@

    TG and solutions need to be checked. --MF, 12/19/18

      encuentra un valor encuentra muchos valores
    Datos ordenadosDatos ordenados puedes usar búsqueda binaria debes usar búsqueda lineal
    Datos desordenadosDatos desordenados debes usar búsqueda lineal debes usar búsqueda lineal
    - + - + - + diff --git a/cur/programming/5-algorithms/1-searching-lists/8-sequential.es.html b/cur/programming/5-algorithms/1-searching-lists/8-sequential.es.html index 05a365a91a..49b6feee64 100644 --- a/cur/programming/5-algorithms/1-searching-lists/8-sequential.es.html +++ b/cur/programming/5-algorithms/1-searching-lists/8-sequential.es.html @@ -298,25 +298,25 @@

    Paralelismo

    -
    \frac{18}{14}
    +
    \frac{18}{14}
    -
    \frac{14}{18}
    +
    \frac{14}{18}
    -
    \frac{18}{6}
    +
    \frac{18}{6}
    -
    \frac{18}{8}
    +
    \frac{18}{8}
    diff --git a/cur/programming/5-algorithms/1-searching-lists/8-sequential.html b/cur/programming/5-algorithms/1-searching-lists/8-sequential.html index 5260c18247..6ed04ca4ee 100644 --- a/cur/programming/5-algorithms/1-searching-lists/8-sequential.html +++ b/cur/programming/5-algorithms/1-searching-lists/8-sequential.html @@ -296,25 +296,25 @@

    Parallelism

    -
    \frac{18}{14}
    +
    \frac{18}{14}
    -
    \frac{14}{18}
    +
    \frac{14}{18}
    -
    \frac{18}{6}
    +
    \frac{18}{6}
    -
    \frac{18}{8}
    +
    \frac{18}{8}
    diff --git a/cur/programming/5-algorithms/3-turning-data-information/1-health-data.es.html b/cur/programming/5-algorithms/3-turning-data-information/1-health-data.es.html index 05729b4286..da8460dde8 100644 --- a/cur/programming/5-algorithms/3-turning-data-information/1-health-data.es.html +++ b/cur/programming/5-algorithms/3-turning-data-information/1-health-data.es.html @@ -32,7 +32,7 @@

    Análisis de los datos de la salud mundial

  • ¿Qué indica el tamaño de cada punto?
  • Qué hace el deslizador de la parte inferior?
    • - +
  • Habla con tu compañero diff --git a/cur/programming/5-algorithms/3-turning-data-information/1-health-data.html b/cur/programming/5-algorithms/3-turning-data-information/1-health-data.html index b39f9b78a8..60b7199b7b 100644 --- a/cur/programming/5-algorithms/3-turning-data-information/1-health-data.html +++ b/cur/programming/5-algorithms/3-turning-data-information/1-health-data.html @@ -32,7 +32,7 @@

    Analyzing Global Health Data

  • What does the size of each point indicate?
  • What does the slider at the bottom do?
    • - +
  • Talk with Your Partner diff --git a/cur/programming/6-computers/1-abstraction/07-digital-components.es.html b/cur/programming/6-computers/1-abstraction/07-digital-components.es.html index e5990140cb..a6f3e84163 100644 --- a/cur/programming/6-computers/1-abstraction/07-digital-components.es.html +++ b/cur/programming/6-computers/1-abstraction/07-digital-components.es.html @@ -23,80 +23,84 @@

    Dominio digital: Componentes

  • Pasa el ratón sobre los números para conocer cada uno de los componentes de la computadora. (O descarga este PDF de componentes de computadoras.)
    • - -

    Escáner: Un dispositivo de entrada que puede convertir el contenido de un documento en papel en una imagen digital que puede almacenarse en la computadora.

    + +

    Escáner: Un dispositivo de entrada que puede convertir el contenido de un documento en papel en una imagen digital que puede almacenarse en la computadora.

    - -

    + +

    CPU (Unidad central de procesamiento) o el procesador: El "cerebro" de la computadora donde se ejecutan los programas. Es una de las partes más costosas del hardware. Las CPU modernas pueden realizar múltiples tareas simultáneamente.
    CPU
    Crédito de la imagen: usuario de Wikipedia Solipsist

    - -

    + +

    RAM (memoria de acceso aleatorio): La memoria de alta velocidad y a corto plazo de la computadora. Almacena temporalmente datos e instrucciones para programas que se ejecutan en la computadora.
    RAM
    Crédito de la imagen: usuario de Wikipedia Cyberdex

    - -

    + +

    Tarjetas de expansión: Placas de circuito que se pueden insertar para agregar funcionalidad a un sistema de computadora (por ejemplo: tarjetas de red, sonido o video).
    Tarjeta de expansion
    Crédito de la imagen: usuario de Wikipedia Rackmount-guy

    - -

    Fuente de alimentación: Convierte la electricidad de la pared a la forma que usan los otros componentes de la computadora.

    + +

    Fuente de alimentación: Convierte la electricidad de la pared a la forma que usan los otros componentes de la computadora.

    - -

    Unidad óptica: Un dispositivo de entrada/salida que lee y escribe datos en CD y DVD.

    + +

    Unidad óptica: Un dispositivo de entrada/salida que lee y escribe datos en CD y DVD.

    - -

    + +

    Disco duro: Un dispositivo de entrada/salida que sirve como memoria de almacenamiento a largo plazo de la computadora. Hay dos tipos principales: unidades mecánicas que usan un brazo mecánico para leer y escribir datos en un disco giratorio (que se muestra a continuación) y unidades de "estado sólido" que no tienen partes móviles.
    Disco duro
    Crédito de video: usuario de Wikipedia Peter17

    - -

    + +

    Tarjeta madre: También conocida como placa base, es una placa de circuito que contiene y conecta varios componentes de la computadora y permite su comunicación.
    tarjeta madre
    Crédito de la imagen: usuario de Wikipedia Julianprescott2604juuly.

    - -

    Altavoz: Un dispositivo de entrada/salida que emite sonido desde la computadora.

    + +

    Altavoz: Un dispositivo de entrada/salida que emite sonido desde la computadora.

    - -

    Monitor: Un dispositivo de entrada/salida que muestra información visualmente. En general, los monitores son dispositivos de salida donde la computadora muestra visualmente información. Las pantallas táctiles combinan las funciones de salida y entrada.

    + +

    Monitor: Un dispositivo de entrada/salida que muestra información visualmente. En general, los monitores son dispositivos de salida donde la computadora muestra visualmente información. Las pantallas táctiles combinan las funciones de salida y entrada.

    - -

    Teclado: Un dispositivo de entrada en el que el usuario puede escribir para comunicarse con la computadora.

    + +

    Teclado: Un dispositivo de entrada en el que el usuario puede escribir para comunicarse con la computadora.

    - -

    Ratón: Un dispositivo de entrada que permite al usuario interactuar con objetos visuales que se muestran en el monitor.

    + +

    Ratón: Un dispositivo de entrada que permite al usuario interactuar con objetos visuales que se muestran en el monitor.

    - -

    Disco duro externo: Un dispositivo de entrada/salida que sirve como disco duro extra utilizado para almacenamiento adicional o de respaldo.

    + +

    Disco duro externo: Un dispositivo de entrada/salida que sirve como disco duro extra utilizado para almacenamiento adicional o de respaldo.

    - -

    Impresora: Un dispositivo de salida que puede transferir datos digitales a papel.

    + +

    Impresora: Un dispositivo de salida que puede transferir datos digitales a papel.
    Crédito de imagen: Usuario de Wikipedia HereToHelp
    diff --git a/cur/programming/6-computers/1-abstraction/07-digital-components.html b/cur/programming/6-computers/1-abstraction/07-digital-components.html index 172f7356cc..22bd15c6ef 100644 --- a/cur/programming/6-computers/1-abstraction/07-digital-components.html +++ b/cur/programming/6-computers/1-abstraction/07-digital-components.html @@ -27,12 +27,12 @@

    The Digital Domain: Components

  • Hover the mouse over the numbers to learn about each of the computer components. (Or download this Computer Components PDF.)
    • - -

    Scanner: An input device that can convert the contents of a paper document into a digital image that can be stored in the computer.

    + +

    Scanner: An input device that can convert the contents of a paper document into a digital image that can be stored in the computer.

    - -

    + +

    CPU (Central Processing Unit) or the processor: The "brain" of the computer where programs are run. It is one of the most expensive parts of the hardware. Modern CPUs can perform multiple tasks simultaneously.
    CPU
    @@ -40,8 +40,8 @@

    The Digital Domain: Components

    - -

    + +

    RAM (Random Access Memory): The computer's high-speed, short-term memory. It temporarily stores data and instructions for programs that run on the computer.
    RAM
    @@ -49,8 +49,8 @@

    The Digital Domain: Components

    - -

    + +

    Expansion cards: Circuit boards that can be inserted to add functionality to a computer system (for example: network, sound, or video cards).
    Expansion Card
    @@ -58,16 +58,16 @@

    The Digital Domain: Components

    - -

    Power supply: Converts electricity from the wall into the form that the other computer components use.

    + +

    Power supply: Converts electricity from the wall into the form that the other computer components use.

    - -

    Optical Drive: An input/output device that reads data from and writes data to CDs and DVDs.

    + +

    Optical Drive: An input/output device that reads data from and writes data to CDs and DVDs.

    - -

    + +

    Hard Drive: An input/output device that serves as the long-term storage memory of the computer. There are two primary kinds: mechanical drives that use a mechanical arm to read and write data on a rotating disk (shown below), and "solid state" drives that have no moving parts. .
    Hard drive
    @@ -75,8 +75,8 @@

    The Digital Domain: Components

    - -

    + +

    Motherboard: A circuit board that holds and connects various components of the computer and allows their communication.
    Motherboard
    @@ -84,28 +84,28 @@

    The Digital Domain: Components

    - -

    Speaker: An input/output device that outputs sound from the computer.

    + +

    Speaker: An input/output device that outputs sound from the computer.

    - -

    Monitor: An input/output device that displays information visually. Generally, monitors are output devices where the computer visually displays information. Touchscreens combine the functions of output and input.

    + +

    Monitor: An input/output device that displays information visually. Generally, monitors are output devices where the computer visually displays information. Touchscreens combine the functions of output and input.

    - -

    Keyboard: An input device on which the user can type to communicate with the computer.

    + +

    Keyboard: An input device on which the user can type to communicate with the computer.

    - -

    Mouse: An input device that allows the user to interact with visual objects displayed on the monitor.

    + +

    Mouse: An input device that allows the user to interact with visual objects displayed on the monitor.

    - -

    External Hard Drive: An input/output device that serves as an extra hard drive used for additional or backup storage.

    + +

    External Hard Drive: An input/output device that serves as an extra hard drive used for additional or backup storage.

    - -

    Printer: An output device that can transfer digital data onto paper.

    + +

    Printer: An output device that can transfer digital data onto paper.
    Image credit: Wikipedia user HereToHelp
    diff --git a/cur/programming/6-computers/1-abstraction/09-digital-logic-gates.es.html b/cur/programming/6-computers/1-abstraction/09-digital-logic-gates.es.html index 0f9b024eac..ccb00f2621 100644 --- a/cur/programming/6-computers/1-abstraction/09-digital-logic-gates.es.html +++ b/cur/programming/6-computers/1-abstraction/09-digital-logic-gates.es.html @@ -296,8 +296,16 @@

    Compuertas lógicas

    Este problema es probablemente más difícil que algo que verás en el examen, así que si puedes con este, ¡lo estás haciendo muy bien!
      find one value find many values
    sorted datasorted data can use binary search must use linear search
    unsorted dataunsorted data must use linear search must use linear search
    - - + +
  • diagrama de compuerta lógica de (no ((T y F)) o (T y F))
  • diagrama de compuerta lógica de ((T o F) y (no (T o F)))
    		•  +
      +
    1. diagrama de compuerta lógica de (no ((T y F)) o (T y F))
      2. +
    +     		+
      +
    1. diagrama de compuerta lógica de ((T o F) y (no (T o F)))
      2. +
    +
    diff --git a/cur/programming/6-computers/1-abstraction/09-digital-logic-gates.html b/cur/programming/6-computers/1-abstraction/09-digital-logic-gates.html index 03dd362b94..0869a76515 100644 --- a/cur/programming/6-computers/1-abstraction/09-digital-logic-gates.html +++ b/cur/programming/6-computers/1-abstraction/09-digital-logic-gates.html @@ -302,15 +302,21 @@

    Logic Gates

    hasinlinefeedback="true" maxchoices="1" responseIdentifier="ri2" shuffle="false">
    Which of the following logic circuits will report true? (T stands for true, and F stands for false.) -
      -
      This problem is probably harder than something you'll see on the exam, so if you can get this one, you are doing great!
      - - - - - -
    1. logic gate diagram of (not ((T and F)) or (T and F))
    2. logic gate diagram of ((T or F) and (not (T or F)))
      3. -
    +
    This problem is probably harder than something you'll see on the exam, so if you can get this one, you are doing great!
    + + + + + +
    +
      +
    1. logic gate diagram of (not ((T and F)) or (T and F))
      2. +
    +     		+
      +
    1. logic gate diagram of ((T or F) and (not (T or F)))
      2. +
    +
    I only
    diff --git a/cur/programming/6-computers/2-history-impact/1-timeline.es.html b/cur/programming/6-computers/2-history-impact/1-timeline.es.html index a1a4af2c63..31736dbb5e 100644 --- a/cur/programming/6-computers/2-history-impact/1-timeline.es.html +++ b/cur/programming/6-computers/2-history-impact/1-timeline.es.html @@ -72,7 +72,7 @@

    El planetario mecánico (c. 100 a.C.)

    La máquina diferencial (c. 1822)

    - En 1822, Charles Babbage diseñó un dispositivo al que llamó "Máquina diferencial". Hecho de engranajes metálicos fabricados con precisión, calcularía e imprimiría tablas de números, como funciones de registro o de trigonometría. Lee más en la página de arquitectura digital. + En 1822, Charles Babbage diseñó un dispositivo al que llamó "Máquina diferencial". Hecho de engranajes metálicos fabricados con precisión, calcularía e imprimiría tablas de números, como funciones de registro o de trigonometría. Lee más en la página de arquitectura digital.

    diff --git a/cur/programming/summaries/assessment-data3.html b/cur/programming/summaries/assessment-data3.html index 01735458c8..c2e6d116ac 100755 --- a/cur/programming/summaries/assessment-data3.html +++ b/cur/programming/summaries/assessment-data3.html @@ -104,29 +104,32 @@

    Lab 2: Contact List

    map (sqrt of()) over (squares)
    -
    +
    keep items such that (()mod(2)=0) from (squares)
    -
    +
    combine with (()+()) items of (squares)
    -
    +
    keep items such that (letter (length of ()) of () = 1) from (squares)
    -
    +
    combine with (join ()()) items of (squares)
    -
    +
    map ((0)-()) over (squares)
    +
    +
    +
    diff --git a/cur/programming/summaries/assessment-data5.html b/cur/programming/summaries/assessment-data5.html index b26588a1ea..b0c43cdb6a 100755 --- a/cur/programming/summaries/assessment-data5.html +++ b/cur/programming/summaries/assessment-data5.html @@ -259,25 +259,25 @@

    Lab 1: Search Algorithms and Efficiency

    -
    \frac{18}{14}
    +
    \frac{18}{14}
    -
    \frac{14}{18}
    +
    \frac{14}{18}
    -
    \frac{18}{6}
    +
    \frac{18}{6}
    -
    \frac{18}{8}
    +
    \frac{18}{8}
    diff --git a/cur/programming/summaries/assessment-data6.html b/cur/programming/summaries/assessment-data6.html index 3a66b78781..8b8288cfd8 100755 --- a/cur/programming/summaries/assessment-data6.html +++ b/cur/programming/summaries/assessment-data6.html @@ -131,15 +131,22 @@

    Lab 1: Computer Abstraction Hierarchy

    hasinlinefeedback="true" maxchoices="1" responseIdentifier="ri2" shuffle="false"> 6.1.9
    Which of the following logic circuits will report true? (T stands for true, and F stands for false.) -
      -
      This problem is probably harder than something you'll see on the exam, so if you can get this one, you are doing great!
      - - - - - -
    1. logic gate diagram of (not ((T and F)) or (T and F))
    2. logic gate diagram of ((T or F) and (not (T or F)))
      3. -
    +
    This problem is probably harder than something you'll see on the exam, so if you can get this one, you are doing great!
    + + + + + +
    +
      +
    1. logic gate diagram of (not ((T and F)) or (T and F))
      2. +
    +     		+
      +
    1. logic gate diagram of ((T or F) and (not (T or F)))
      2. +
    +
    +
    I only
    diff --git a/docs/translations.html b/docs/translations.html index 56b16ca0d7..c57061f30f 100644 --- a/docs/translations.html +++ b/docs/translations.html @@ -1,37 +1,64 @@ - - - - BJC Translations - - - - Go to Official, English BJC CSP -

    BJC in Other Languages

    -

    Snap! in Other Languages

    -

    The Snap! programming language used in BJC offers translations for a variety of languages. Click the Snap! settings menu and select "Lanaguages..." to change the language.

    - -

    BJC en Español

    - The intension of the curriculum is that you can have a bilingual classroom—exercises are the same (with only minor changes to ) -

    BJC has been translated into

    -
  • BJC en Español (Spanish) - translated by Álvaro García Garcinuño, University of Puerto Rico (en español) and Universidad Galileo in collaboration with BJC CSP team
    • -

    How to teach in a bilingual classroom; how to prepare spanish speaking students for the English language exam; how to switch between langauges (and why you'd want it); using Snap! in spanish (some things won't be 100% translated); feedback button;

    - -

    BJC in Other Languages

    - -
    See also https://piazza.com/class/h8yx482idav52y/post/4056 for Portugese. --MF, 7/24/23
    - - Beauty and Joy of Computing -

    The Beauty and Joy of Computing AP CSP course has been translated into a variety of other languages. BJC generally does not control these translations but shares them in the spirit of promoting access to high-quality computer science instruction for all. These translations may be incomplete or out of date with the current official, English-language version endorsed by the College Board.

    -

    -

    -

    - -

    If you have a translation of BJC that you could like to list here, please email contact@bjc.berkeley.edu to submit your translation to this curated list.

    - - - + + + + + BJC Translations + + + +
    + Go to Official, + English BJC CSP +

    BJC in Other Languages

    +

    Snap! in Other Languages

    +

    The Snap! programming language used in BJC offers translations for a variety of languages. Click the + Snap! settings menu and select "Lanaguages..." to change the language.

    + +

    BJC en Español

    + The intension of the curriculum is that you can have a bilingual classroom—exercises are the same (with only minor + changes to ) +

    BJC has been translated into

    + +

    How to teach in a bilingual classroom; how to prepare spanish speaking students for the English language exam; + how to switch between langauges (and why you'd want it); using Snap! in spanish (some things won't be + 100% translated); feedback button;

    + +

    BJC in Other Languages

    + +
    See also https://piazza.com/class/h8yx482idav52y/post/4056 for Portugese. --MF, 7/24/23
    + + Beauty and Joy of Computing +

    The Beauty and Joy of Computing AP CSP course has been translated into a variety of other languages. BJC + generally does not control these translations but shares them in the spirit of promoting access to high-quality + computer science instruction for all. These translations may be incomplete or out of date with the current official, English-language version + endorsed by the College Board.

    +

    +

    +

    + +

    If you have a translation of BJC that you could like to list here, please email contact@bjc.berkeley.edu to + submit your translation to this curated list.

    +
    + + diff --git a/index.html b/index.html index 95c5565e78..3652b4e7bc 100644 --- a/index.html +++ b/index.html @@ -14,13 +14,13 @@ - +
    @@ -43,6 +43,7 @@

    The Beauty and Joy of ComputingAn AP® CS

    +
    diff --git a/index_equity.html b/index_equity.html index 07b66de0a8..4ac4f24218 100644 --- a/index_equity.html +++ b/index_equity.html @@ -14,13 +14,13 @@ - +
    @@ -40,6 +40,7 @@

    The Beauty and Joy of ComputingAn AP® CS

    +
    @@ -55,6 +56,5 @@

    The Beauty and Joy of ComputingAn AP® CS

    - - + diff --git a/index_new.html b/index_new.html index 8175728ba1..bafa0e5b2c 100644 --- a/index_new.html +++ b/index_new.html @@ -1,26 +1,26 @@ - - - The Beauty and Joy of Computing - - - - - - + + + The Beauty and Joy of Computing + + + + + + - + - +
    @@ -43,7 +43,7 @@

    The Beauty and Joy of ComputingAn AP® CS

    - +
    NSF
    @@ -59,5 +59,5 @@

    The Beauty and Joy of ComputingAn AP® CS

    - + diff --git a/llab/css/default.css b/llab/css/default.css index b81670a62d..42ca39c6da 100755 --- a/llab/css/default.css +++ b/llab/css/default.css @@ -115,8 +115,18 @@ th { font-size: 16px; } -h1, h2, h3, h4, h5, h6 { - margin-top: 3px; /* Override Bootstrap */ +/* Override bootstrap 3. h1 is exclusively used for page titles. */ +h1 { + all: unset; + display: block; + margin: auto 0; +} +h1.title-small-screen { + margin: 14px 0 0 0; +} +/* Override Bootstrap 3, exclude h1 */ +h2, h3, h4, h5, h6 { + margin-top: 3px; padding: 8px 0; color: #000; } @@ -169,6 +179,7 @@ code { /* Override bootstrap. */ .navbar-title { padding: 6px 16px; + color: #FFF; /* override default h1 */ width: auto; font-family: 'work_sansregular', 'Open Sans', Helvetica, Arial, sans-serif; font-size: 1.6rem; diff --git a/llab/lib/bootstrap.js b/llab/lib/bootstrap.js index 8a2e99a535..b70db83314 100644 --- a/llab/lib/bootstrap.js +++ b/llab/lib/bootstrap.js @@ -605,7 +605,7 @@ if (typeof jQuery === 'undefined') { this.$element .removeClass('collapse') .addClass('collapsing')[dimension](0) - .attr('aria-expanded', true) + // .attr('aria-expanded', true) this.$trigger .removeClass('collapsed') diff --git a/llab/loader.js b/llab/loader.js index 87aa544aad..15b87922a3 100755 --- a/llab/loader.js +++ b/llab/loader.js @@ -4,7 +4,7 @@ */ const THIS_FILE = 'loader.js'; -const RELEASE_DATE = '2023-12-19'; +const RELEASE_DATE = '2024-07-11'; // Basic llab shape. llab = { diff --git a/llab/script/curriculum.js b/llab/script/curriculum.js index f107d5b423..d3e350309b 100755 --- a/llab/script/curriculum.js +++ b/llab/script/curriculum.js @@ -86,36 +86,37 @@ llab.secondarySetUp = function (newPath) { return toggleClasses.find(className => classList.includes(className)); } - let classSelector = `div.${TOGGLE_HEADINGS.join(',div.')}`; - $(classSelector).each(function(i) { + let classSelector = `.${TOGGLE_HEADINGS.join(',.')}`; + $(classSelector).each(function(_i) { let classList = Array.from(this.classList); let isVisible = classList.indexOf('show') > -1; let contentType = lookupClassName(TOGGLE_HEADINGS, classList); - let id = `hint-${contentType}-${i}`; - this.innerHTML = ` - - ${t(contentType)} - -
    - ${this.innerHTML} -
    `; + this.outerHTML = ` +
    + ${t(contentType)} +
    ${this.innerHTML}
    +
    `; + // Use class "ifTime show" to show by default. - // BS3 uses the 'in' class to show content, TODO: update this for v5. if (isVisible) { - $(`#${id}`).addClass('in'); - $(this).removeClass('show'); + $(this).attr('open', true); } }); llab.setupSnapImages(); - // TODO: Figure a nicer place to put this... + // TODO: Figure a nicer place to put all of these... // TODO: Rewrite the function to not scan every element. if ($('[w3-include-html]')) { w3.includeHTML(); } + // Make it easy to make little color swatch boxes. + // These are useful when teaching about RGB. + $('.color-swatch').each((_, el) => { + $(el).css('background-color', $(el).attr('data-color')) + }) + llab.addFeedback(document.title, llab.file, llab.getQueryParameter('course')); // We don't have a topic file, so we should exit. @@ -262,7 +263,6 @@ llab.processLinks = (data) => { // Make the current step have an arrow in the dropdown menu if (isCurrentPage) { - console.log('isCurrentPage...') llab.pageNum = pageCount; itemContent = llab.spanTag(itemContent, 'current-page-arrow'); } @@ -330,7 +330,7 @@ llab.setupTitle = function() { // Create .full before adding stuff. if ($(FULL).length === 0) { - $(document.body).wrapInner('
    '); + $(document.body).wrapInner('
    '); } llab.setAdditionalClasses(); @@ -381,14 +381,14 @@ llab.createTitleNav = function() { navURL = location.pathname; } - let previousPageButton = ` - `, nextPageButton = ` - `, // use \u00F1 instead of an ñ in the menu. (Issue in Chrome on topic pages) @@ -399,12 +399,12 @@ llab.createTitleNav = function() { aria-label="${t('Go to Index')}"> ${t('BJC logo')} -
    +

    Open on edc.org`) diff --git a/llab/script/quiz/multiplechoice.js b/llab/script/quiz/multiplechoice.js index 36a832fd0e..54511a11e2 100755 --- a/llab/script/quiz/multiplechoice.js +++ b/llab/script/quiz/multiplechoice.js @@ -197,7 +197,7 @@ MC.prototype.render = function() { }); } - this.multipleChoice.find('.tryAgainButton').addClass('disabled'); + this.multipleChoice.find('.tryAgainButton').addClass('disabled').attr('disabled', true); this.enableCheckAnswerButton('true'); this.clearFeedbackDiv(); @@ -218,7 +218,7 @@ MC.prototype.render = function() { var resultMessage = this.getResultMessage(latestState.isCorrect); this.multipleChoice.find('.resultMessageDiv').html(resultMessage); if (latestState.isCorrect) { - this.multipleChoice.find('.tryAgainButton').addClass('disabled'); + this.multipleChoice.find('.tryAgainButton').addClass('disabled').attr('disabled', true); } } @@ -306,8 +306,8 @@ MC.prototype.checkAnswer = function() { var i, checked, choiceIdentifier, choice, fullId; this.enableRadioButtons(false); - this.multipleChoice.find('.checkAnswerButton').addClass('disabled'); - this.multipleChoice.find('.tryAgainButton').removeClass('disabled'); + this.multipleChoice.find('.checkAnswerButton').addClass('disabled').attr('disabled', true); + this.multipleChoice.find('.tryAgainButton').removeClass('disabled').attr('disabled', false); for (i = 0; i < inputbuttons.length; i++) { checked = inputbuttons[i].checked; choiceIdentifier = inputbuttons[i].getAttribute('value'); @@ -346,7 +346,7 @@ MC.prototype.checkAnswer = function() { if (isCorrect) { outerdiv.addClass('panel-success'); this.multipleChoice.find('.resultMessageDiv').html(this.getResultMessage(isCorrect)); - this.multipleChoice.find('.checkAnswerButton').addClass('disabled'); + this.multipleChoice.find('.checkAnswerButton').addClass('disabled').attr('disabled', true); } else { outerdiv.addClass('panel-danger'); } @@ -417,13 +417,12 @@ MC.prototype.removeSpace = function(text) { */ MC.prototype.enableCheckAnswerButton = function(doEnable) { if (doEnable == 'true') { // FIXME - this.multipleChoice.find('.checkAnswerButton').removeClass('disabled'); - // disable checkAnswerButton + this.multipleChoice.find('.checkAnswerButton').removeClass('disabled').attr('disabled', false); } else { - this.multipleChoice.find('.tryAgainButton').addClass('disabled'); - // disable checkAnswerButton + this.multipleChoice.find('.tryAgainButton').addClass('disabled').attr('disabled', true); } }; + /** * Enables radiobuttons so that user can click on them */ diff --git a/llab/script/topic.js b/llab/script/topic.js index 5b11d763fc..f10a845e4d 100644 --- a/llab/script/topic.js +++ b/llab/script/topic.js @@ -124,12 +124,10 @@ llab.parseTopicFile = function parser(data) { raw_html.push(text); } next = lines[1]; - while ( - next.length >= 1 && next[0] != "}" && !llab.isKeyword(next) - ) { + while (next.length >= 1 && next[0] != "}" && !llab.isKeyword(next)) { line = getNextLine(); raw_html.push(line); - next = lines[1]; + next = lines[0]; } section.contents.push({ type: "raw-html", contents: raw_html.join("\n") }); raw = false; @@ -252,8 +250,9 @@ llab.renderSection = function (section, parent) { var $section = $("
    "), params = llab.getURLParameters(); + // TODO: This heading needs to be computed in a more accurate way... if (section.title) { - var tag = section.headingType == "heading" ? "h3" : section.headingType; + var tag = section.headingType == "heading" ? "h2" : section.headingType; $section.append(`<${tag}>${section.title}`); } @@ -279,11 +278,20 @@ llab.renderSection = function (section, parent) { i++; infoSection.push(section.contents[i]); } - console.log('Called render info') llab.renderInfo(infoSection, current.type, $contentContainer); } else if (current.type == "section") { llab.renderSection(current, $section); - } else { // also handles: current.type == "raw_html" + } else if (current.type === "raw-html") { + // TODO: This section is challening... + // Content before the item list belongs to the containr. + // Content w/in the list needs to conform to being an li or ul. + // It all needs to be (Seeming?) appear in-order (see Sparks TG) + if ($contentContainer.children().length == 0) { + $contentContainer.before(current.contents); + } else { + $contentContainer.append(current.contents); + } + } else { $contentContainer.append(current.contents); } } diff --git a/sparks/img/U1/lab01/fancy-reporting.png b/sparks/img/U1/lab01/fancy-reporting.png new file mode 100644 index 0000000000..464f37241c Binary files /dev/null and b/sparks/img/U1/lab01/fancy-reporting.png differ diff --git a/sparks/img/U1/lab02/edit-label-fragment.png b/sparks/img/U1/lab02/edit-label-fragment.png new file mode 100644 index 0000000000..612a178675 Binary files /dev/null and b/sparks/img/U1/lab02/edit-label-fragment.png differ diff --git a/sparks/img/U1/lab02/edited-super-short-story-block-editor1.png b/sparks/img/U1/lab02/edited-super-short-story-block-editor1.png new file mode 100644 index 0000000000..8780e4ed44 Binary files /dev/null and b/sparks/img/U1/lab02/edited-super-short-story-block-editor1.png differ diff --git a/sparks/img/U1/lab02/edited-super-short-story-block-editor2.png b/sparks/img/U1/lab02/edited-super-short-story-block-editor2.png new file mode 100644 index 0000000000..3e2205179b Binary files /dev/null and b/sparks/img/U1/lab02/edited-super-short-story-block-editor2.png differ diff --git a/sparks/img/U1/lab02/feeling-label.jpg b/sparks/img/U1/lab02/feeling-label.jpg deleted file mode 100644 index 1958324abc..0000000000 Binary files a/sparks/img/U1/lab02/feeling-label.jpg and /dev/null differ diff --git a/sparks/img/U1/lab02/feeling-variable.jpg b/sparks/img/U1/lab02/feeling-variable.jpg deleted file mode 100644 index d1de48975d..0000000000 Binary files a/sparks/img/U1/lab02/feeling-variable.jpg and /dev/null differ diff --git a/sparks/img/U1/lab02/plural-hat.png b/sparks/img/U1/lab02/plural-hat.png index 9f87fa344b..537fb25e3e 100644 Binary files a/sparks/img/U1/lab02/plural-hat.png and b/sparks/img/U1/lab02/plural-hat.png differ diff --git a/sparks/img/U1/lab02/prototype-labels-plain.png b/sparks/img/U1/lab02/prototype-labels-plain.png new file mode 100644 index 0000000000..2b8d3556ee Binary files /dev/null and b/sparks/img/U1/lab02/prototype-labels-plain.png differ diff --git a/sparks/img/U1/lab02/random-name-definition.png b/sparks/img/U1/lab02/random-name-definition.png new file mode 100644 index 0000000000..0415bbc6ec Binary files /dev/null and b/sparks/img/U1/lab02/random-name-definition.png differ diff --git a/sparks/img/U1/lab02/song-maker-definition.png b/sparks/img/U1/lab02/song-maker-definition.png new file mode 100644 index 0000000000..d0d134bf59 Binary files /dev/null and b/sparks/img/U1/lab02/song-maker-definition.png differ diff --git a/sparks/img/U1/lab02/song-maker-reporting.png b/sparks/img/U1/lab02/song-maker-reporting.png new file mode 100644 index 0000000000..f18b5c1886 Binary files /dev/null and b/sparks/img/U1/lab02/song-maker-reporting.png differ diff --git a/sparks/img/U1/lab02/super-short-story-block-editor1.png b/sparks/img/U1/lab02/super-short-story-block-editor1.png new file mode 100644 index 0000000000..7df4115f87 Binary files /dev/null and b/sparks/img/U1/lab02/super-short-story-block-editor1.png differ diff --git a/sparks/img/U1/lab02/super-short-story-block-editor2.png b/sparks/img/U1/lab02/super-short-story-block-editor2.png new file mode 100644 index 0000000000..2c6c8c31ea Binary files /dev/null and b/sparks/img/U1/lab02/super-short-story-block-editor2.png differ diff --git a/sparks/img/U1/lab02/super-short-story-definition.png b/sparks/img/U1/lab02/super-short-story-definition.png new file mode 100644 index 0000000000..999921e0d2 Binary files /dev/null and b/sparks/img/U1/lab02/super-short-story-definition.png differ diff --git a/sparks/img/U1/lab02/super-short-story-with-inputs-reporting.png b/sparks/img/U1/lab02/super-short-story-with-inputs-reporting.png index 00555da621..fc704a5bde 100644 Binary files a/sparks/img/U1/lab02/super-short-story-with-inputs-reporting.png and b/sparks/img/U1/lab02/super-short-story-with-inputs-reporting.png differ diff --git a/sparks/index.html b/sparks/index.html index ff458cfb23..5f9b5a0e13 100644 --- a/sparks/index.html +++ b/sparks/index.html @@ -1,5 +1,5 @@ - + diff --git a/sparks/student-pages/U1/L1/02-snap-accounts.html b/sparks/student-pages/U1/L1/02-snap-accounts.html index d2df78f4f3..c8b15902a8 100644 --- a/sparks/student-pages/U1/L1/02-snap-accounts.html +++ b/sparks/student-pages/U1/L1/02-snap-accounts.html @@ -7,65 +7,81 @@ -

    Snap! Accounts

    -
    In this activity, you'll use a Snap! account to save your work and customize your programming environment.
    +

    Saving Snap! Projects

    +
    In this activity, you'll learn how to save Snap! projects.
    -

    Creating a Snap! Account

    -
    +
      -
    1. Go to https://snap.berkeley.edu/run.
    2. -
      Image should be redone at a higher resolution. --MF, 8/12/21
      - Click the Cloud menu (it looks like a cloud: cloud menu button), select "Signup...", and follow the instructions.
      - cloud icon -
      3. -
    -
    -

    You should be logged in whenever you are in Snap!, and you should log out whenever you are done. You can use the Cloud menu to log in, log out, check if you are logged in, and change your password.

    + Save your work + There are different ways to save Snap! projects. Some of them involve logging in or creating a Snap! account. Your teacher will let you know which option to use. +
    +

    Option A: Save your project to your computer

    +
    + You can save this file to your computer, a USB drive, Google Drive, or any other place you keep files. +
    +

    In Snap!, go to the File menu (File menu button), choose "Save," and select “Computer” from the save dialog:
    + Save to computer option
    + The project will be saved in the browser’s download location as an XML file. If you are saving the project from this lab, the default filename is "BJC Sparks - Say Hello to Snap"

    +

    To open an XML file, drag the file and drop it into Snap! or use "Open..." from the File menu (File menu button). This is always an option, even if you have a Snap! account.

    +
    +
    -

    Saving Your Project

    -
    -
      - Save your work -
    1. Make sure you are logged in to Snap! by checking that your name appears in the Snap! Cloud menu (cloud menu button), and logging in if necessary.
      2. -
    2. Save this project to your Snap! account by choosing "Save" from the Snap! File menu (it looks like a piece of paper with a corner folded: File menu button).
      3. -
    -
    -

    Be sure to save your projects after an important change and, if you are using a shared computer, whenever you're done for the day.

    +

    Option B: Your teacher has set up an account for you

    +
    + Your teacher will let you know your Snap! username and password. If you ever need to reset your password, the request will go to your teacher. +
    +

    You should log in whenever you use Snap!.

    +

    Click the Cloud menu (Cloud menu button) in the toolbar. (If you only see the outline of a cloud, that means no one is logged in.)

    + cloud icon +
      +
    • If it says "Logout" and your username, then you are already logged in.
      • +
    • If it says someone else's username, then log them out and log in with your own username.
      • +
    • Otherwise, choose "Login..." and enter your username and password.
      • +
    +

    You can change your password at any time using the Cloud menu.

    +

    To save your project:

    +
      +
    • Go to the File menu (File menu button) and choose "Save As..."
      • +
    • If you are saving the project from this lab, the default filename is "BJC Sparks - Say Hello to Snap"
      • +
    • Click on "Save."
      • +
    +

    Remember to log out of Snap! (using the Cloud menu) when you are done on a public computer.

    +
    +
    -

    Customizing Snap!

    -

    When you are logged in, you can customize the Snap! environment based using the Snap! Settings menu (it looks like a gear: Settings menu button). Next time you log in, you'll have your customizations set up already.

    -

    Language

    -

    If you'd prefer to work in a language other than English, you can change the language used in the Snap! interface.

    -
    -
      -
    1. Open the Settings menu, select "Language" (at the top of the menu), and select a different language.
      2. -
    -
    -

    A few blocks may stay in English, but most of the interface will be translated.

    +

    Option C: Create a Snap! account with a personal email

    +
    + This is a Snap! account where any password reset requests will go to your personal email account. Your teacher may ask you to use their email address. +
    -

    Block Size

    -

    You can adjust the size of the blocks in Snap! in case you need to see better or you want more room to work.

    -
    -
      -
    1. Open the Settings menu, select "Zoom blocks" (near the top of the menu), choose a new setting (with the slider, with the dropdown menu, or by typing a value in), and click "OK."
      2. -
    -
    +

    Open a new tab or window and go to http://snap.berkeley.edu/sign_up.

    -

    Light Mode vs. Dark Mode

    -

    Snap! starts off in a "dark mode" by default, which means the backgrounds are a dark gray. Some people prefer dark modes, especially people who work late at night. You can change the background back and forth between dark and light by using the "flat design" setting.

    -
    -
      -
    1. Open the Settings menu, and select "Flat design" (about halfway down the menu).
      2. +
        +
      • Make sure your username does not include any personal information (no names, birthdays, student ID numbers, etc.) Same goes for your password.
        • +
      • In the "email address" box, enter a personal email. Your teacher may ask you to use their email address. An email will be sent to that address to verify the account. That needs to happen in the next 3 days, but you don't have to do it right now.
        • +
      +

      After you create the account, go back to your Snap! window and log in using your new username and password. Click the Cloud menu (Cloud menu button) and select "Login..."
      + cloud icon

      +

      You can change your password at any time using the Cloud menu.

      +

      To save your project:

      +
        +
      • Go to the File menu (File menu button) and choose "Save As..."
        • +
      • If you are saving the project from this lab, the default filename is "BJC Sparks - Say Hello to Snap"
        • +
      • Click on "Save."
        • +
      +

      Remember to log out of Snap! (using the Cloud menu) when you are done on a public computer. You will also log in using the same Cloud menu.

      +
    +
    +
    + +
  • Be sure to save your projects after an important change and, if you are using a shared computer, whenever you're done for the day. Once you have saved your Say Hello to Snap! project to your computer or to your account, you can continue to the next page.
    • -
    - Why is it called “flat” mode and not “light” mode? -
    Although the background color is the most visible difference, the block shapes are also different. The normal blocks are shaded to give a three-dimensional look; the flat blocks don't have that shading. There's no reason there couldn't be dark flat mode or light shaded mode, but the fewer modes, the less likely it is for things not to work together.
    -
    -
    +
    + -
    In this activity, you learned how to log out, check if you are logged in, change your password, and configure the language, block size, and "look" of Snap!.
    +
    In this activity, you learned how save a Snap! project to your computer or to your new Snap! account.
    diff --git a/sparks/student-pages/U1/L1/03-customizing.html b/sparks/student-pages/U1/L1/03-customizing.html new file mode 100644 index 0000000000..04048037c0 --- /dev/null +++ b/sparks/student-pages/U1/L1/03-customizing.html @@ -0,0 +1,47 @@ + + + + + + Unit 1 Lab 1: Introduction to Snap<em>!</em>, Activity 2 + + + +

    Customizing Snap!

    +
    In this activity, you'll customize your programming environment.
    +

    You can customize the Snap! environment based using the Snap! Settings menu (it looks like a gear: Settings menu button). If you have a Snap! account, the next time you log in, you'll have your customizations set up already.

    + +

    Language

    +

    If you'd prefer to work in a language other than English, you can change the language used in the Snap! interface.

    +
    +
      +
    1. Open the Settings menu (Settings menu button), select "Language" (at the top of the menu), and select a different language.
      2. +
    +
    +

    A few blocks may stay in English, but most of the interface will be translated.

    + +

    Block Size

    +

    You can adjust the size of the blocks in Snap! in case you need to see better or you want more room to work.

    +
    +
      +
    1. Open the Settings menu, select "Zoom blocks" (near the top of the menu), choose a new setting (with the slider, with the dropdown menu, or by typing a value in), and click "OK."
      2. +
    +
    + +

    Light Mode vs. Dark Mode

    +

    Snap! starts off in a "dark mode" by default, which means the backgrounds are a dark gray. Some people prefer dark modes, especially people who work late at night. You can change the background back and forth between dark and light by using the "flat design" setting.

    +
    +
      +
    1. Open the Settings menu, and select "Flat design" (about halfway down the menu).
      2. +
    +
    + Why is it called “flat” mode and not “light” mode? +
    Although the background color is the most visible difference, the block shapes are also different. The normal blocks are shaded to give a three-dimensional look; the flat blocks don't have that shading. There's no reason there couldn't be dark flat mode or light shaded mode, but fewer modes keep things simpler.
    +
    +
    + +
    In this activity, you learned how change the "look" of Snap!.
    + + + + diff --git a/sparks/student-pages/U1/L2/01-super-short-story-builder.html b/sparks/student-pages/U1/L2/01-super-short-story-builder.html index 7da3c40ee1..8685c4c5ac 100644 --- a/sparks/student-pages/U1/L2/01-super-short-story-builder.html +++ b/sparks/student-pages/U1/L2/01-super-short-story-builder.html @@ -48,7 +48,10 @@

    Blocks with Random Outputs

    It's possible that the story might turn out funny, such as saying "7 cat" or "1 elephants." You'll fix this in a later activity.
  • Talk with Your Partner What happens to the story that is reported when you use one of the random blocks as input?
    • -
  • Save your work
    • +
  • +
    You learned how to save in Lab 1 Activity 2: Saving Snap! Projects.
    + Save your work +
    • diff --git a/sparks/student-pages/U1/L2/02-editing-a-block.html b/sparks/student-pages/U1/L2/02-editing-a-block.html index bb1c6465ee..b22f13767c 100644 --- a/sparks/student-pages/U1/L2/02-editing-a-block.html +++ b/sparks/student-pages/U1/L2/02-editing-a-block.html @@ -13,7 +13,7 @@

    Editing a Block

    Some blocks are built into Snap! and can't be changed, but Snap! programmers (including you!) can also make and edit their own custom blocks. The random blocks in this project are custom blocks that you can edit.

      -
    1. If your project isn't open already, log in to Snap! and open your "Super Short Stories" project by choosing "Open" from the Snap! File menu (File menu button).
      2. +
    2. If your project isn't open already, open your "Super Short Stories" project by choosing "Open" from the Snap! File menu (File menu button).
    3. Choose one of the random blocks (random job, random action, or random animal), right-click it (or control-click it, if you're on a Mac), and select "edit…" from the menu that appears. This will open the "Block Editor."
      diff --git a/sparks/student-pages/U1/L2/03-using-random-number.html b/sparks/student-pages/U1/L2/03-using-random-number.html index 0f907558ff..32b089189f 100644 --- a/sparks/student-pages/U1/L2/03-using-random-number.html +++ b/sparks/student-pages/U1/L2/03-using-random-number.html @@ -10,29 +10,18 @@

      Using a Random Number

      In this activity, you'll use a random number generator in the story.
      -

      +

      You've seen special random blocks that were designed especially for this project to generate random jobs, actions, and places. Programming languages (including Snap!) usually have a built-in way to generate random numbers.

        -
      1. If your project isn't open already, log in to Snap! and open your "Super Short Stories" project by choosing "Open" from the Snap! File menu (File menu button).
        2. +
      2. If your project isn't open already, open your "Super Short Stories" project by choosing "Open" from the Snap! File menu (File menu button).
      3. Locate pick random (1) to (10) in the palette on the left hand side of the Snap! window, and click it a few times.
      4. Change the inputs to pick random, and click it a few times to see what happens.
      5. Talk with Your Partner Describe what the pick random block does.
        6. -
      -
      -
      -
        -
      1. If you haven't already, try using a decimal number as input to the pick random block. If you haven't already, try using only whole numbers.
        2. -
      2. Talk with Your Partner What happens when you use a whole number as input to pick random? What happens when you use a decimal number?
        3. -
      -
      - -
      -
      1. Your super short story block may look different depending on the inputs you've used.
        Drag pick random into the number input slot of super short story, and click the super short story block a few times to check that a random number is used in the story. If it isn't working right, work with another student to sort out the problem.
        @@ -42,8 +31,14 @@

        Using a Random Number

      +
      +
        +
      1. If you haven't already, try using a decimal number as input to the pick random block. If you haven't already, try using only whole numbers.
        2. +
      2. Talk with Your Partner What happens when you use a whole number as input to pick random? What happens when you use a decimal number?
        3. +
      +
      +
      In this activity, you learned how to generate random numbers and used them to improve the story.
      - diff --git a/sparks/student-pages/U1/L2/04-modifying-inputs-with-join.html b/sparks/student-pages/U1/L2/04-modifying-inputs-with-join.html index 7faa7822e4..c925b718bb 100644 --- a/sparks/student-pages/U1/L2/04-modifying-inputs-with-join.html +++ b/sparks/student-pages/U1/L2/04-modifying-inputs-with-join.html @@ -12,12 +12,12 @@

      Modifying Inputs with Join

      There were a lot of fill-in-the-blank prompts in the Refining the Story Google Doc. How are we going to handle that for the HTML version? --MF, 8/11/21
      Any ideas, anyone? --MF, 8/20/21

      -
      In this activity, you will
      +
      In this activity, you will connect text using the join block.
        -
      1. If you haven't used the random animal block, try it in the animal input slot of the Super Short Story block now. Talk with Another Pair What is a potential problem with using this block in this story?

        The talk thing is awkwardly large and affects the line height funnily, maybe just the short icon? -- PF 8/20/21

        I'm not sure what you mean by a "short icon" but here are some thoughts... --MF, 8/20/21

        1. We could redesign the icons; the originals are in /bjc-r/img/icons/icons.ai. Any changes will to the existing PNG will impact CSP. I think that's OK, but it's worth noting.
        2. We could use class="imageRight" instead of "inline" but I do like using the icon as part of the text...

        2. -
      2. Talk with Your Partner Find the join block in the palette and drag it into the Scripts area. Click it, change the inputs, and click it again. What does the join block do?
        3. +
      3. If you haven't used the random animal block, try it in the animal input slot of the Super Short Story block now. Talk with Another Pair What is a potential problem with using this block in this story?
        4. +
      4. Find the join block in the palette and drag it into the Scripts area. Click it, change the inputs, and click it again. What does the join block do?
      5. Drag the random animal block into the first slot of the join block and type an "s" in the second slot. Click it to test that it reports a plural animal, and then drag the entire join expression into the Super Short Story block.
        join (random animal) (s) @@ -26,11 +26,7 @@

        Modifying Inputs with Join

      - - - -
      In this activity, you
      - +
      In this activity, you merged a random animal with the letter "s" to make the animal plural.
      diff --git a/sparks/student-pages/U1/L2/05-creating-a-block.html b/sparks/student-pages/U1/L2/05-creating-a-block.html index 7b3ad768d0..4d23c8ae59 100644 --- a/sparks/student-pages/U1/L2/05-creating-a-block.html +++ b/sparks/student-pages/U1/L2/05-creating-a-block.html @@ -8,46 +8,46 @@

      Creating a Block

      -
      In this activity, you will create a new random block to use in your story.
      -
      -

      The vocab box about abstraction should be cut down considerably. --MF, 2/9/22

      -
      - - -
      : Abstraction -

      Will they be watching a video on abstraction here? Or does Dan mention it in welcome? It feels so..abstract..here that I wonder what students will take from it. If I wasn't bound to use the term abstraction, I'd probably emphasize the benefit of reuse "When we realize we've developed a useful piece of functionality that we might want to use in other places, we can turn it into its own block." Anyway just musings from your local "abstraction" skeptic, feel free to delete. -- PF 8/20/21

      I added your text at the beginning and am open to a Dan video and/or more discussion about teaching abstraction. :) --MF, 8/20/21

      -

      When you realize you've developed a useful piece of script behavior that you might want to use in other places, you can turn it into its own block. This is a form of abstraction.

      -

      Abstraction is an important idea in computer science. One kind of abstraction is breaking up a large problem into smaller sub-problems.

      -

      For example, instead of putting join (random animal) (s) into an input slot of super short story, you can create a plural of () block and put random animal in its input slot.

      -

      This makes your code easier to read, you can use this new block again in other places, and once the block is working, you don't need to think about how it works each time you use it. (For example, you might later improve plural to handle words such as "fly" and "box" that don't form their plural just by adding an "s.")

      -
      +
      In this activity, you will create a new block to use in your story.
      - image of 'Make a block' dialog box with 10 palette menus (Motion, Looks, Sound, Pen, Lists, Control, Sensing, Operators, Variables, Other) of which Operators is selected; a text box labeled 'Type a title for your block.' in which 'plural of' has been written; three block shape options (puzzle-shaped/'Command', oval/'Reporter', and hexagonal/'Predicate') labeled 'Select a shape.' of which 'Reporter' is selected; two radio boxes ('for all sprites', which is checked, and 'for this sprite only', which is not checked) with no label of which 'for all sprites' is selected; and two buttons ('OK' and 'Cancel')
        -
      1. If your project isn't open already, log in to Snap! and open your "Super Short Stories" project by choosing "Open" from the Snap! File menu (File menu button).
        2. +
      2. If your project isn't open already, open your "Super Short Stories" project by choosing "Open" from the Snap! File menu (File menu button).
      3. - Make a new block. -
          -
        1. - Right-click (or control-click on a Mac) in an empty spot in the Scripts area and choose "make a block..."
          - make a block option -
          2. -
        2. Choose the color for your block: light green (Operators).
          3. -
        3. Type the title for your block: plural of.
          4. -
        4. Select the shape for your block: reporter.
          5. -
        5. Click "OK."
          6. -
        - (For now, you should ignore the "for all sprites" vs. "for this sprite only" choice. Later on, you'll learn when you might want to choose "for this sprite only.") + Make a new block: plural of () +
        + image of 'Make a block' dialog box with 10 palette menus (Motion, Looks, Sound, Pen, Lists, Control, Sensing, Operators, Variables, Other) of which Operators is selected; a text box labeled 'Type a title for your block.' in which 'plural of' has been written; three block shape options (puzzle-shaped/'Command', oval/'Reporter', and hexagonal/'Predicate') labeled 'Select a shape.' of which 'Reporter' is selected; two radio boxes ('for all sprites', which is checked, and 'for this sprite only', which is not checked) with no label of which 'for all sprites' is selected; and two buttons ('OK' and 'Cancel') +

        Making a Block

        +
          +
        1. + Right-click (or control-click on a Mac) in an empty spot in the Scripts area and choose "make a block..."
          + make a block option +
          2. +
        2. Choose the color/category for your block (for this block, you might choose light green/Operators; see image at right)
          3. +
        3. Type the title for your block (we'll call this block plural of)
          4. +
        4. Select the shape for your block (in this case, you want a reporter)
          5. +
        5. Click "OK."
          6. +
        +
        Ignore the "for all sprites" vs. "for this sprite only" choice. (It lets you limit where blocks can appear in your project.)
        +
        4. +
        + You are creating a reporter, so the block editor opens with a report block already attached to the plural hat block. Whatever input you give to the report block will become the value reported by your new block.
        + 'plural of' in the block editor showing with the 'report' block attached below it +
      4. Save your work

      -

      - You are creating a reporter, so the block editor opens with a report block already attached to the plural hat block. Whatever input you give to the report block will become the value reported by your new block.
      - 'plural of' in the block editor showing with the 'report' block attached below it -

      -
      In this activity, you made a new random block to use in your story.
      +
      The vocab box about abstraction should be cut down considerably. --MF, 2/9/22
      +
      : Abstraction +

      Will they be watching a video on abstraction here? Or does Dan mention it in welcome? It feels so..abstract..here that I wonder what students will take from it. If I wasn't bound to use the term abstraction, I'd probably emphasize the benefit of reuse "When we realize we've developed a useful piece of functionality that we might want to use in other places, we can turn it into its own block." Anyway just musings from your local "abstraction" skeptic, feel free to delete. -- PF 8/20/21

      I added your text at the beginning and am open to a Dan video and/or more discussion about teaching abstraction. :) --MF, 8/20/21

      +

      When you've developed a useful piece of code that you want to use in other places, you can turn it into its own block. This is a form of abstraction. Abstraction is an important idea in computer science. One kind of abstraction is breaking up a large problem into smaller sub-problems.

      +
      For example, instead of putting join (random animal) (s) into an input slot of super short story, you can create a plural of () block and put random animal in its input slot.
      +

      This makes your code easier to read, you can use the new block again in other places, and once the block is working, you don't need to think about how it works each time you use it.

      + +
      + +
      In this activity, you made a new block to use to add an "s" to the end of any word.
      diff --git a/sparks/student-pages/U1/L2/06-adding-an-input.html b/sparks/student-pages/U1/L2/06-adding-an-input.html index 037b2c2fdb..dfbd2335fd 100644 --- a/sparks/student-pages/U1/L2/06-adding-an-input.html +++ b/sparks/student-pages/U1/L2/06-adding-an-input.html @@ -11,11 +11,11 @@

      Adding an Input to Your Block

      Add support for new variadic slot features. --MF, 2/1/22

      +
      In this activity, you will make your plural block accept a word as input, join a letter "s" to the end, and report the new, plural word as output.
      -
      Why do you prefer the Plain Prototype Labels mode? We put a lot of thought into the visible plus signs in the default mode, mainly because it makes the process of adding inputs discoverable, whereas it's pretty hard to hover in just the right place to make an invisible plus sign become visible and then click it. I made Jens add the invisible-plus option only for the sake of making script pics for the manual and other documentation, not as a good way for users to use Snap!. -bh

      We've talked about this. ;) It's great in Snap!, but it doesn't offer anything except clutter in a static image. --MF, 1/11/23

      -
        +
        1. Add an input slot for the word that will be made plural.
          @@ -48,8 +48,8 @@

          Adding an Input to Your Block

          'plural of' in the block editor with 'report (join (word)('s'))' attached below it
        2. Once your plural block is working, try it with random animal, and finally, drag plural of (random animal) into super short story, and make sure it works as expected.
          3. +
        3. Your plural block works for more than just animals! Try it with the random job block.
        4. Save your work
          5. -

          It'd be cool if they could try it with something other than random animal, to grok the point of reusable blocks. I realize nothing else needs a plural in the story though, but maybe they could play with it and not put in story? 🤷🏽‍♀️ -- PF 8/20/21

          I agree. Any ideas? --MF, 8/20/21

      diff --git a/sparks/student-pages/U1/L2/07-creating-editing-blocks.html b/sparks/student-pages/U1/L2/07-creating-editing-blocks.html index d06d0ac8b7..e092e1c219 100644 --- a/sparks/student-pages/U1/L2/07-creating-editing-blocks.html +++ b/sparks/student-pages/U1/L2/07-creating-editing-blocks.html @@ -8,127 +8,129 @@

      Editing the Story Structure

      -
      -

      Split this page into 2 pages ("Editing the Story Structure" and "Saving and Sharing Your Snap! Project"). We need to teach sharing early. --MF, 12/28/21

      -
      - -
      In this activity, you'll edit the structure of the story itself to make it your own story.
      -
      -
      Move or remove
      -

      The join block joins two strings of text into one (without a space), and you used it to create a plural word. There is also a join words () block that joins strings of text with a space between them.
      - 'join (short) (story)' reporting 'shortstory' - 'join words (short) (story)' reporting 'short story' -

      -
      -
        -
      1. If your project isn't open already, log in to Snap! and open your "Super Short Stories" project by choosing "Open" from the Snap! File menu (File menu button).
        2. +
      2. If your project isn't open already, open your "Super Short Stories" project by choosing "Open" from the Snap! File menu (File menu button).
      3. Right-click the super short story block, and select "edit…" from the menu that appears.

      Just as in the plural block, the super short story hat block at the top shows you the structure of the block that will be visible from the outside, including the name of the inputs (job, action, number, and plural animal).
      - Super Short Story, feeling: (feeling) job: (job) action: (action 1) place: (place) action: (action 2) number: (number #) color: (color) plural animal: (animals) food: (food): {report (join words ('The') (feeling) (job) (action 1) ('through') (place) ('and') (action 2) ('over') (number) (color) (animals) ('eating') (food))}
      - As before, the code inside the yellow report block controls what is reported when the super short story block is run. These inputs have already been dragged into the code for the block. + super short story, job: (job) action: (action) number: (number #) plural animal: (plural animal)
      + As before, the code inside the yellow report block controls what is reported when the super short story block is run. These inputs have already been dragged into the code for the block.
      + report (join ('The happy ') (job) (' sings through the parks and ') (action) (' over ') (number) (' yellow ') (plural animal))

      -
      : Local Variables -
      Revisit how to do this better for the middle school level. --MF, 7/23/23
      -

      Block inputs (such as job, action, number, and plural animal, in the super short story example) are called local variables because the value they report to join words varies based on what is typed into the input slots of super short story, but they only can be used in this local context (you can't drag them out of the block editor and expect them to work in other parts of your code).

      -
      Should this mention that block/script local is different from sprite local? -bh 2/6/22
      -
      1. Talk with Your Partner Discuss the code inside the report block and how it works to create the output of super short story.
        2. -
      2. In the limited time I have, I can't make a revision as sweeping as this, but this sequence of instructions, each of which is several details long, with parenthesized contents, will be basically unreadable to many (most?) middle schoolers. They don't need teaspoonfuls, but the entire block of text is likely to be intimidating, especially if they have any reading (or English language) issues. A couple of pictures could help, just to support the text with context. --PG
        On paper, write out a single-sentence story, select several words to remove, and for each removed word, write the name of a category of words that could replace that word (for example, "feeling" could replace "happy" and "job" could replace "teacher"). Make a list of these categories so you have their names in order.
        3. -
        This needs an animation; even a great picture really won't do it as well as an animation would. I need help here. :) --MF, 8/16/21 -

        Can we just do a short movie? Animated GIFs aren't great usability wise since you can't replay/pause/etc. --PF 8/20/21

        -

        We have a JS script so they can be paused. I'm not against movies in theory, and I can't recall exactly why we've opted against them, but it might have been usability. Videos have to be hosted somewhere, and if the school restricts domains, then the video might not be visible. Uploading elsewhere also recreates development overhead. That's acceptable when a video is really needed (like 1.1.1) but for something quick like this, a little animated GIF is easier to create and embed as an image. Just a few thoughts. We can discuss further if you like. --MF, 8/20/21

        -
      3. - Starting at the beginning of the super short story hat block, click each input label (for example, 'feeling:' label) and change it to your category name, and then click the variable name for that input (for example, 'feeling' variable name) and change that to the same category. Do this for each category in your list. -
          -
        • If you don't have as many categories as super short story did, click a label or variable and choose "Delete."
          • -
        • If you have more categories, hold the mouse pointer after the last word in the hat block, and click the plus sign that appears. Then, add text for a label and click "Title text," or add text for a variable and choose "Input name."
          • -
        +
        + For example: +
          +
        1. Story: Fifteen students are in the park.
          2. +
        2. Words to vary: fifteen, students, park
          3. +
        3. Variables: number, plural people, place
          4. +
        +
        + Design your super short story on paper: +
          +
        1. Write out a single-sentence story. You can write your own or use a line from a song, a poem, or something else.
          2. +
        2. Choose 3-5 words that you want to vary.
          3. +
        3. For each circled word, write the name of a variable (category) to describe the words that could go there.
          4. +
        4. -
      4. https://piazza.com/class/h8yx482idav52y?cid=3568
        Change the inputs in the join words definition, to change the structure of the story so it matches your single-sentence story.
        Are we really asking kids to look at the join words definition? I'm working hard, myself, to figure out what this instruction is saying. I'd have a seasoned middle school teacher you respect, but not a seasoned Snap teacher, look through the text. --Paul
        Drag in the local variables where you need them. When you are finished, click "OK," and run the super short story block to test your work.
        5. -
        Sharing on New Page? From PD: "The info I received from Dan on this process yesterday was very complete and should be added to Unit 1 Lab 2 Activity 2, step 10 especially when the title turns bold. "
        +
      +

      +
      + +
      : Variables +
      Revisit how to do this better for the middle school level. --MF, 7/23/23
      +

      Block inputs (such as job, action, number, and plural animal) are a type of variable because the value that they provide to the join block varies based on what is typed into the input slots of the super short story block.

      +
      Should this mention that block/script local is different from sprite local? -bh 2/6/22
      +
      + +
      +
      1. - Share your project with someone else. +
        +

        You learned how to create a new block in Activity 5: Creating a Block.

        +

        You learned how to edit an existing block on Activity 2: Editing a Block.

        +
        + Decide whether you want to edit the super short story block or create your own new block. If creating your own block, make the new block now. +
        2. +
      2. + Either way, set up the hat block inside the Block Editor by adding your variables and labels for them. For example, you might want your hat block to look something like this:
        + super short story, number: (number) people: (people) place: (place)
        -

        Sharing a Snap! Project

        -
          -
        1. Choose "Open" from the Snap! File menu (File menu button).
          2. -
        2. Select this project from the list.
          3. -
        3. Press "Share."
          4. -
        4. Click "Cancel" to close the box (since you aren't actually trying to open a project.
          5. -
        5. Then copy and share the URL (web address) out of the location bar if your browser window.
          6. -
        +

        Editing, Adding, and Removing Labels and Variables in the Block Editor

        +
          +
        • + To edit a label or variable: Click the label or variable, change it to your variable name, and click "OK".
          + +
          • +
        • + To add a label or variable: +
            +
          1. + Click the plus sign where you want to add something. The plus sign might be invisible until you hold the mouse pointer there.
            + hat block showing only one plus sign + +
            2. +
          2. + To add a label, choose "Title text," or to add a variable, choose "Input name."
            + +
            3. +
          3. Type your variable name and click "OK". (You might want a colon in the label as in the examples.)
            4. +
          +
          • +
        • To remove a label or variable: Click the label or variable and choose "Delete."
          • +
        3. -
      3. Share your project by choosing "Open" from the Snap! File menu (File menu button), selecting this project from the list, pressing "Share," and clicking "Cancel". Then copy the URL (web address) out of the location bar at the top of the window, and send it to your friends, family, and/or teacher.
        4. +
      4. +
        https://piazza.com/class/h8yx482idav52y?cid=3568
        + Set up the text and drag in the variables to tell your story using a join block inside the report block. For example, yours might look something like this:
        + + + +
      - -
      -
        +
        +
        1. To make the color match, choose the "Lists" as the palette in the block editor.
          - Make your own random blocks by creating a new reporter block, editing an existing random block at the same time, and copying and changing the code. -
          Tip: You can duplicate a block by right-clicking it, selecting the picture of the block in the menu that appears, and dropping the code attached to your mouse pointer in the desired location.
          -
          This used to say "selecting 'duplicate,'" but that's true only if the block is the last one in its script. I understand that that will be the case in these early functional examples, but imho we shouldn't teach wrong things and then have to unteach them later. If y'all agree you can delete this red box. -bh 2/6/22
          + Make your own random blocks for your story. For example:
          + random name { + report (item (random) of (list ('Maria') ('Omar') ('Kenji') ('Pablo') ('Kai'))) +} + +
          2. +
        2. + Use a line from a song or a poem to inspire a story that uses variables. For example, you might change the song "Mary had a little lamb" to use a random name and a random animal:
          + song marker, name: (random name) animal: (random animal) reporting 'Pablo had a little elephant'
          + song maker, name: (name) animal: (animal) { + report (join (name) (' had a little ') (animal)) + } +
        +
      4. +
    -
    -

    Hello, all.  - -My students seem excited about this last activity for Super Short Stories. Using the information in the Student Materials for Activity 3,  - -I demonstrated how to take a saying like - -The cow jumped over the moon - -and turn it into a really short story. See script pick below: - - - -Then, their next activity is to come up with a saying or line from a poem or music that they will change.  - -They were really excited about it. A few they were batting around included - -To be or not to be.  - -I have a dream.  - -Kill two birds with one stone.  - -I have been to the mountaintop.  - -Cheers,  - -Bob 

    -
    -
      -
    1. -
    2. -
    3. -
    4. -
    5. -
    -
    -
    In this activity, you changed the labels and variables in the super short story block to match the categories in your own story and edited the structure of the story to make it your own.
    - - diff --git a/sparks/student-pages/U1/L2/08-sharing.html b/sparks/student-pages/U1/L2/08-sharing.html new file mode 100644 index 0000000000..11f58d8faa --- /dev/null +++ b/sparks/student-pages/U1/L2/08-sharing.html @@ -0,0 +1,58 @@ + + + + + + Unit 1 Lab 2: Super Short Stories, Activity 8 + + + +

    Sharing Your Project

    +
    We need to teach sharing early. --MF, 12/28/21
    +
    Sharing on New Page? From PD: "The info I received from Dan on this process yesterday was very complete and should be added to Unit 1 Lab 2 Activity 2, step 10 especially when the title turns bold. "
    + +
    In this activity, you'll you will share your project so others can play with your super short study builder.
    + +
    +
      +
    1. + Share your project with someone else. You can use either option below if you have a Snap! account. If you do not have a Snap! account, you need to use Option A. +
      2. +
    +
    +

    Option A: Share your project as a file

    +
    + Send an XML file. +
    +
      +
    • You've already learned how to save an XML file by saving to your computer instead of the cloud. You can also go to File menu (File menu button) and select "Export project..." to generate an XML file.
      • +
    • You can send this XML file to others. To open the file, they can go to Snap! and drag in the XML file. They can also go to the File menu (File menu button) and "Open..." the file.
      • +
    • If you make changes to your project, then you have to save the project again and send the new file for others to see your updates.
      • +
    +
    +
    +

    Option B: Share your project as a link

    +
    +

    "Sharing" your project will create a link that will let others see the most recently saved version of your project.

    + +
    + +
    + +
    In this activity, you'll edit the structure of the story itself to make it your own story.
    + + + + diff --git a/sparks/student-pages/U1/L4/02-exploring-rgb-colors.html b/sparks/student-pages/U1/L4/02-exploring-rgb-colors.html index 132ec9e106..35ed99a471 100644 --- a/sparks/student-pages/U1/L4/02-exploring-rgb-colors.html +++ b/sparks/student-pages/U1/L4/02-exploring-rgb-colors.html @@ -11,7 +11,7 @@

    Exploring RGB Colors

    In this activity, you'll explore how RGB color values create colors.
      -
    1. If your project isn't open already, log in to Snap! and open your "Pixel Display" project by choosing "Open" from the Snap! File menu.
      2. +
    2. If your project isn't open already, open your "Pixel Display" project by choosing "Open" from the Snap! File menu.
    3. Find the RGB pixel, red: (85) green: (170) blue: (255) block in the palette, drag it into the scripting area, and click the block to run it. The RGB pixel block takes three numbers as input and reports a list with the those three color values.

      4. A list is an ordered sequence of items.

      PLEASE don't interrupt experiments with huge vocabulary lessons. The language "reports a list" is sufficient context to make clear what a list is. And anyway, kids already know. They've seen the lists you show here and before that they've seen shopping lists. The fact that a list, in this context is "an ordered sequence" (unlike a shopping list) is true and important but can be taken for granted. Kids want to experiment and the last two items in this activity are potentially fun and interesting. Making vocabulary a priority just guarantees that it will become the focus of the course, will be tested, and will kill any semblance of B and J that is left. --PG

      diff --git a/sparks/student-pages/U1/L4/04-pixel-mapper.html b/sparks/student-pages/U1/L4/04-pixel-mapper.html index 49f69c2860..b8df41bc8e 100644 --- a/sparks/student-pages/U1/L4/04-pixel-mapper.html +++ b/sparks/student-pages/U1/L4/04-pixel-mapper.html @@ -21,7 +21,7 @@

      Selecting a Single Color

      You can use code to access information about one color of a pixel.

        -
      1. If your project isn't open already, log in to Snap! and open your "Image Manipulation" project.
        2. +
      2. If your project isn't open already, open your "Image Manipulation" project.
      3. You've seen how to select one pixel from a table using item of...
        diff --git a/sparks/student-pages/U1/L5/03-hex-rgb-colors.html b/sparks/student-pages/U1/L5/03-hex-rgb-colors.html index 99208dd2cd..41241345c7 100644 --- a/sparks/student-pages/U1/L5/03-hex-rgb-colors.html +++ b/sparks/student-pages/U1/L5/03-hex-rgb-colors.html @@ -154,31 +154,30 @@

        Hexadecimal and RGB Colors

        The three color values of RGB pixels each range from 0 to 255 because eight bits are used for each of the three colors and 28 = 256. But in hexadecimal, 162 = 256, so it only takes two hex digits to represent each of the RGB color values (0 to 255 in decimal is 00 to FF in hex).

        As you've seen, if all three color values are as bright as possible, we see white, and if they are as dark as possible, we see black. Instead of writing (255, 255, 255) for white and (0, 0, 0) for black, we often use hex notation: FFFFFF and 000000.

        -

        Also (128, 0, 255) = 8000FF is the color is purple: some red (128 = 8016) and as much blue as possible (255 = FF16), but no green at all (0 = 0016). And this color is red 255, green 127, and blue 0, which is FF7F00 in hex.

        +

        Also (128, 0, 255) = 8000FF is the color is purple: some red (128 = 8016) and as much blue as possible (255 = FF16), but no green at all (0 = 0016). And this color is red 255, green 127, and blue 0, which is FF7F00 in hex.

        -
        -
          -
        1. Represent these colors in hex notation: -
            -
          1. (10, 120, 255)
            2. -
          2. (220, 10, 220)
            3. -
          3. (60, 255, 60)
            4. -
          -
          2. -
        -
        -
        -
          -
        1. - Learn more about hex notation for RGB colors: +
          +
            +
          1. Represent these colors in hex notation: +
              +
            1. (10, 120, 255)
              2. +
            2. (220, 10, 220)
              3. +
            3. (60, 255, 60)
              4. +
            +
            2. +
          +
          +
          +
            +
          1. Learn more about hex notation for RGB colors:
            2. -
          -
          +
        +
        In this activity, you learned about hexadecimal notation, how it relates to binary, and how it is used to represent RGB color values.
        diff --git a/sparks/student-pages/U2/L2/06-importing-own-images.html b/sparks/student-pages/U2/L2/06-importing-own-images.html index 8117104838..7c15bb0cb2 100644 --- a/sparks/student-pages/U2/L2/06-importing-own-images.html +++ b/sparks/student-pages/U2/L2/06-importing-own-images.html @@ -33,7 +33,7 @@

        Importing an Image from Your Computer

        -
        If you want to use an image that someone else created, check to make sure that you are allowed to use it. If you are, leave a comment in your Snap! code acknowledging the creator. You learned about adding comments in Unit 1 Lab 6 Activity 1: Texting Time.
        +
        If you want to use an image that someone else created, check to make sure that you are allowed to use it. If you are, leave a comment in your Snap! code acknowledging the creator. You learned about adding comments in Unit 1 Lab 6 Activity 1: Texting Time.
        1. Select the stage icon or a sprite icon depending on where you want the image to go.
        2. Drag the image file from your computer anywhere into the Snap! window.
          3. diff --git a/sparks/student-pages/U2/L2/11-adding-sounds.html b/sparks/student-pages/U2/L2/11-adding-sounds.html index 1ac30eacf5..dc0b0ee02a 100644 --- a/sparks/student-pages/U2/L2/11-adding-sounds.html +++ b/sparks/student-pages/U2/L2/11-adding-sounds.html @@ -89,7 +89,7 @@

          If you want to use an sound that someone else created, check to make sure that you are allowed to use it. If you are, leave a comment in your Snap! code acknowledging the creator. You learned about adding comments in Unit 1 Lab 6 Activity 1: Texting Time.

        +
        If you want to use an sound that someone else created, check to make sure that you are allowed to use it. If you are, leave a comment in your Snap! code acknowledging the creator. You learned about adding comments in Unit 1 Lab 6 Activity 1: Texting Time.

      diff --git a/sparks/student-pages/U2/L3/02-oscilloscope.html b/sparks/student-pages/U2/L3/02-oscilloscope.html index 9aff4d0779..b7687858da 100644 --- a/sparks/student-pages/U2/L3/02-oscilloscope.html +++ b/sparks/student-pages/U2/L3/02-oscilloscope.html @@ -105,7 +105,7 @@

      Drawing Microphone Samples Continuously

      animation of an oscilloscope in Snap! that looks like a rapidly changing, horizontal wavey line
    4. -
      You learned about adding comments in Unit 1 Lab 6 Activity 1: Texting Time.
      +
      You learned about adding comments in Unit 1 Lab 6 Activity 1: Texting Time.
      Once your oscilloscope is working, add Snap! comments to your code so you remember how it works. What kinds of comments should you make?

      diff --git a/sparks/teaching-guide/U1/01-intro-to-snap.html b/sparks/teaching-guide/U1/01-intro-to-snap.html index 698b171687..661b10e9d5 100644 --- a/sparks/teaching-guide/U1/01-intro-to-snap.html +++ b/sparks/teaching-guide/U1/01-intro-to-snap.html @@ -13,11 +13,15 @@

      Lab 1: Introduction to Snap!  In the second page of this lab, students begin saving their work to a Snap! account. Students can create accounts on their own, but ideally you, as their teacher, set up accounts for each student ahead of time and provide each student with a username and password on the first day.

      Pacing

      +
      + All expected times in this Teacher Guide are for planning purposes only and are not intended to constrain class time spent. The appropriate time for your students to spend on any activity may vary from these guidelines and may vary from student to student. BJC Sparks labs include optional "If There Is Time" extensions and "Take It Further" challenge exercises for differentiation. +

      - This lab is designed for 1 class period (25–50 minutes). + This lab may take your students about 1 class period (20–50 minutes).

      @@ -29,7 +33,7 @@

      Activity 1: Say Hello to Snap!.  Prepare:
        -
      • Take a few minutes to explore the blocks in the Snap! project so you understand what they do before you share the Google doc with students.
        • +
      • Take a few minutes to explore the blocks in the Snap! project to understand what they do.

    5. @@ -44,20 +48,25 @@

      Activity 1: Say Hello to Snap!.  Activity Plan:
        -
      • Students explore two blocks: +
      • Students explore two blocks that manipulate text strings (5-10 minutes):
          -
        • say hello to () in ('English'), which takes a name and a language as input and reports a greeting to that person in the selected language.
          • -
        • fancy (), which takes text as input and reports the same text with any letters changed to fancy Unicode letters
          • +
        • + The block say hello to () in ('English') takes a name and a language as input and reports a greeting to that person in the selected language: + say hello to (Amira) in (English) reporting 'hello, Amira' +
          • +
        • + The block fancy () takes text as input and reports the same text with any letters changed to fancy Unicode letters: + +
        • -
      • Students then nest the fancy block inside the say hello block and observe how the input of fancy becomes the input to say hello.
        • -
      • Finally, students learn to save their project to the Snap! cloud, as they should every day and periodically while working.
        • +
      • Students then explore nesting the fancy and say hello blocks inside each other and observe how the output of one block becomes the input to the other. (5-10 minutes)

    6. Tips:
        -
      • In this first hands-on exploration with Snap!, students may struggle with basics such as clicking a block to make it run, difficulty typing into input slots etc. The simplicity of this project allows for debugging these simple challenges of the absolute beginner so that they are resolved by the time students move on to more complex use of the Snap! interface such as dragging blocks into each other, creating input parameters, and creating and editing blocks.
        • +
      • In this first hands-on exploration with Snap!, students may hesitate with basics such as clicking a block to make it run, typing into input slots, etc. The simplicity of this project allows for debugging these simple challenges of the absolute beginner so that they are resolved by the time students move on to more complex use of the Snap! interface such as dragging blocks into each other, creating input parameters, and creating and editing blocks.
    7. @@ -69,38 +78,43 @@

      Activity 1: Say Hello to Snap!. 

      8. - ↑ Back to Top -

      Activity 2: Snap! Accounts 

      +

      Activity 2: Saving Snap! Projects 

        -
      • Materials: Snap! Accounts student page
        • +
      • Materials: Saving Snap! Projects student page
      • Prepare:
          -
        • Before leading the activity with students, create your own Snap! account (if you haven't already) and customize your own settings.
          • +
        • If you haven't already, create your own Snap! account and sign up for access to BJC solutions and assessments.
          • +
        • Plan for students' Snap! use. This activity lists three options for how to save Snap! projects. The option you direct students to use will depend on your school and district's policies. Visit the Student Accounts and Privacy page for details behind these options. +
            +
          • The best option for most schools is Option B, which requires you to set up student accounts in bulk well before the first day of class. Directions are on the Student Accounts and Privacy page.
            • +
          • Option A is listed first as it is the only option that does not involve student Snap! accounts. If you are not ready for students to set up accounts yet, Option A will let them proceed with their project without losing their work. Students can always import and save their projects later if they make accounts.
            • +
          +
        • You may find it helpful to review the beginning of the Beauty and Joy of Computing: Snap! Crash Course and perhaps also to familiarize yourself with the structure of the Snap! Reference Manual, which is accessible by clicking the Snap! logo in the top left corner of any Snap! window.
      • Learning Goals:
          -
        • Create a Snap! account.
          • +
        • Save their Snap! project.
          • +
        • If applicable, access or create a Snap! account.
        • Learn to navigate the Snap! interface.
          • -
        • Customize the Snap! programming environment.
      • Activity Plan: -
          -
        1. Students create a Snap account.
          2. -
        2. Students then customize several basic Snap! settings (language and appearance).
          3. -
        +
          +
        • Students save their Snap! project. If applicable, students will also access their Snap! accounts. (5–20 minutes)
          • +
      • Tips:
          -
        • During the signup process, new users are asked to click a link in their email to verify the account, but that doesn't have to happen right away.
          • +
        • As mentioned in the "Prepare" section above, the best option for most schools will be Option B, which requires you to set up students account in bulk prior to the lab. See the Student Accounts and Privacy page.
          • +
        • Some students may already have personal Snap! accounts or would prefer to make their own. Encourage personal use of Snap!, but also insist that students use a student account for their school work.
        • If students set up Snap! accounts in class using Option C, consider asking students to enter in your (the teacher's) email address instead of their own. One advantage is that all password reset requests will then go to the teacher, instead of a student email that students may also have trouble accessing. Students' school email addresses may also be more short-lived than teacher addresses, so this potentially reduces instances where students lose access to their projects after they leave a school.
        • Snap! users can change their password at any time using the Cloud menu.
        • Users can tell whether they are logged in by checking the Snap! Cloud menu: @@ -108,9 +122,45 @@

          Activity 2: Snap! Accounts If it says "Logout" and then a user name, then that user is logged in.

        • If it says "Login..." then no one is logged in.
        - If students are using shared computers, they should log out of Snap! when they are done. + If students are using shared computers, they should log out of Snap! when they are done.
        • +
      • You can also tell at a glance whether anyone is logged into Snap! because the cloud icon will be filled in (white) when someone is logged in. +
        • +
      • + Make note of any questions or difficulties that arise, and please share them with the curriculum developers: +
        Submit Feedback
        • -
      • Make note of any questions or difficulties that arise, and please share them with the curriculum developers.
        • +
      + +
    8. + Standards: +
        +
      • None covered in this activity since it focuses on getting set up with Snap!.
        • +
      +
      9. + +
      + + ↑ Back to Top +

      Activity 3: Customizing Snap! 

      +
      +
        +
      • Materials: Customizing Snap! student page
        • +
      • + Prepare: +
          +
        • You may find it helpful to explore the Snap! customization features before class.
          • +
        +
        • +
      • + Learning Goal: +
          +
        • Customize the Snap! programming environment.
          • +
        +
        • +
      • + Activity Plan: +
          +
        • Students customize several basic Snap! settings (language and appearance). (5–10 minutes)
      • diff --git a/sparks/teaching-guide/U1/02-storytelling.html b/sparks/teaching-guide/U1/02-storytelling.html index 5fe28af881..7961c64402 100644 --- a/sparks/teaching-guide/U1/02-storytelling.html +++ b/sparks/teaching-guide/U1/02-storytelling.html @@ -11,19 +11,24 @@

        Lab 2: Super Short Stories  

        This lab builds student understanding of reporter functions and their inputs. In the introductory story-building activity, students change the inputs to a super short story block (procedure) that takes multiple inputs, use random word generator blocks as inputs to the super short story block, and edit the code behind the random word generator blocks.
        - Super Short Story, feeling: (random feeling) job: (random job) action: (random action) place: (random place) action: (random action) number: (pick random from (1) to (10)) color: (random color) plural animal: (plural of (random animal)) food: (random food)
        + super short story, job: (random job) action: (random action ) number: (pick random (5) to (10)) plural animal: (plural of (random animal))
        Editing the list of possible random words for the generator blocks serves as students' first introduction to block-editing, randomness, and lists. As the lab progresses, students use the operators pick random from (1) to (10) and join () () as inputs to super short story then create a simple plural of block to abstract away the join function, and finally edit the super short story itself to customize it with their own story structure and create their own random word generator blocks. Along the way, students learn about nesting functions, creating and editing functions, and input parameters and arguments, and they build facility with the Snap! interface.

        -

        Pacing

        +

        Pacing

        In the high school BJC Teacher Guide, these are links to the student-facing pages, but here they are links to the sections of this teacher guide page. Thoughts? --MF, 8/13/21

        - This lab is designed for 1-3 class periods (45–110 minutes). + This lab may take your students 1-3 class periods (45–110 minutes).

        @@ -45,45 +50,33 @@

        Activity 1: Super Short Story Builder. 
      • Prepare:
          -
        • For an example of a paragraph-form (rather than single-sentence-form) of this activity, review the Wikipedia article on Mad Libs.
          • -
        • You may wish to work through this activity before sharing it with students.
          • -
        • If you have students with limited English language skills, you may wish to create a version of this Snap! project in their language. A little Google translate should go far; it might not be perfect, but it could go a long way in removing that potential barrier.
          • +
        • For an example of the type of project students are exploring, review the Wikipedia article on Mad Libs.
          • +
        • Consider working through this activity before class (at least creating a block that has multiple inputs and that uses the join block to generate a story).
        • - If you intend to do the Optional Offline Pre-Activity (creating a super short story together), write one or more single-sentence stories; for each story, select several words to remove; and for each removed word in a story, make note of a category of words that could replace that word. For example, for the story from the student's starter Snap! project, "The happy teacher jumps through Central Park and races over 7 red cats eating stir fry," the following words could be replaced by any word from the following categories: + If you intend to do the Optional Offline Pre-Activity described under Activity Plan below (creating a super short story together), prepare a single-sentence story, select several words to vary, and chose a variable/category to describe the type of words that could replace each original word.
          • +
        • This project allows for some creativity to unfold, and with that creativity comes the potential for problematic text being added to student projects. You may wish to review briefly your classroom norms at the start of class.
      • Learning Goals:
          -
        • Understand that a block is a piece of code that can be run by a computer.
          • -
        • Understand that a block can be run by clicking it.
          • -
        • Understand that reporter blocks are blocks that report outputs.
          • -
        • Understand that block can have inputs and that the output of one block can be used as the input to another.
          • -
        • Explore changing inputs by typing different text into the input slots and by dragging other blocks into the input slots.
          • +
        • Learn to change block inputs by typing different text into the input slots.
          • +
        • Learn to change block inputs by dragging other blocks into the input slots.
        • Observe how changing a reporter's inputs influences its output.
          • +
        • Learn that blocks can have random outputs.
      • @@ -93,50 +86,41 @@

        Activity 1: Super Short Story Builder.  Optional Offline Pre-Activity (5–10 minutes):
        • Tell students you have made up a super short story and you need their help to fill in some blanks.
          • -
        • Ask them for one (or more, as needed) word from each of the categories of the words you removed from your original story, displaying their responses as you go.
          • -
        • Read the resulting story (with their words in place of your removed words) out loud.
          • -
        • Repeat this process at least once with the same story and perhaps also with a second story, stopping while students are still enjoying the process.
          • +
        • Ask them for a word from each of the categories you prepared above story, recording their responses as you go.
          • +
        • Read the resulting story out loud (with their words in place of your removed words).
          • +
        • Repeat this process with the same story and/or with a second story, and explain that they will be coding ways for the computer to create silly stories like this.

      • - Exploring in Snap! (5–10 minutes): -
          -
        • - Students explore a super short story block that generates a short story using its inputs. They change the inputs and observe the impact on the reported sentence.
          - Super Short Story block with a variety of inputs reporting a single-sentence story using those inputs -
          • -
        • Students then explore several simple random blocks that report random words from various categories (action, place, color, food, etc.) and use these random word generators inside the super short story block.
          • -
        • Students then edit some of the random blocks to customize the story further.
          • -
        + Students explore a super short story block that generates a short story from its inputs. Students change the inputs and observe the impact on the reported sentence. (5–10 minutes)
        + Super Short Story block with a variety of inputs reporting a single-sentence story using those inputs
        • - +
      • Students then explore several blocks that report random words from various categories (eg, action, job, animal) and use these random word generators inside the super short story block. (5–10 minutes)

    9. Tips:
        -
      • This activity specifically avoids using parts of speech in order to keep reduce the English language prerequisites.
        • -
      • This project allows for some creativity to unfold, and with that creativity comes the potential for problematic text being added to student projects. You may wish to review briefly the classroom norms your students have established and/or refer back to it if needed.
        • -
      • The sentences generated by the super short story block might not always make sense, such as if the form of the action word (verb person or tense) does not match the story structure or if the input number does not match the count of the animal (e.g., "...races over 1 red cats..."). There will be optional opportunities for students to address these issues.
        • +
      • This activity avoids using parts of speech (eg, adjective, adverb, verb) in order to keep reduce the English language prerequisites.
        • +
      • The sentences generated by the super short story block might not always make sense (eg, if the form of a verb does not match). There will be opportunities for students to address some of these issues.
    10. Standards:
        -
      • 2-AP-14: Create procedures with parameters to organize code and make it easier to reuse.
        • +
      • None covered in this activity.
      11. - ↑ Back to Top -

      Activity 2: Refining the Story. 

      +

      Activity 2: Editing a Block. 

      More great stuff in the Storytelling Lab.
      • - Materials: Refining the Story student page + Materials: Editing a Block student page
        OLD: Refining the Story Google Doc
        • +
      • + Learning Goals: +
          +
        • Use Snap!'s random number procedure, pick random (1) to (10), to generate random numbers.
          • +
        +
        • +
      • + Activity Plan: +
          +
        • Students explore the pick random block to determine what it does, and then use it in super short story. (5–10 minutes)
          • +
        +
        • + +
      • + Standards: +
          +
        • None covered in this activity.
          • +
        +
        • +
      +
      + + ↑ Back to Top +

      Activity 4: Modifying Inputs with Join. 

      +
      +
        +
      • + Materials: Modifying Inputs with Join student page +
        • + +
      • + Learning Goals: +
          +
        • Concatenate text using the join block.
          • +
        +
        • +
      • + Activity Plan: +
          +
        • Students explore the join block to determine what it does, and then use it to pluralize the output of random animal. (5–10 minutes)
          • +
        +
        • + +
      • + Standards: +
          +
        • 2-AP-14: Create procedures with parameters to organize code and make it easier to reuse.
          • +
        +
        • +
      +
      + + ↑ Back to Top +

      Activity 5: Creating a Block. 

      +
      +
        +
      • + Materials: Creating a Block student page +
        • + +
      • + Learning Goals: +
          +
        • Learn to create a custom block.
          • +
        +
        • +
      • + Activity Plan: +
          +
        • Students create a plural of block that will soon hide the code join ()(s) code. (5–10 minutes)
          • +
        +
        • + +
      • + Standards: +
          +
        • 2-AP-14: Create procedures with parameters to organize code and make it easier to reuse.
          • +
        +
        • +
      +
      + ↑ Back to Top +

      Activity 6: Adding an Input to Your Block. 

      +
      +
        +
      • + Materials: Adding an Input to Your Block student page +
        • + +
      • + Learning Goals: +
          +
        • Learn to create a block input and use the local variable in its code.
          • +
        +
        • +
      • + Activity Plan: +
          +
        • Students edit their plural of block to contain the code join ()(s) code and then use it with random animal in super short story. (5–15 minutes)
          • +
        +
        • + +
      • + Standards: +
          +
        • 2-AP-14: Create procedures with parameters to organize code and make it easier to reuse.
          • +
        +
        • +
      +
      ↑ Back to Top -

      Activity 3: Creating and Editing Blocks. 

      +

      Activity 7: Editing the Story Structure. 

      Need to decide when/how to include abstraction. --MF
      + + ↑ Back to Top +

      Activity 8: Sharing Your Project. 

      +
      +

      FROM CSP

      +

      Activity 2: Saving Snap! Projects 

      +
      +
        +
      • Materials: Saving Snap! Projects student page
        • +
      • + Prepare: +
          +
        • If you haven't already, create your own Snap! account and sign up for access to BJC solutions and assessments.
          • +
        • Plan for students' Snap! use. This activity lists three options for how to save Snap! projects. The option you direct students to use will depend on your school and district's policies. Visit the Student Accounts and Privacy page for details behind these options. +
            +
          • The best option for most schools is Option B, which requires you to set up student accounts in bulk well before the first day of class. Directions are on the Student Accounts and Privacy page.
            • +
          • Option A is listed first as it is the only option that does not involve student Snap! accounts. If you are not ready for students to set up accounts yet, Option A will let them proceed with their project without losing their work. Students can always import and save their projects later if they make accounts.
            • +
          +
          • +
        • You may find it helpful to review the beginning of the Beauty and Joy of Computing: Snap! Crash Course and perhaps also to familiarize yourself with the structure of the Snap! Reference Manual, which is accessible by clicking the Snap! logo in the top left corner of any Snap! window.
          • +
        +
        • +
      • + Learning Goals: +
          +
        • Save their Snap! project.
          • +
        • If applicable, access or create a Snap! account.
          • +
        • Learn to navigate the Snap! interface.
          • +
        +
        • +
      • + Activity Plan: +
          +
        • Students save their Snap! project. If applicable, students will also access their Snap! accounts. (5–20 minutes)
          • +
        +
        • +
      • + Tips: +
          +
        • As mentioned in the "Prepare" section above, the best option for most schools will be Option B, which requires you to set up students account in bulk prior to the lab. See the Student Accounts and Privacy page.
          • +
        • Some students may already have personal Snap! accounts or would prefer to make their own. Encourage personal use of Snap!, but also insist that students use a student account for their school work.
        • If students set up Snap! accounts in class using Option C, consider asking students to enter in your (the teacher's) email address instead of their own. One advantage is that all password reset requests will then go to the teacher, instead of a student email that students may also have trouble accessing. Students' school email addresses may also be more short-lived than teacher addresses, so this potentially reduces instances where students lose access to their projects after they leave a school.
          • +
        • Snap! users can change their password at any time using the Cloud menu.
          • +
        • + Users can tell whether they are logged in by checking the Snap! Cloud menu: +
            +
          • If it says "Logout" and then a user name, then that user is logged in.
            • +
          • If it says "Login..." then no one is logged in.
            • +
          + If students are using shared computers, they should log out of Snap! when they are done.
          • +
        • You can also tell at a glance whether anyone is logged into Snap! because the cloud icon will be filled in (white) when someone is logged in. +
          • +
        • + Make note of any questions or difficulties that arise, and please share them with the curriculum developers: +
          Submit Feedback
          +
          • +
        +
        • +
      • + Standards: +
          +
        • None covered in this activity since it focuses on getting set up with Snap!.
          • +
        +
        • +
      +
      +
      +
      +
        +
      • + Materials: Sharing Your Project student page +
        • +
      • + Prepare: +
          +
        • Review the sharing process described on the student page that cooresponds with the project saving process your students are using.
          • +
        +
        • +
      • + Learning Goals: +
          +
        • Learn how to share Snap! projects.
          • +
        +
        • +
      • + Activity Plan: +
          +
        • Students perform the save process appropriate for your class. (5–10 minutes)
          • +
        +
        • + +
      • + Standards: +
          +
        • None covered in this activity since it focuses on using Snap!.
          • +
        + +
        • +
      +
      We are still missing the functional version of the Marching Orders activity and that will impact this time estimate. Also, I have some reconfiguring to do with the story stuff that may result in splitting lab 1 into the intro stuff and "say hello" followed by another lab here for the Story stuff ... --MF, 7/12/21
      + raw-html:
      • approximately 1 class period
      We are still missing the functional version of the Marching Orders activity and that will impact this time estimate. Also, I have some reconfiguring to do with the story stuff that may result in splitting lab 1 into the intro stuff and "say hello" followed by another lab here for the Story stuff ... --MF, 7/12/21
      resource: Lab 2: Super Short Stories [/bjc-r/sparks/teaching-guide/U1/02-storytelling.html] raw-html:
      • approximately 1–3 class periods
      resource: Lab 3: Dealing with Data [/bjc-r/sparks/teaching-guide/U1/03-dealing-with-data.html] @@ -37,7 +37,7 @@ h3: Teacher Guides for Student Labs resource: Lab 7: Dealing with Data Dos [/bjc-r/sparks/teaching-guide/U1/07-dealing-with-data-dos.html] raw-html:
      • approximately 4–11 class periods
      -//h3: Assessments and Solutions +//heading: Assessments and Solutions //raw-html:
      } diff --git a/topic/sparks/2-teaching-guide.topic b/topic/sparks/2-teaching-guide.topic index a21491ffa0..515e3f3271 100644 --- a/topic/sparks/2-teaching-guide.topic +++ b/topic/sparks/2-teaching-guide.topic @@ -2,37 +2,38 @@ title: Teaching Guide for Unit 2: Sequencing and Iteration { -h3: Purpose - raw-html: look up movie (Toy Story) block reporting a table with 6 rows and 2 columns; the elements of the first column are: Title, Year, Rated, Runtime, Genre, imdbRating; the elements of the second column are: Toy Story, 1995, G, 81 min, Animation..., 8.3 - raw-html:

      This unit moves beyond the functional programming paradigm to introduce commands, sequencing, and iteration. Students continue to develop their skills with selection, lists, and higher order functions as they learn when and how to use variables, control structures, logical operators, and nested lists through projects such as a movie recommender, a song player, and a first exploration of machine learning.

      - raw-html:
      Submit End-of-Lab or General Feedback
      - -h3: CSTA Standards: - raw-html:

        - raw-html:
      • 2-NI-04: Model the role of protocols in transmitting data across networks and the Internet.
        • - raw-html:
      • 2-DA-09: Refine computational models based on the data they have generated.
        • - raw-html:image of six blue circles lettered A-F; each circle is connected to 1-4 other circles - raw-html:
      • 2-AP-10: Use flowcharts and/or pseudocode to address complex problems as algorithms.
        • - raw-html:
      • 2-AP-11: Create clearly named variables that represent different data types and perform operations on their values.
        • - raw-html:
      • 2-AP-12: Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
        • - raw-html:
      • 2-AP-13: Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
        • - raw-html:
      • 2-AP-14: Create procedures with parameters to organize code and make it easier to reuse.
        • - raw-html:
      • 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.
        • - raw-html:
      • 2-AP-17: Systematically test and refine programs using a range of test cases.
        • - raw-html:
      • 2-AP-18 Distribute tasks and maintain a project timeline when collaboratively developing computational artifacts.
        • - raw-html:
      • 2-IC-20: Compare tradeoffs associated with computing technologies that affect people's everyday activities and career options.
        • - raw-html:
      • 2-IC-21: Discuss issues of bias and accessibility in the design of existing technologies.
        • - raw-html:

      +heading: Purpose + raw-html: look up movie (Toy Story) block reporting a table with 6 rows and 2 columns; the elements of the first column are: Title, Year, Rated, Runtime, Genre, imdbRating; the elements of the second column are: Toy Story, 1995, G, 81 min, Animation..., 8.3 +

      This unit moves beyond the functional programming paradigm to introduce commands, sequencing, and iteration. Students continue to develop their skills with selection, lists, and higher order functions as they learn when and how to use variables, control structures, logical operators, and nested lists through projects such as a movie recommender, a song player, and a first exploration of machine learning.

      +
      Submit End-of-Lab or General Feedback
      + +heading: CSTA Standards: + raw-html:

        +
      • 2-NI-04: Model the role of protocols in transmitting data across networks and the Internet.
        • +
      • 2-DA-09: Refine computational models based on the data they have generated.
        • + image of six blue circles lettered A-F; each circle is connected to 1-4 other circles +
      • 2-AP-10: Use flowcharts and/or pseudocode to address complex problems as algorithms.
        • +
      • 2-AP-11: Create clearly named variables that represent different data types and perform operations on their values.
        • +
      • 2-AP-12: Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
        • +
      • 2-AP-13: Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
        • +
      • 2-AP-14: Create procedures with parameters to organize code and make it easier to reuse.
        • +
      • 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.
        • +
      • 2-AP-17: Systematically test and refine programs using a range of test cases.
        • +
      • 2-AP-18 Distribute tasks and maintain a project timeline when collaboratively developing computational artifacts.
        • +
      • 2-IC-20: Compare tradeoffs associated with computing technologies that affect people's everyday activities and career options.
        • +
      • 2-IC-21: Discuss issues of bias and accessibility in the design of existing technologies.
        • +

      raw-html: a flowchart starting with a rhombus labeled 'What's the outlook?' at the top. There are three labeled arrows coming out of the top rhombus leading to a second row of shapes: one arrow labeled 'sunny' leading to a rhombus labeled 'How humid is it?', one arrow labeled 'overcast' leading to a rectangle labeled 'Play!', and one arrow labeled 'rainy' leading to a rhombus labeled 'Is it windy?'. There are two labeled arrows coming out of the 'How humid is it?' rhombus leading to a third row of shapes: one arrow labeled '> 70' leading to a rectangle labeled 'Stay in!' and one arrow labeled '<=' leading to a rectangle labeled 'Play!'. And there are two labeled arrows coming out of the 'Is it windy?' rhombus leading to two additional shapes in the third row: one arrow labeled 'TRUE' leading to a rectangle labeled 'Stay in!' and one arrow labeled 'FALSE' leading to a rectangle labeled 'Play!'. -h3: Teacher Guides for Student Labs + +heading: Teacher Guides for Student Labs resource: Lab 1: Song Player [/bjc-r/sparks/teaching-guide/U2/01-song-player.html] raw-html:
      • approximately 3–10 class periods (125–440 minutes)
      resource: Lab 2: Graphics and Animation [/bjc-r/sparks/teaching-guide/U2/02-graphics-animation.html] raw-html:
      • approximately 5–16 class periods (215–705 minutes)
      - raw-html:
      The remainder of this unit is under development.
      + raw-html:
      The remainder of this unit is under development.
      raw-html: Lab 3: Make Some Noise (under development) raw-html:
      • will include activities such as: Sound Visualizer and Sound Generator
      @@ -48,7 +49,7 @@ h3: Teacher Guides for Student Labs raw-html:
      • will include activities such as: Decision Tree, Movie Recommender, Machine Learning, and Snap! Gestures
      //raw-html:
      • approximately X–X class periods
      -//h3: Assessments and Solutions +//heading: Assessments and Solutions //raw-html:
      } diff --git a/topic/sparks/3-teaching-guide.topic b/topic/sparks/3-teaching-guide.topic index d175e953f1..5851b9d33c 100644 --- a/topic/sparks/3-teaching-guide.topic +++ b/topic/sparks/3-teaching-guide.topic @@ -2,35 +2,35 @@ title: Teaching Guide for Unit 3: Hardware { -h3: Purpose +heading: Purpose raw-html: micro:bit hardware board raw-html:

      This unit extends student work with sequencing and iteration into the realm of physical computing using the micro:bit controller. Students use craft materials to build a toy and game; use e-textile materials (e.g., conductive thread, LEDs, and sensors) to create circuits; use neopixels to program creations to change colors, twinkle, and pulse; and program micro:bits to send and receive messages. The unit culminates with building collaborative chain reaction (Rube Goldberg) machines.

      raw-html:
      Submit End-of-Lab or General Feedback
      -h3: CSTA Standards: - raw-html:
      Hi Deanna, Here are some possible standards I imagine you might be planning to cover. Please adjust as needed. Some of these have been covered in other units; some have not. --MF, 10/23/21
      - raw-html:

        - raw-html:
      • 2-CS-01: Recommend improvements to the design of computing devices, based on an analysis of how users interact with the devices.
        • - raw-html:
      • 2-CS-02: Design projects that combine hardware and software components to collect and exchange data.
        • - raw-html:
      • 2-CS-03: Systematically identify and fix problems with computing devices and their components.
        • - raw-html:
        2-AP-13 and 2-AP-13 are also covered in U1, and these are planned for U2:
        • 2-AP-10
        • 2-AP-11
        • 2-AP-12
        • 2-AP-13
        • 2-AP-14
        • 2-AP-16
        • 2-AP-17
        - raw-html:
      • 2-AP-10: Use flowcharts and/or pseudocode to address complex problems as algorithms.
        • - raw-html:
      • 2-AP-11: Create clearly named variables that represent different data types and perform operations on their values.
        • - raw-html:
      • 2-AP-12: Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
        • - raw-html:
      • 2-AP-13: Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
        • - raw-html:
      • 2-AP-14: Create procedures with parameters to organize code and make it easier to reuse.
        • - raw-html:
      • 2-AP-15: Seek and incorporate feedback from team members and users to refine a solution that meets user needs.
        • - raw-html:
      • 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.
        • - raw-html:
      • 2-AP-17: Systematically test and refine programs using a range of test cases.
        • - raw-html:
      • 2-AP-18 Distribute tasks and maintain a project timeline when collaboratively developing computational artifacts.
        • - raw-html:
      • 2-IC-22: Collaborate with many contributors through strategies such as crowdsourcing or surveys when creating a computational artifact.
        • - raw-html:

      +heading: CSTA Standards: + raw-html:
      Hi Deanna, Here are some possible standards I imagine you might be planning to cover. Please adjust as needed. Some of these have been covered in other units; some have not. --MF, 10/23/21
      +

        +
      • 2-CS-01: Recommend improvements to the design of computing devices, based on an analysis of how users interact with the devices.
        • +
      • 2-CS-02: Design projects that combine hardware and software components to collect and exchange data.
        • +
      • 2-CS-03: Systematically identify and fix problems with computing devices and their components.
        • +
        2-AP-13 and 2-AP-13 are also covered in U1, and these are planned for U2:
        • 2-AP-10
        • 2-AP-11
        • 2-AP-12
        • 2-AP-13
        • 2-AP-14
        • 2-AP-16
        • 2-AP-17
        +
      • 2-AP-10: Use flowcharts and/or pseudocode to address complex problems as algorithms.
        • +
      • 2-AP-11: Create clearly named variables that represent different data types and perform operations on their values.
        • +
      • 2-AP-12: Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
        • +
      • 2-AP-13: Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
        • +
      • 2-AP-14: Create procedures with parameters to organize code and make it easier to reuse.
        • +
      • 2-AP-15: Seek and incorporate feedback from team members and users to refine a solution that meets user needs.
        • +
      • 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.
        • +
      • 2-AP-17: Systematically test and refine programs using a range of test cases.
        • +
      • 2-AP-18 Distribute tasks and maintain a project timeline when collaboratively developing computational artifacts.
        • +
      • 2-IC-22: Collaborate with many contributors through strategies such as crowdsourcing or surveys when creating a computational artifact.
        • +

      //raw-html:some kind of image ;) raw-html:
      For more micro:bit resources, check out the activities available on Learn MicroBlocks.
      -h3: Teacher Guides for Student Labs +heading: Teacher Guides for Student Labs resource: Lab 1: Meet micro:bit [/bjc-r/sparks/teaching-guide/U3/01-meet-microbit.html] raw-html:
      • approximately 1–2 class periods
      //raw-html:
      The remaining labs are under development and do not yet have a teacher guide. We are sharing the student-facing materials in early draft form now for intrepid pilot classes. The structure and content of the student labs may change as they are completed. Please post any questions on Piazza.
      @@ -47,7 +47,6 @@ h3: Teacher Guides for Student Labs resource: Lab 7: Collaborative Chain Reaction [/bjc-r/sparks/teaching-guide/U3/07-collaborative-chain-reaction.html] raw-html:
      • approximately 3–5 class periods
      -//h3: Assessments and Solutions +//heading: Assessments and Solutions //raw-html:
      - } diff --git a/utilities/build-tools/topic.rb b/utilities/build-tools/topic.rb index 94e53a3909..630fc20586 100644 --- a/utilities/build-tools/topic.rb +++ b/utilities/build-tools/topic.rb @@ -1,11 +1,17 @@ +# frozen_string_literal: true + require_relative 'bjc_helpers' class BJCTopic - attr_reader :file_path, :file_name, :title, :language + attr_reader :file_path, :course, :title, :language + + RESOURCES_KEYWORDS = %w[quiz assignment resource forum video extresource reading group] + HEADINGS_KEYWORDS = %w[h1 h2 h3 h4 h5 h6 heading] + INFO_KEYWORDS = %w[big-idea learning-goal] - # TODO: Is it useful to know the course a topic came with? def initialize(path, course: nil, language: 'en') @file_path = path + @course = course if !File.exist?(@file_path) raise "Error: No file found at #{file_path}" @@ -16,6 +22,13 @@ def file_contents @file_contents ||= File.read(@file_path) end + # Just the part of the file path relative to the topic/ directory + # This is used in the URL for the topic, ?topic=llab_reference_path + def llab_reference_path + # Strips everything before the topic/ directory + @file_path.match(/\/topic\/(.*\.topic)/)[1] + end + # This should return some hash-type structure # look at the code in llab # TODO: this could arguably be its own class. @@ -37,9 +50,29 @@ def base_content_folder; end def section_headings; end # This should explicitly exclude the 3 compiled HTML pages. - def all_pages; end - def all_pages_with_summaries; end + def all_pages_without_summaries + all_pages(include_summaries: false) + end + + def all_pages(include_summaries=false) + parsed_topic_object[:topics].map do |topic| + topic[:content].map do |entry| + next if is_summary_section?(entry) || (!entry[:url].nil? && is_summary_page?(entry)) + + if entry[:type] == 'section' + extract_pages_in_section(entry, include_summaries: include_summaries) + elsif RESOURCES_KEYWORDS.include?(entry[:type]) + entry[:url] + end + end.flatten + end.flatten + end + + # Return all valid links to HTML pages as an array (no nesting) + def all_pages_with_summaries + all_pages(include_summaries: true) + end def to_h = parse @@ -47,25 +80,21 @@ def to_json(*_args) to_h.to_json end + # Build a compliant llab URL that would show the full page w/ navigation + # Adds a topic and course reference to the URL + # TODO: This isn't the right abstraction... + # This should maybe be called automatically by the all_pages functions? + def augmented_page_paths_in_topic + all_pages_without_summaries.map do |path| + "#{path}?topic=#{llab_reference_path}&course=#{course}" + end + end + # TODO: Cleanup when we move to a topic parser class. def parsed_topic_object @parsed_topic_object ||= parse_topic_file(file_contents) end - # TODO: What other things might we do with a topic file? - # Do we need to render the HTML to auit accessibility, etc? - # Can we return just the HTML fragments? - - # remove the text after // only if // is at the beginning of a line, or preceded by whitespace. - # Input: "// hello" Outpit" "" - # Input "resource: Text [http://test]" Output: "resource: Text [http://test]" - # Input "resource: Text [http://test] // Comment" Output: "resource: Text [http://test]" - def strip_comments(s) - return '' unless s - - s.gsub(/(\s|^)\/\/.*/, '').strip - end - ########################### #### CODE BELOW THIS LINE SHOULD BE REWRITTEN!!! ### This was JavaScript (mostly) auto-translated by ChatGPT @@ -73,17 +102,6 @@ def strip_comments(s) ### It can more easily maintain state, like @lineNumber and @currentSection ######### def parse_topic_file(data) - # TEMPORARY HACK - llab = {} - llab[:topic_keywords] = {} - llab[:topic_keywords][:resources] = %w[quiz assignment resource - forum video extresource - reading group] - llab[:topic_keywords][:headings] = %w[h1 h2 h3 h4 h5 h6 heading] - llab[:topic_keywords][:info] = %w[big-idea learning-goal] - - # llab[:file] = llab[:topic] - data = data.gsub(/(\r)/, '') # normalize line endings lines = data.split("\n") # TODO: Reduce unnecessary nesting! @@ -105,7 +123,7 @@ def parse_topic_file(data) text = get_content(line)[:text] # in case they start the raw html on the same line raw_html = text next_line = strip_comments(lines[i + 1]) - while next_line.length >= 1 && next_line[0] != '}' && !is_keyword(next_line) do + while next_line.length >= 1 && next_line[0] != '}' && !is_keyword?(next_line) do i += 1 next_line = strip_comments(lines[i + 1]) line = strip_comments(lines[i]) # TODO: Is this right? Probably? @@ -118,16 +136,16 @@ def parse_topic_file(data) topics[:topics].push(topic_model) section = { title: '', content: [], type: 'section' } topic_model[:content].push(section) - elsif is_heading(line) + elsif is_heading?(line) # Start a new section in the topic moduel - heading_type = get_keyword(line, llab[:topic_keywords][:headings]) + heading_type = get_keyword(line, HEADINGS_KEYWORDS) if section[:content].length > 0 section = { title: '', content: [], type: 'section' } topic_model[:content].push(section) end - section[:title] = get_content(line)[:text] section[:headingType] = heading_type - else # is_info || is_resource || unknown + section[:title] = get_content(line)[:text] + else # is_info? || is_resource? || unknown item = parse_line(line) section[:content].push(item) end @@ -136,52 +154,6 @@ def parse_topic_file(data) topics end - - # TODO - def indent_level(s) - 0 - end - - # TODO: This is a 'matches any keywords' - # build the (#{regex: array.join('|')}): - def matches_array(line, array) - matches = array.map { |s| line.match(s) } - matches.any? { |m| !m.nil? } - end - - def get_keyword(line, array) - matches = array.map { |s| line.match(s) } - index = matches.index { |m| !m.nil? } - array[index] unless index.nil? - end - - # Split "resource: Text [url]" in the right parts. - # TODO: figure out of this is necessary or to reuse parse_line - def get_content(line) - return { text: '', url: '' } unless line - content = line.split(':') - return { text: '', url: '' } unless content.length > 1 - sliced = content[1].split(/\[|\]/) - text = sliced.length > 0 ? sliced[0].strip : '' - url = sliced.length > 1 ? sliced[1].strip : '' - { text: text, url: url } - end - - def is_resource(line) - matches_array(line, %w[quiz assignment resource forum video extresource reading group]) - end - - def is_info(line) - matches_array(line, %w[big-idea learning-goal]) - end - - def is_heading(line) - matches_array(line, %w[h1 h2 h3 h4 h5 h6 heading]) - end - - def is_keyword(line) - is_resource(line) || is_info(line) || is_heading(line) - end ##### END CHAT GPT CODE ## Consider fleshing this out... @@ -190,11 +162,11 @@ def is_keyword(line) ### Should return: ### { type: resource, content: 'Title Text', url: url, indent: 1 } def parse_line(line) - indent = indent_level(line.match(/^\s*/)) + indent = indent_level(line.match(/^(\s*)/)[1] || '') line = line.gsub(/^\s*/, '') resource_matcher = line.match(/^([\w\-]+):\s/) if !resource_matcher - puts "Could not find any resource for line: #{line}" + # puts "Could not find any resource for line: #{line}" resource = 'text' else # TODO: Warn if an unknown resource is present? @@ -228,7 +200,7 @@ def extract_content_url(partial_line) #not fully function - vic added def generate_topic_file(json_hash) topic_file = "title: #{json_hash[:title]}\n" - + json_hash[:content].each do |section| topic_file += "\nheading: #{section[:title]}\n" section[:content].each do |item| @@ -239,9 +211,100 @@ def generate_topic_file(json_hash) end end end - + File.open(topic_file, 'w') {|f| f.write(topic_file) } + end + + private + # TODO: Many methods above should be made private + + # Determines if a section is a "summary" of content based on the heading. + SUMMARY_SECTION_TITLES = [ + /Unit\s*\d+\s*Review/, + /Unidad\s*\d+\s*Revision/, + ] + def is_summary_section?(section) + SUMMARY_SECTION_TITLES.any? { |re| section[:title].match?(re) } + end + + SUMMARY_URLS = [ + /\/summaries\//, # all pages in a summaries directory + /unit-.*-vocab.*\.html/, + /unit-.*-self-check.*\.html/, + /unit-.*-exam-reference.*\.html/, + ] + def is_summary_page?(item) + SUMMARY_URLS.any? { |re| item[:url].match?(re) } + end + + # Takes in one "section" of the parsed topic object + # Returns an array of all the paths in that section + # If include_summaries = false, then known "summary" URLs are exlcuded + # this means quizzes, vocab, ap exam pages. + def extract_pages_in_section(parsed_section, include_summaries=true) + parsed_section[:content].map do |item| + if !include_summaries && is_summary_page?(item) + nil + elsif RESOURCES_KEYWORDS.include?(item[:type]) + item[:url] + elsif item[:type] == 'section' + extract_pages_in_section(item) + else + nil + end + end.flatten.compact + end + + ### Parsing Helpers -- These should be moved at some point... + + # remove the text after // only if // is at the beginning of a line, or preceded by whitespace. + # Input: "// hello" Outpit" "" + # Input "resource: Text [http://test]" Output: "resource: Text [http://test]" + # Input "resource: Text [http://test] // Comment" Output: "resource: Text [http://test]" + def strip_comments(s) + return '' unless s + + s.gsub(/(\s|^)\/\/.*/, '').strip + end + + # Each 'line' in a topic file can be 'indented' by tabs or spaces, which affects + # its visual position when rendered. + # NOTE: a the difference between 2 or 4 spaces as one "indent level" was never defined. + def indent_level(s, tab_size = 4) + s.count("\t") + s.count(' ')/tab_size + end + + def get_keyword(line, array) + matches = array.map { |s| line.match(s) } + index = matches.index { |m| !m.nil? } + array[index] unless index.nil? + end + + # Split "resource: Text [url]" in the right parts. + # TODO: figure out of this is necessary or to reuse parse_line + def get_content(line) + return { text: '', url: '' } unless line + content = line.split(':') + return { text: '', url: '' } unless content.length > 1 + sliced = content[1].split(/\[|\]/) + text = sliced.length > 0 ? sliced[0].strip : '' + url = sliced.length > 1 ? sliced[1].strip : '' + { text: text, url: url } + end + + def is_resource?(line) + RESOURCES_KEYWORDS.any? { |word| line.include?(word) } + end + + def is_info?(line) + INFO_KEYWORDS.any? { |word| line.include?(word) } + end + + def is_heading?(line) + HEADINGS_KEYWORDS.any? { |word| line.include?(word) } + end + def is_keyword?(line) + is_resource?(line) || is_info?(line) || is_heading?(line) end - end diff --git a/utilities/specs/accessibility_spec.rb b/utilities/specs/accessibility_spec.rb new file mode 100644 index 0000000000..ae87cdf2b0 --- /dev/null +++ b/utilities/specs/accessibility_spec.rb @@ -0,0 +1,160 @@ +# frozen_string_literal: true + +# Run accessibility specs for all pages in the webiste. +# This runs the axe accessibility checker on each page in a headless browser. + + require 'nokogiri' + +# Load our custom BJC tools +require_relative '../build-tools/bjc_helpers' +require_relative '../build-tools/course' +require_relative '../build-tools/topic' + +# spec_helper ensures the webiste is built and can be served locally +require_relative './spec_helper' + +# ===== Page / Couse List +# Use course as a tag (`rspec --tag bjc4nyc`) to run only the tests for that course. +COURSES = %w[ + bjc4nyc + bjc4nyc.es + sparks + bjc4nyc_teacher + sparks-teacher +] +ALL_PAGES = load_site_urls(COURSES) +# A handful of pages we should ensure are compliant. +ALL_PAGES['general'] = [ + '/bjc-r/', + '/bjc-r/docs/style_guide.html', + '/bjc-r/docs/best_practices.html', + '/bjc-r/docs/translations.html', + '/bjc-r/topic/topic.html', + '/bjc-r/topic/topic.es.html', + '/bjc-r/sparks/design-principles.html', + '/bjc-r/mini/index.html' +] +# =============================== + +def test_tags(tags) + # Adds "course_wcag22" tag to the list. + tags << tags.join("_") + Hash[tags.map { |k| [k.to_sym, true] }] +end + +# Create a readable path for specs from the page URL +def trimmed_url(url) + path = url.gsub('/bjc-r', '') + path.split('?').first # Trim all query parameters for readability. +end + +def topic_from_url(url) + return '-' unless url.match(/topic=(.*)\.topic/) + + "- #{Regexp.last_match(1)}" +end + +def a11y_test_cases(course, url) + # A little hacky, but `rspec --tag` doesn't allow "and" conditions. + # Allows CI to run only the tests for a specific course AND standard. + wcag20_tags = test_tags([course, :wcag20]) + wcag22_tags = test_tags([course, :wcag22]) + subset_tags = test_tags([course, :subset]) + + # ====== AXE Configuration + # Axe-core test standards groups + # See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#axe-core-tags + required_a11y_standards = %i[wcag2a wcag2aa] + # These are currently skipped until the basic tests are passing. + complete_a11y_standards = %i[wcag21a wcag21aa wcag22aa wcag2a-obsolete best-practice secion508] + + # axe-core rules that are not required to be accessible / do not apply + # See: https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md + # This should be empty and all additions should be extensively documented, or temporary. + skipped_rules = [] + + # These are elements that are not required to be accessible + excluded_elements = [ + # should be used very sparingly. + '[data-a11y-errors="true"]', + # Developer Tools, which aren't visible in production + '.todo', + '.comment', + '.commentBig', + '.ap-standard', + '.csta-standard', + # TODO: items below here **must** be fixed eventually. + 'var', # Snap! elements don't have enough color contrast. + ] + + describe "#{course} #{topic_from_url(url)} (#{trimmed_url(url)}) :", + type: :feature, js: true do + before(:each) do + visit(url) + + if page.html.match?(/File not found:/) + skip("TODO: #{url} is a 404 page.") + end + + # TODO: Add a function to expand all optional content. + # TODO: This only works for the ifTime, etc. boxes. + page.execute_script <<~JS + elementsArray = (selector) => Array.from(document.querySelectorAll(selector)); + window.onload = (_) => { + elementsArray('details').forEach(el => el.open = true); + elementsArray('[data-toggle="collapse"]').forEach(el => el.click()) + }; + JS + end + + # These tests should always be enabled. + it 'is WCAG 2.0 accessible', **wcag20_tags do + expect(page).to be_axe_clean + .according_to(*required_a11y_standards) + .skipping(*skipped_rules) + .excluding(*excluded_elements) + end + + it 'is WCAG 2.2 accessible', **wcag22_tags do + expect(page).to be_axe_clean + .according_to(*complete_a11y_standards) + .skipping(*skipped_rules) + .excluding(*excluded_elements) + end + + # Run tests only on a subset of rules when necessary. + # it 'passes a subset a11y rules', **subset_tags do + # expect(page).to be_axe_clean + # .checking_only(%i| + # color-contrast + # |) + # .excluding(*excluded_elements) + # end + + # TODO: This test *kind of* works, but has too many false positives. + # Some URLs fail on GitHub actions which are actually valid when used by a human. + # it 'has no broken links', **subset_tags do + # passed_test = true + # page.all('a').each do |link| + # url = link['href'] + # next unless url + + # # All google docs seem to report 401's falsely in CI. + # next if url.match(/docs\.google\.com/) + + # response = Net::HTTP.get_response(URI(url)) + # unless [200, 301, 302, 303].include?(response.code.to_i) + # passed_test = false + # puts "Broken link: #{url} returned a #{response.code}" + # end + # end + # expect(passed_test).to be true + # end + end +end + + +puts "Running tests on #{ALL_PAGES.values.map(&:length).sum} pages." +ALL_PAGES.each do |course, pages| + pages.each { |url| a11y_test_cases(course, url) } +end diff --git a/utilities/specs/spec_helper.rb b/utilities/specs/spec_helper.rb new file mode 100644 index 0000000000..6ae576c26d --- /dev/null +++ b/utilities/specs/spec_helper.rb @@ -0,0 +1,174 @@ +# frozen_string_literal: true + +# This file was generated by the `rspec --init` command. Conventionally, all +# specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`. +# The generated `.rspec` file contains `--require spec_helper` which will cause +# this file to always be loaded, without a need to explicitly require it in any +# files. +# +# Given that it is always loaded, you are encouraged to keep this file as +# light-weight as possible. Requiring heavyweight dependencies from this file +# will add to the boot time of your test suite on EVERY test run, even for an +# individual file that may not need all of that loaded. Instead, consider making +# a separate helper file that requires the additional dependencies and performs +# the additional setup, and require it from the spec files that actually need +# it. +# +# See https://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration + +require 'rspec' +require 'rack' + +require 'capybara/rspec' +# require 'capybara-screenshot/rspec' +require 'rack/test' +require 'axe-rspec' +require 'axe-capybara' +require 'capybara/dsl' +require 'capybara/session' +require 'capybara-screenshot' + +# ===== bjc-r specific config/parsing.... +# TODO: This code should be moved to support/parsing sections. +def load_site_urls(courses) + # Map is a course_name => [url1, url2, ...] + courses.map do |course| + puts "Buidling URLs for #{course}..." + [course, load_all_urls_in_course("#{course}.html")] + end.to_h +end + +def extract_urls_from_page(topic_file, course) + topic_file = File.join(File.dirname(__FILE__), '..', '..', 'topic', topic_file) + lang = topic_file.match(/\.(\w\w)\.topic/) ? Regexp.last_match(1) : 'en' + topic_parser = BJCTopic.new(topic_file, course: course, language: lang) + topic_parser.augmented_page_paths_in_topic +end + +def load_all_urls_in_course(course) + # Read the course page, then add all "Unit" URLs to the list + # TODO: Use the BJCCourse class to extract the URLs + results = [ "/bjc-r/course/#{course}" ] + course_file = File.join(File.dirname(__FILE__), '..', '..', 'course', course) + doc = Nokogiri::HTML(File.read(course_file)) + urls = doc.css('.topic_container .topic_link a').map { |url| url['href'] } + + topic_pages = urls.filter_map do |url| + next unless url.match?(/\.topic/) + + query_separator = url.match?(/\?/) ? '&' : '?' + results << "#{url}#{query_separator}course=#{course}" + topic_file = url.match(/topic=(.*\.topic)/)[1] + extract_urls_from_page(topic_file, course) + end.flatten + + results << topic_pages + results << urls.filter_map { |url| "#{url}#{url.match?(/\?/) ? '&' : '?'}course=#{course}" if !url.match?(/\.topic/) } + results.flatten.reject { |u| !u.start_with?('/bjc-r') }.uniq +end + +# ======== end bjc-r stuff ========== + + +# This is the root of the repository, e.g. the bjc-r directory +# Update this is you move this file. +REPO_ROOT = File.expand_path('../../', __dir__) + +# https://nts.strzibny.name/how-to-test-static-sites-with-rspec-capybara-and-webkit/ +class StaticSite + attr_reader :root, :server + + # TODO: Rack::File will be deprecated soon. Find a better solution. + def initialize(root) + @root = root + @server = Rack::File.new(root) + end + + def call(env) + # Remove the /bjc-r prefix, which is present in all URLs, but not in the file system. + path = env['PATH_INFO'].gsub('/bjc-r', '') + + + # Use index.html for / paths + if path == '/' && exists?('index.html') + env['PATH_INFO'] = '/index.html' + elsif !exists?(path) && exists?(path + '.html') + env['PATH_INFO'] = "#{path}.html" + else + env['PATH_INFO'] = path + end + + server.call(env) + end + + def exists?(path) + File.exist?(File.join(root, path)) + end +end + +Capybara::Screenshot.prune_strategy = :keep_last_run + +# Setup for Capybara to serve static files served by Rack +Capybara.server = :webrick +Capybara.app = Rack::Builder.new do + map '/' do + use Rack::Lint + run StaticSite.new(REPO_ROOT) + end +end.to_app + +Capybara.save_path = File.join(REPO_ROOT, 'tmp') + +Capybara.register_driver :chrome_headless do |app| + options = Selenium::WebDriver::Chrome::Options.new + options.add_argument('--headless') + options.add_argument('--no-sandbox') + options.add_argument('--disable-dev-shm-usage') + # macbook air ~13" screen width + options.add_argument('--window-size=1280,2500') + + Capybara::Selenium::Driver.new(app, browser: :chrome, options:) +end + +# Should be :chrome_headless in CI though. +Capybara.default_driver = :chrome_headless +Capybara.javascript_driver = :chrome_headless + +# Capybara::Screenshot.register_driver(:chrome_headless) do |driver, path| +# driver.save_screenshot(path, full: true) +# end + +RSpec.configure do |config| + config.include Capybara::DSL + + # Allow rspec to use `--only-failures` and `--next-failure` flags + # Ensure that `tmp` is in your `.gitignore` file + config.example_status_persistence_file_path = 'tmp/rspec-failures.txt' + + # rspec-expectations config goes here. You can use an alternate + # assertion/expectation library such as wrong or the stdlib/minitest + # assertions if you prefer. + config.expect_with :rspec do |expectations| + # This option will default to `true` in RSpec 4. It makes the `description` + # and `failure_message` of custom matchers include text for helper methods + # defined using `chain`, e.g.: + # be_bigger_than(2).and_smaller_than(4).description + # # => "be bigger than 2 and smaller than 4" + # ...rather than: + # # => "be bigger than 2" + expectations.include_chain_clauses_in_custom_matcher_descriptions = true + end + + # rspec-mocks config goes here. You can use an alternate test double + # library (such as bogus or mocha) by changing the `mock_with` option here. + config.mock_with :rspec do |mocks| + mocks.verify_partial_doubles = true + end + + # This option will default to `:apply_to_host_groups` in RSpec 4 (and will + # have no way to turn it off -- the option exists only for backwards + # compatibility in RSpec 3). It causes shared context metadata to be + # inherited by the metadata hash of host groups and examples, rather than + # triggering implicit auto-inclusion in groups with matching metadata. + config.shared_context_metadata_behavior = :apply_to_host_groups +end diff --git a/utilities/specs/spec_summary.rb b/utilities/specs/spec_summary.rb new file mode 100644 index 0000000000..a0ef001854 --- /dev/null +++ b/utilities/specs/spec_summary.rb @@ -0,0 +1,69 @@ +# frozen_string_literal: true + +# Summarize the axe rspec failures into aggregate counts +# TODO: This should be an RSpec formatter + +require 'json' +require 'pp' + +RESULTS_PATH = File.join(File.dirname(__FILE__), '..', '..', 'tmp/rspec_output.json') +AXE_CASE_TITLE = /\n\s*\n\s*\d+\)\s+([-\w]+):/ + + +def failing_specs(results_data) + results_data['examples'].filter do |ex| + ex['status'] == 'failed' + end +end + +def summarize_results(results) + failing_specs(results).map do |ex| + ex['exception']['message'].scan(AXE_CASE_TITLE) + end.flatten.tally +end + +def group_results(results) + all_cases_list = failing_specs(results).map do |ex| + msg = ex['exception']['message'] + msg.gsub!(/\nInvocation:.*;/, '') + cases = msg.split(AXE_CASE_TITLE) + cases.delete_at(0) + Hash[*cases].transform_values { |v| { page: ex['full_description'], message: v }} + end + results = Hash.new + results.default = [] + all_cases_list.each do |test_hash| + test_hash.each do |axe_name, failure| + if results.has_key?(axe_name) + results[axe_name] << failure + else + results[axe_name] = [ failure ] + end + end + end + results +end + +def test_failures_with_pages(summary_group) + summary_group.transform_values { |list| list.map { |h| h[:page] } } +end + +def nicely_print(hash) + hash.each do |key, values| + puts "#{key}:" + values.each { |item| puts("\t#{item}") } + end +end + +def print_summary + results_data = JSON.parse(File.read(RESULTS_PATH)) + failing_tests_by_type = summarize_results(results_data) + pp(failing_tests_by_type) + puts "Total: #{failing_tests_by_type.values.sum} failures." + + puts "\n#{'-'*16}" + summary_group = group_results(results_data) + nicely_print(test_failures_with_pages(summary_group)) +end + +print_summary