From 6817a8c9910196bd4d54c2ba0919a1ed1cb6b830 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 12:28:37 -0700 Subject: [PATCH 01/16] Update gemfile --- .github/workflows/specs.yml | 8 +-- Gemfile | 28 +++++---- Gemfile.lock | 111 ++------------------------------- utilities/specs/spec_helper.rb | 86 ++++++++++--------------- 4 files changed, 60 insertions(+), 173 deletions(-) diff --git a/.github/workflows/specs.yml b/.github/workflows/specs.yml index a9dd5301e..a7a0bcb52 100644 --- a/.github/workflows/specs.yml +++ b/.github/workflows/specs.yml @@ -1,6 +1,6 @@ name: Run rspec tests -on: +on: - pull_request - push - workflow_dispatch @@ -9,11 +9,9 @@ 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 + # The files in /bjc-r/course/ (excluding the .html) # These correspond to rspec tags for each test run. course: - bjc4nyc @@ -28,7 +26,7 @@ jobs: - uses: actions/checkout@v3 - uses: ruby/setup-ruby@v1 with: - # ruby-version: 3.2.2 + # Specified by .ruby-version bundler-cache: true - name: a11y tests run: bundle exec rspec utilities/specs --tag ${{ matrix.course }}_${{ matrix.suite }} diff --git a/Gemfile b/Gemfile index d427b9cc0..18844abbf 100644 --- a/Gemfile +++ b/Gemfile @@ -8,14 +8,20 @@ source 'https://rubygems.org' ruby file: '.ruby-version' -gem 'axe-core-capybara' -gem 'axe-core-rspec' -gem 'capybara' -gem 'capybara-screenshot' -gem 'nokogiri' -# TODO: Replace this gem with a better default... -gem 'rack-jekyll' -gem 'rspec' -gem 'selenium-webdriver' -gem 'webdrivers' -gem 'webrick' +group :development, :test do + # Testing framework + gem 'rspec' + # Browser-based testing hooks + gem 'capybara' + gem 'capybara-screenshot' + gem 'selenium-webdriver' + gem 'webdrivers' + # Accessibility testing tools + gem 'axe-core-capybara' + gem 'axe-core-rspec' + # Testing supports + gem 'nokogiri' + gem 'rack', '~> 3' + gem 'rackup' + gem 'webrick' +end diff --git a/Gemfile.lock b/Gemfile.lock index b920e8339..f02065809 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -17,7 +17,6 @@ GEM 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 @@ -33,82 +32,15 @@ GEM 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) @@ -122,25 +54,17 @@ GEM 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 (3.1.7) 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) + rackup (2.1.0) + rack (>= 3) + webrick (~> 1.8) 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) @@ -155,36 +79,12 @@ GEM 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) @@ -222,7 +122,8 @@ DEPENDENCIES capybara capybara-screenshot nokogiri - rack-jekyll + rack (~> 3) + rackup rspec selenium-webdriver webdrivers diff --git a/utilities/specs/spec_helper.rb b/utilities/specs/spec_helper.rb index 5bd924de8..5d529e004 100644 --- a/utilities/specs/spec_helper.rb +++ b/utilities/specs/spec_helper.rb @@ -69,72 +69,54 @@ def load_all_urls_in_course(course) # ======== 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 - - 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 - -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') +# Used to set the path for a local webserver. +# Update this if you move this file. +DESTINATION = 'tmp/specs/' +FILE_SERVER_ROOT = File.expand_path("../", __dir__) 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') + # MacBook Air ~13" screen size, with an absurd height to capture more content. + options.add_argument('--window-size=1280,4000') Capybara::Selenium::Driver.new(app, browser: :chrome, options:) end +# Change default_driver to :selenium_chrome if you want to actually see the tests running in a browser locally. # 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 +Capybara::Screenshot.register_driver(:chrome_headless) do |driver, path| + driver.save_screenshot(path) +end + +Capybara::Screenshot.register_filename_prefix_formatter(:rspec) do |example| + # Highly specific to a11y specs: path-mode-wcag-version + # TODO: Find a nice way to name "index" pages, or consider using Capybara.page.title + page = example.example_group.top_level_description.gsub(' is accessible', '') + # mode = example.example_group.description # i.e. light mode / dark mode + standard = example.description.split.last # i.e "meets WCAG 2.1" + test_case = "#{page}_#{standard}".gsub(%r{^/}, '').gsub(%r{[/\s+]}, '-') + "screenshot_#{test_case}" +end + +Capybara.save_path = 'tmp/capybara/' +Capybara::Screenshot.autosave_on_failure = true +Capybara::Screenshot.append_timestamp = false +Capybara::Screenshot.prune_strategy = :keep_last_run + +# Use Rack to serve static files from within the build directory. +# This supports "clean" URLs which serve /path/ from /path/index.html +Capybara.server = :webrick +Capybara.app = Rack::Builder.new do + use Rack::Lint + use Rack::Static, { urls: ['/'], root: FILE_SERVER_ROOT, index: 'index.html' } + run Rack::Files.new(FILE_SERVER_ROOT) +end.to_app RSpec.configure do |config| config.include Capybara::DSL From a7b4d378815774dd1e840de7ae469e1376ce94cc Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 13:28:55 -0700 Subject: [PATCH 02/16] a11y: spec testing/refactoring --- utilities/specs/accessibility_spec.rb | 32 ++++-------- utilities/specs/bjc_helper.rb | 72 +++++++++++++++++++++++++++ utilities/specs/spec_helper.rb | 49 ++---------------- 3 files changed, 84 insertions(+), 69 deletions(-) create mode 100644 utilities/specs/bjc_helper.rb diff --git a/utilities/specs/accessibility_spec.rb b/utilities/specs/accessibility_spec.rb index 4995c5618..ed096b606 100644 --- a/utilities/specs/accessibility_spec.rb +++ b/utilities/specs/accessibility_spec.rb @@ -1,19 +1,15 @@ # frozen_string_literal: true -# Run accessibility specs for all pages in the webiste. +# Run accessibility specs for all pages in the website. # 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 +# spec_helper ensures the website is built and can be served locally +require_relative './bjc_helper' require_relative './spec_helper' -# ===== Page / Couse List +include BJCSpecs + +# ===== Page / Course List # Use course as a tag (`rspec --tag bjc4nyc`) to run only the tests for that course. COURSES = %w[ bjc4nyc @@ -22,18 +18,7 @@ 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' -] +ALL_PAGES = BJCSpecs.complete_bjc_grouped_file_list(COURSES) # =============================== def test_tags(tags) @@ -66,7 +51,7 @@ def a11y_test_cases(course, url) # 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] + complete_a11y_standards = %i[wcag21a wcag21aa wcag22aa wcag2a-obsolete best-practice section508] # 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 @@ -92,6 +77,7 @@ def a11y_test_cases(course, url) before(:each) do visit(url) + # binding.irb if page.html.match?(/File not found:/) skip("TODO: #{url} is a 404 page.") end diff --git a/utilities/specs/bjc_helper.rb b/utilities/specs/bjc_helper.rb new file mode 100644 index 000000000..20cf1e76e --- /dev/null +++ b/utilities/specs/bjc_helper.rb @@ -0,0 +1,72 @@ + +require 'nokogiri' + +# Load our custom BJC tools +require_relative '../build-tools/bjc_helpers' +require_relative '../build-tools/course' +require_relative '../build-tools/topic' + +module BJCSpecs + # The list of all courses in BJC + COURSES = %w[ + bjc4nyc + bjc4nyc.es + sparks + bjc4nyc_teacher + sparks-teacher + ] + + # This is a map of all courses/groups + ALL_PAGES = {} + 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 load_site_urls(courses) + # Map is a course_name => [url1, url2, ...] + courses.map do |course| + puts "Building 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 + + def complete_bjc_grouped_file_list(courses) + ALL_PAGES.merge(load_site_urls(courses)) + end +end diff --git a/utilities/specs/spec_helper.rb b/utilities/specs/spec_helper.rb index 5d529e004..d13fb98ab 100644 --- a/utilities/specs/spec_helper.rb +++ b/utilities/specs/spec_helper.rb @@ -20,7 +20,6 @@ require 'rack' require 'capybara/rspec' -# require 'capybara-screenshot/rspec' require 'rack/test' require 'axe-rspec' require 'axe-capybara' @@ -28,51 +27,9 @@ 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 ========== - # Used to set the path for a local webserver. -# Update this if you move this file. -DESTINATION = 'tmp/specs/' -FILE_SERVER_ROOT = File.expand_path("../", __dir__) +# For simplicity, this is one level above bjc-r/ so the prefix is easily handled. +FILE_SERVER_ROOT = File.expand_path("../../../", __dir__) Capybara.register_driver :chrome_headless do |app| options = Selenium::WebDriver::Chrome::Options.new @@ -114,7 +71,7 @@ def load_all_urls_in_course(course) Capybara.server = :webrick Capybara.app = Rack::Builder.new do use Rack::Lint - use Rack::Static, { urls: ['/'], root: FILE_SERVER_ROOT, index: 'index.html' } + use Rack::Static, { urls: [''], root: "#{FILE_SERVER_ROOT}/", index: 'index.html' } run Rack::Files.new(FILE_SERVER_ROOT) end.to_app From ede2c553f69f2b85dfa941377a0022b1202117e0 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 13:32:40 -0700 Subject: [PATCH 03/16] Fix a small heading order on the create test --- .../create-task/6-reference.es.html | 16 ++++++++-------- .../create-task/6-reference.html | 14 ++++++-------- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/cur/performance-tasks/create-task/6-reference.es.html b/cur/performance-tasks/create-task/6-reference.es.html index 71e42e838..7e5ed15fc 100644 --- a/cur/performance-tasks/create-task/6-reference.es.html +++ b/cur/performance-tasks/create-task/6-reference.es.html @@ -11,10 +11,10 @@

Preparar tu Personalized Project Reference

En esta página, prepararás tu Personalized Project Reference sheet (hoja de referencia del proyecto personalizada) basada en tu proyecto de Snap! para utilizar en el examen de AP.

- +

- Hay dos lugares diferentes donde enviar imágenes de tu código al College Board: + Hay dos lugares diferentes donde enviar imágenes de tu código al College Board:

  • Para el Componente A (código del programa), enviarás una imagen de todo tu código, incluyendo comentarios y referencias.
  • Para el Componente C (Personalized Project Reference), enviarás imágenes de partes específicas de tu código y no puedes incluir comentarios.
    • @@ -22,7 +22,7 @@

    Preparar tu Personalized Project Reference

    Durante la parte de respuesta escrita en el examen de AP, solo puedes utilizar lo que está en tu Personalized Project Reference sheet.

- +
  1. @@ -45,11 +45,11 @@

    Preparar tu Personalized Project Reference

  • - Crea tu Personalized Project Reference sheet con los cuatro segmentos de código que identificaste anteriormente. + Crea tu Personalized Project Reference sheet con los cuatro segmentos de código que identificaste anteriormente.
    Durante el examen de AP, tu escuela proporcionará una impresión de tu hoja Personalized Project Reference para que la uses en el examen. Para la Create Task de práctica, si te das cuenta que no puedes responder a algunas de las preguntas de escritura en la página siguiente (Write About Your Proyect, Escribir sobre tu proyecto) utilizando solo los cuatro segmentos de código que seleccionaste, entonces puedes revisar tu Personalized Project Reference . En el examen de AP real, no podrás revisar tu Personalized Project Reference, así que utiliza la Create Task de práctica para pensar cómo debe ser un buen segmento de código para incluir en tu Personalized Project Reference sheet. En la tarea de creación oficial, cuando crees tu Personalized Project Reference para el examen de AP, piensa de antemano si podrás responder correctamente a las preguntas de la página siguiente.
    • -

    Mostrar el código

    +

    Mostrar el código

    Snap! tiene dos formas convenientes de obtener archivos de imagen que muestren parte o todo tu código:

      @@ -77,7 +77,7 @@

      Mostrar el código

    - - + + - \ No newline at end of file + diff --git a/cur/performance-tasks/create-task/6-reference.html b/cur/performance-tasks/create-task/6-reference.html index 2da411721..35f1141f0 100644 --- a/cur/performance-tasks/create-task/6-reference.html +++ b/cur/performance-tasks/create-task/6-reference.html @@ -11,10 +11,10 @@

    Preparing Your Personalized Project Reference

    On this page, you will develop a Personalized Project Reference sheet based on your Snap! project for use on the AP exam.

    - +

    - There are two different places you will submit images of your code to the College Board: + There are two different places you will submit images of your code to the College Board:

    • For Component A (program code), you will submit an image of all of your code, including comments and citations.
    • For Component C (Personalized Project Reference), you will submit images of specific portions of your code and you cannot have any comments.
      • @@ -22,7 +22,7 @@

      Preparing Your Personalized Project Reference

      During the written response portion on the AP exam, you can only use what is on your Personalized Project Reference sheet.

    - +
    1. @@ -45,11 +45,11 @@

      Preparing Your Personalized Project Reference

  • - Make your Personalized Project Reference sheet with the four code segments that you identified above. + Make your Personalized Project Reference sheet with the four code segments that you identified above.
    During the AP exam, your school will provide a printout of your Personalized Project Reference sheet for you to use on the exam. For the Practice Create Task, if you find that you cannot answer some of the writing prompts on the next page (Writing About Your Project) using only the four code segments you selected, then you can revise your Personalized Project Reference sheet. On the actual AP exam, you won't be able to revise your Personalized Project Reference, so use the Practice Create Task to think about what makes a good code segment to include on your Personalized Project Reference. On the official Create Task, when you create your Personalized Project Reference sheet for the AP exam, think in advance of how well you'll be able to respond to the prompts on the next page.
    • -

    Showing Your Code

    +

    Showing Your Code

    Snap! has two convenient ways to get image files of some or all of your code:

      @@ -77,7 +77,5 @@

      Showing Your Code

    - - - \ No newline at end of file + From 5ffd7a913ed4d25ad75c33facf174327af473e4a Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 13:48:30 -0700 Subject: [PATCH 04/16] Add a general section to the workflow file --- .github/workflows/specs.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/specs.yml b/.github/workflows/specs.yml index a7a0bcb52..c06fd264b 100644 --- a/.github/workflows/specs.yml +++ b/.github/workflows/specs.yml @@ -19,6 +19,7 @@ jobs: - sparks - bjc4nyc_teacher - sparks-teacher + - general suite: - wcag20 - wcag22 From 710d994bebafa2cdfd02beeff52259deee9df62e Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 14:11:42 -0700 Subject: [PATCH 05/16] a11y: minor tweaks, add more urls to be tested --- .../student-pages/U1/L1/02-snap-accounts.html | 10 ++--- utilities/specs/bjc_helper.rb | 38 +++++++++++++------ 2 files changed, 31 insertions(+), 17 deletions(-) diff --git a/sparks/student-pages/U1/L1/02-snap-accounts.html b/sparks/student-pages/U1/L1/02-snap-accounts.html index c8b15902a..ed800b2bb 100644 --- a/sparks/student-pages/U1/L1/02-snap-accounts.html +++ b/sparks/student-pages/U1/L1/02-snap-accounts.html @@ -13,10 +13,10 @@

    Saving Snap! Projects

    1. - Save your work + 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

      +
      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.
      @@ -27,7 +27,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.
      @@ -51,7 +51,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.
      @@ -78,7 +78,7 @@

      Option C: Create a Snap! account with a personal email
    2. 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.

    -
    +
    In this activity, you learned how save a Snap! project to your computer or to your new Snap! account.
    diff --git a/utilities/specs/bjc_helper.rb b/utilities/specs/bjc_helper.rb index 20cf1e76e..e99ecac6a 100644 --- a/utilities/specs/bjc_helper.rb +++ b/utilities/specs/bjc_helper.rb @@ -16,18 +16,32 @@ module BJCSpecs sparks-teacher ] - # This is a map of all courses/groups - ALL_PAGES = {} - 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' - ] + # This is a map of all pages by course + ALL_PAGES = { + 'general' => [ + '/bjc-r/' + ] + } + + ALL_PAGES['general'] += [ + # For the BJC Team, but technically public + 'docs/style_guide', + 'docs/best_practices', + 'docs/translations', + # Empty Topic pages, but are publicly visible. + 'topic/topic', + 'topic/topic.es', + # Extra course page, but not a full course. + 'mini/index', + # Informational Pages, but not linked as part of a course. + 'sparks/design-principles', + 'cur/snap-cheat-sheet', + 'cur/snap-cheat-sheet.es', + 'cur/compare', + 'cur/specifications', + 'cur/updates', + 'eir/school-equity' + ].map { |p| "/bjc-r/#{p}.html" } def load_site_urls(courses) # Map is a course_name => [url1, url2, ...] From 32ffc60988f95246c7fd40a01921992cb7a45081 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 14:13:55 -0700 Subject: [PATCH 06/16] sparks-a11y: replace all h4 elements as div.box-head --- .../U1/L2/05-creating-a-block.html | 6 +++--- .../U1/L2/07-creating-editing-blocks.html | 20 +++++++++---------- sparks/student-pages/U1/L2/08-sharing.html | 10 +++++----- sparks/student-pages/U1/L6/02-l33t-text.html | 2 +- .../student-pages/U2/L1/06-storing-songs.html | 4 ++-- .../U2/L2/02-planning-project.html | 2 +- .../U2/L2/03-adding-backgrounds.html | 4 ++-- .../U2/L2/04-adding-costumes.html | 4 ++-- .../U2/L2/04-importing-code.html | 4 ++-- .../U2/L2/05-more-sprites-costumes.html | 12 +++++------ .../U2/L2/06-importing-own-images.html | 6 +++--- .../U2/L2/08-creating-animation.html | 12 +++++------ .../U2/L2/09-responding-events.html | 2 +- .../U2/L2/10-importing-code.html | 4 ++-- .../student-pages/U2/L2/11-adding-sounds.html | 8 ++++---- .../U2/L2/12-choosing-click-areas.html | 2 +- .../U2/L3/01-visualizing-sound-data.html | 4 ++-- sparks/student-pages/U3/L1/01-get-ready.html | 2 +- .../teaching-guide/U1/01-intro-to-snap.html | 10 +++++----- .../U2/02-graphics-animation.html | 4 ++-- 20 files changed, 61 insertions(+), 61 deletions(-) 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 27a32d5fb..df5ace1dd 100644 --- a/sparks/student-pages/U1/L2/05-creating-a-block.html +++ b/sparks/student-pages/U1/L2/05-creating-a-block.html @@ -16,7 +16,7 @@

    Creating a Block

    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

    +
    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..."
      @@ -39,8 +39,8 @@

      Making a Block

    - +
    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/07-creating-editing-blocks.html b/sparks/student-pages/U1/L2/07-creating-editing-blocks.html index e092e1c21..2451e07da 100644 --- a/sparks/student-pages/U1/L2/07-creating-editing-blocks.html +++ b/sparks/student-pages/U1/L2/07-creating-editing-blocks.html @@ -29,7 +29,7 @@

    Editing the Story Structure

  • Talk with Your Partner Discuss the code inside the report block and how it works to create the output of super short story.
  • - For example: + For example:
    1. Story: Fifteen students are in the park.
    2. Words to vary: fifteen, students, park
      3. @@ -44,15 +44,15 @@

      Editing the Story Structure

    • -

    +

    - +
    : 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. @@ -60,20 +60,20 @@

      Editing the Story Structure

      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. + 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.
  • 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)
    -

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

    +
    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: + 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.
        @@ -95,7 +95,7 @@

        Editing, Adding, and Removing Labels and Variables in the Block Edit
        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:
        - +

      @@ -124,10 +124,10 @@

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

    • - + - +
    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 index 11f58d8fa..f36f66f40 100644 --- a/sparks/student-pages/U1/L2/08-sharing.html +++ b/sparks/student-pages/U1/L2/08-sharing.html @@ -10,7 +10,7 @@

    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.
    @@ -20,7 +20,7 @@

    Sharing Your Project

    -

    Option A: Share your project as a file

    +
    Option A: Share your project as a file
    Send an XML file.
    @@ -31,11 +31,11 @@

    Option A: Share your project as a file

    -

    Option B: Share your project as a link

    +
    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/L6/02-l33t-text.html b/sparks/student-pages/U1/L6/02-l33t-text.html index 8ed02591a..8c330be4e 100644 --- a/sparks/student-pages/U1/L6/02-l33t-text.html +++ b/sparks/student-pages/U1/L6/02-l33t-text.html @@ -159,7 +159,7 @@

    Mapping the Letter-Changing Function Over All the Letters

    l33t (I have dance class at eight on Tuesday.) reporting 'I have dance cla55 at eight on Tue5day.'
    -

    Duplicating a Block

    +
    Duplicating a Block

    To easily make a new block that is similar to your letter-changing function (such as change e to 3 for letter), you don't need to start all over again. Instead, just right-click on the block name in the palette on the left and select "duplicate".

    That will create a new block (such as change e to 3 for letter (2)) and open it for you in the block editor. You can click the text in the hat block to change the name. Then create the code for your new block.

    diff --git a/sparks/student-pages/U2/L1/06-storing-songs.html b/sparks/student-pages/U2/L1/06-storing-songs.html index 7f5702b37..23fcd2b3d 100644 --- a/sparks/student-pages/U2/L1/06-storing-songs.html +++ b/sparks/student-pages/U2/L1/06-storing-songs.html @@ -33,7 +33,7 @@

    Storing Songs

  • Create a global variable to store your song. Here's how...
    -

    Making a Global Variable

    +
    Making a Global Variable
    1. Click make a variable button in the Variables palette. (It's not a block; you can't drag it into the scripting area.)
    2. Type the name for your variable. (Use the name of the song or something else to help you remember it. Don't forget that the name can have spaces in it—it doesn't have to be just one word.)
      3. @@ -44,7 +44,7 @@

      Making a Global Variable

    3. Set your global variable to store your song. Here's how...
      -

      Setting a Global Variable

      +
      Setting a Global Variable
      1. Drag the set variable block out of the Variables palette and into the scripting area.
      2. In the first input slot, select the name of your global variable by clicking the triangle (▼) to open the menu.
        3. diff --git a/sparks/student-pages/U2/L2/02-planning-project.html b/sparks/student-pages/U2/L2/02-planning-project.html index f933421bc..ee5dd36a2 100644 --- a/sparks/student-pages/U2/L2/02-planning-project.html +++ b/sparks/student-pages/U2/L2/02-planning-project.html @@ -45,7 +45,7 @@

        Making Your Plan

      3. Review the feedback you've collected and make any improvements your project plan that make sense to you.
        4. -

        Why gather feedback?

        +
        Why gather feedback?

        Have you ever used an app that it was annoying or hard to use? The programmers may not have had those problems when they used it, but you are a different person. Creating good software requires getting input from different kinds of people.

      diff --git a/sparks/student-pages/U2/L2/03-adding-backgrounds.html b/sparks/student-pages/U2/L2/03-adding-backgrounds.html index 717ea1279..cd46f7f85 100644 --- a/sparks/student-pages/U2/L2/03-adding-backgrounds.html +++ b/sparks/student-pages/U2/L2/03-adding-backgrounds.html @@ -35,7 +35,7 @@

      Adding a Stage Background

      example sprite background: cartoon of a cityscape at night with a street in front; in Snap!, this costume is called 'Night City with Street' example sprite background: cartoon of a room with a disco ball, speakers, colorful lights, a projection screen, and a microphone; in Snap!, this costume is called 'Party Room'
      -

      Adding a Built-in Stage Background

      +
      Adding a Built-in Stage Background
      image of the lower right corner of the Snap! window with the Stage icon circled
        @@ -58,7 +58,7 @@

        -

        Changing the Stage Background

        +
        Changing the Stage Background
        1. If it isn't selected already, Select the Stage icon in the lower right corner of the Snap! window.
          2. The "Backgrounds" tab isn't always visible. It replaces the "Costumes" tab when the stage icon is selected.
          diff --git a/sparks/student-pages/U2/L2/04-adding-costumes.html b/sparks/student-pages/U2/L2/04-adding-costumes.html index 493c12a72..3a95b2a2b 100644 --- a/sparks/student-pages/U2/L2/04-adding-costumes.html +++ b/sparks/student-pages/U2/L2/04-adding-costumes.html @@ -36,7 +36,7 @@

          Adding a Costume

          example sprite costume: cartoon of a dragon breathing fire; in Snap!, this costume is called 'dragon1 b'
          You add a costume almost the same way you add a stage background! The only differences are in bold below.
          -

          Adding a Built-in Sprite Costume

          +
          Adding a Built-in Sprite Costume
          image of the lower right corner of the Snap! window with the Sprite icon circled
            @@ -53,7 +53,7 @@

            -

            Adjusting a Costume

            +
            Adjusting a Costume
              diff --git a/sparks/student-pages/U2/L2/04-importing-code.html b/sparks/student-pages/U2/L2/04-importing-code.html index 0b162cfd8..bab80aa93 100644 --- a/sparks/student-pages/U2/L2/04-importing-code.html +++ b/sparks/student-pages/U2/L2/04-importing-code.html @@ -35,7 +35,7 @@

              Importing Code

            • Export the blocks you want.
              -

              Exporting Blocks

              +
              Exporting Blocks
              1. Open the Snap! project from which you want to export blocks.
              2. Choose "Export blocks..." from the Snap! file menu (File menu button).
                3. @@ -53,7 +53,7 @@

                Exporting Blocks

              3. Import these blocks, test them and resolve any issues, and save.
                -

                Importing Blocks

                +
                Importing Blocks
                1. Open the Snap! project into which you want to import blocks.
                2. diff --git a/sparks/student-pages/U2/L2/05-more-sprites-costumes.html b/sparks/student-pages/U2/L2/05-more-sprites-costumes.html index eb8c63993..b7cd727a5 100644 --- a/sparks/student-pages/U2/L2/05-more-sprites-costumes.html +++ b/sparks/student-pages/U2/L2/05-more-sprites-costumes.html @@ -17,7 +17,7 @@

                  Adding More Costumes

                3. If you added more costumes to your sprite, change the sprite's costume to the first costume that you want it to have.
                  -

                  Changing a Sprite Costume

                  +
                  Changing a Sprite Costume
                  1. Select the Sprite icon if it isn't selected already.
                    2. @@ -40,7 +40,7 @@

                    Adding More Sprites

                  2. If your project needs more than one sprite, add more, and then give them costume(s) too.
                    -

                    Adding a Sprite

                    +
                    Adding a Sprite
                    @@ -68,7 +68,7 @@

                    Naming Your Sprites

                    If you want, you can give names to your sprites so you can keep track of them.
                    image of three named sprite icons: a cartoon of a person walking labeled 'Avery,' a cartoon of soccer ball labeled 'ball, and a cartoon of a tree labeled 'tree'
                    -

                    Naming a Sprite

                    +
                    Naming a Sprite
                    • @@ -88,7 +88,7 @@

                      Naming Your Costumes

                    • If you want, you can name or rename your costumes too.
                      -

                      Renaming a Costumes

                      +
                      Renaming a Costumes
                      • 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 cda9a6278..187dafe7f 100644 --- a/sparks/student-pages/U2/L2/06-importing-own-images.html +++ b/sparks/student-pages/U2/L2/06-importing-own-images.html @@ -19,7 +19,7 @@

                        Importing Your Own Images

                      • Add your own images for sprite costumes or stage backgrounds. Here are three ways to do it:
                        -

                        Drawing an Image in Snap!

                        +
                        Drawing an Image in Snap!
                          You can read more about the drawing tools in the Snap! Reference Manual. Look in the index for "Paint Editor".
                          @@ -31,7 +31,7 @@

                          -

                          Importing an Image from Your Computer

                          +
                          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.
                            @@ -43,7 +43,7 @@

                            -

                            Adding an Image from a Webcam

                            +
                            Adding an Image from a Webcam
                            You may have imported an image from a webcam before on Unit 1 Lab 4 Activity 3: Investigating and Storing Images.
                            Does it raise privacy issues for UCB if we have students saving photos of themselves in Snap? --MF, 8/14/21
                            diff --git a/sparks/student-pages/U2/L2/08-creating-animation.html b/sparks/student-pages/U2/L2/08-creating-animation.html index 5da195c22..3d45b79b7 100644 --- a/sparks/student-pages/U2/L2/08-creating-animation.html +++ b/sparks/student-pages/U2/L2/08-creating-animation.html @@ -18,7 +18,7 @@

                            Creating an Animation

                            Explain 4 'hidden' costume options: "can rotate," "only face left/right," "don't rotate," and "draggable"
                            -

                            Changing the Sprite Costume or Stage Background with Code...

                            +
                            Changing the Sprite Costume or Stage Background with Code...
                            The switch to costume block changes the sprite costume to the one you select in the block's dropdown menu. The next costume block changes the sprite costume to the next one on the list of costumes. Both blocks also work for changing stage backgrounds.

                            @@ -32,7 +32,7 @@

                            -

                            Making a Sprite Move, Change Size, or Turn...

                            +
                            Making a Sprite Move, Change Size, or Turn...

                              @@ -90,7 +90,7 @@

                              -

                              Making a Sprite Talk or Think...

                              +
                              Making a Sprite Talk or Think...

                                @@ -112,7 +112,7 @@

                                -

                                Creating Special Effects...

                                +
                                Creating Special Effects...

                                  @@ -137,7 +137,7 @@

                                  -

                                  Making a Sprite Turn Toward or Follow Something...

                                  +
                                  Making a Sprite Turn Toward or Follow Something...

                                    @@ -162,7 +162,7 @@

                                    -

                                    Making a Sprite Leave a Path as It Moves...

                                    +
                                    Making a Sprite Leave a Path as It Moves...

                                      diff --git a/sparks/student-pages/U2/L2/09-responding-events.html b/sparks/student-pages/U2/L2/09-responding-events.html index b1d948a5b..14dec77a4 100644 --- a/sparks/student-pages/U2/L2/09-responding-events.html +++ b/sparks/student-pages/U2/L2/09-responding-events.html @@ -33,7 +33,7 @@

                                      Adding Hat Blocks to Make Your Code Respond to Events

                                    1. Add the hat block that you want at the top of the code for your animation.
                                      -

                                      Which hat block should you choose?

                                      +
                                      Which hat block should you choose?
                                      • The when (space) key pressed block runs the attached code whenever the key selected in the block's dropdown menu is pressed.
                                        • diff --git a/sparks/student-pages/U2/L2/10-importing-code.html b/sparks/student-pages/U2/L2/10-importing-code.html index d41ca9915..b5d9e0698 100644 --- a/sparks/student-pages/U2/L2/10-importing-code.html +++ b/sparks/student-pages/U2/L2/10-importing-code.html @@ -66,7 +66,7 @@

                                        Importing Code

                                      • Export the blocks you want.
                                        -

                                        Exporting Blocks

                                        +
                                        Exporting Blocks
                                        1. Open the Snap! project from which you want to export blocks.
                                          2. @@ -89,7 +89,7 @@

                                          -

                                          Importing Blocks

                                          +
                                          Importing Blocks
                                          1. Open the Snap! project into which you want to import blocks (in this case, your "Sparks - Interactive Project" file).
                                            2. diff --git a/sparks/student-pages/U2/L2/11-adding-sounds.html b/sparks/student-pages/U2/L2/11-adding-sounds.html index dc0b0ee02..bb35d3c42 100644 --- a/sparks/student-pages/U2/L2/11-adding-sounds.html +++ b/sparks/student-pages/U2/L2/11-adding-sounds.html @@ -35,7 +35,7 @@

                                            Adding Sounds

                                          2. Explore the instructions below and choose at least one method of adding sound to your project.
                                            -

                                            Using Snap!'s Built-in Sounds...

                                            +
                                            Using Snap!'s Built-in Sounds...
                                            You add a Snap! built-in sound almost the same way you add a sprite costume or a stage background.

                                            @@ -52,7 +52,7 @@

                                            -

                                            Using Snap! to Record Sounds...

                                            +
                                            Using Snap! to Record Sounds...

                                              @@ -82,7 +82,7 @@

                                              -

                                              Importing Sounds from Your Computer...

                                              +
                                              Importing Sounds from Your Computer...

                                                @@ -93,7 +93,7 @@

                                                -

                                                Importing Songs from Lab 1...

                                                +
                                                Importing Songs from Lab 1...

                                                  diff --git a/sparks/student-pages/U2/L2/12-choosing-click-areas.html b/sparks/student-pages/U2/L2/12-choosing-click-areas.html index aef68fc25..a5c6ae55c 100644 --- a/sparks/student-pages/U2/L2/12-choosing-click-areas.html +++ b/sparks/student-pages/U2/L2/12-choosing-click-areas.html @@ -29,7 +29,7 @@

                                                  Choosing Your Click Areas

                                                  Determine the coordinates of each click area you want. For each click area, write down the maximum and minimum x and the maximum and minimum y coordinates. For example:
                                                  Chart with 5 columns: Click Area, Maximum x, Minimum x, Maximum y, and Minimum y. The Click Area column includes a list of planets, and the other four columns include numbers cooresponding to the maximum and minimum x and the maximum and minimum y coordinates for each click area.
                                                  -

                                                  Ways to Figure Out Snap! Coordinates

                                                  +
                                                  Ways to Figure Out Snap! Coordinates
                                                  • Use the "XY Grid" stage background. diff --git a/sparks/student-pages/U2/L3/01-visualizing-sound-data.html b/sparks/student-pages/U2/L3/01-visualizing-sound-data.html index 82113eb4e..a0b6201a3 100644 --- a/sparks/student-pages/U2/L3/01-visualizing-sound-data.html +++ b/sparks/student-pages/U2/L3/01-visualizing-sound-data.html @@ -45,7 +45,7 @@

                                                    Visualizing Sound Data

                                                  -

                                                  Sound Waves

                                                  +
                                                  Sound Waves

                                                  Sound is created by pressure waves traveling through a material (like air or water). When you hear music, an instrument or speaker (think of a vibrating guitar string, a vibrating drum head, or a vibrating speaker) creates waves of pressure that travel through the air to your eardrum, which transmits the signal through your nerves to your brain. Have you ever heard a sound that was so loud you could feel it? Those were pressure waves that were so big you could sense them with more than just your eardrum!

                                                  @@ -55,7 +55,7 @@

                                                  Sound Waves

                                                1. Test that your microphone works with Snap!.
                                                  -

                                                  Testing a Microphone in Snap!

                                                  +
                                                  Testing a Microphone in Snap!

                                                    diff --git a/sparks/student-pages/U3/L1/01-get-ready.html b/sparks/student-pages/U3/L1/01-get-ready.html index babd7670c..2cdd68624 100644 --- a/sparks/student-pages/U3/L1/01-get-ready.html +++ b/sparks/student-pages/U3/L1/01-get-ready.html @@ -41,7 +41,7 @@

                                                    Set Up Your micro:bit with MicroBlocks

                                                  1. Open MicroBlocks in a Chrome browser.
                                                    -

                                                    Why Chrome?

                                                    +
                                                    Why Chrome?

                                                    Chrome supports connecting a micro:bit to your web browser.

                                                    2. diff --git a/sparks/teaching-guide/U1/01-intro-to-snap.html b/sparks/teaching-guide/U1/01-intro-to-snap.html index 661b10e9d..c22328378 100644 --- a/sparks/teaching-guide/U1/01-intro-to-snap.html +++ b/sparks/teaching-guide/U1/01-intro-to-snap.html @@ -126,7 +126,7 @@

                                                    Activity 2: Saving Snap! Projects 
                                                  2. 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.
                                                  3. - Make note of any questions or difficulties that arise, and please share them with the curriculum developers: + Make note of any questions or difficulties that arise, and please share them with the curriculum developers:
                                                    Submit Feedback

                                      @@ -146,7 +146,7 @@

                                      Activity 3: Customizing Snap! 
                                      • Materials: Customizing Snap! student page
                                      • - Prepare: + Prepare:
                                        • You may find it helpful to explore the Snap! customization features before class.
                                        @@ -158,7 +158,7 @@

                                        Activity 3: Customizing Snap! 

                                    2. - Activity Plan: + Activity Plan:
                                      • Students customize several basic Snap! settings (language and appearance). (5–10 minutes)
                                      @@ -266,11 +266,11 @@

                                      Activity 2: Draw Like a Computer.

                                      -

                                      Programmer's Original Drawing

                                      +
                                      Programmer's Original Drawing
                                      a drawing of three shapes of the same width stacked in a column with each one touching the next one at a single point: an equilateral triangle with a vertex up, a circle, and a square with its sides parallel to the sides of the browser window
                                      -

                                      Two Possible Computer Drawings

                                      +
                                      Two Possible Computer Drawings
                                      two drawings that don't match the original: 1) the same three shapes from the original drawing but overlapping as much as possible so that their topmost points are all aligned; and 2) a square titled to the left with a very tiny circle resting on its top near the left corner, and a long irregular triangle with its most-extended vertex touching the circle and the other two vertices above and to the right of the square and circle
                                      diff --git a/sparks/teaching-guide/U2/02-graphics-animation.html b/sparks/teaching-guide/U2/02-graphics-animation.html index 33814a0dd..d2ba8c9ce 100644 --- a/sparks/teaching-guide/U2/02-graphics-animation.html +++ b/sparks/teaching-guide/U2/02-graphics-animation.html @@ -111,7 +111,7 @@

                                      Activity 2: Planning Your Interactive Project&nb Prepare:
                                        -

                                        New Snap! Skills

                                        +
                                        New Snap! Skills
                                        • Costumes and Backgrounds (activity pages 3-6)
                                        • Animation (activity pages 7-8)
                                          • @@ -332,7 +332,7 @@

                                          Activity 7: Planning Your Animation 
                                        • Materials: Planning Your Animation student page
                                          • -

                                          Ways to Create Animation in Snap!

                                          +
                                          Ways to Create Animation in Snap!
                                          • Changing the sprite costume (or stage background) with code
                                          • Making a sprite move, change size, or turn
                                            • From ec742743abf86c8e192997ecce05cb94be8c34db Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 14:21:51 -0700 Subject: [PATCH 07/16] a11y: Fix some heading issues in sparks -- just dev comments --- sparks/student-pages/U1/L4/04-pixel-mapper.html | 4 +++- sparks/student-pages/U1/L6/02-l33t-text.html | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/sparks/student-pages/U1/L4/04-pixel-mapper.html b/sparks/student-pages/U1/L4/04-pixel-mapper.html index b8df41bc8..6a1ea6f3a 100644 --- a/sparks/student-pages/U1/L4/04-pixel-mapper.html +++ b/sparks/student-pages/U1/L4/04-pixel-mapper.html @@ -122,7 +122,9 @@

                                            Mapping over a List

                                          Maybe give them a FYTD with a few map examples to predict and then try out in Snap! before going on... --MF, 10/15/21
                                          -

                                          Consider a page break here. --MF, 9/13/21

                                          +
                                          +
                                          Consider a page break here. --MF, 9/13/21
                                          +

                                          Playing with Filters

                                          I dropped what had been the second filter here because I found it both too confusing and redundant with the first; I propose we leave that out. --MF, 9/13/21
                                          diff --git a/sparks/student-pages/U1/L6/02-l33t-text.html b/sparks/student-pages/U1/L6/02-l33t-text.html index 8c330be4e..34ff40074 100644 --- a/sparks/student-pages/U1/L6/02-l33t-text.html +++ b/sparks/student-pages/U1/L6/02-l33t-text.html @@ -34,7 +34,10 @@

                                          What is L33t?

                                        You've already learned how to use map to apply a function to every item in a list, and how to use join to join elements of a list into a single text string. The missing ingredient is a letter-changing function.

                                        -

                                        Consder Page Break Here

                                        And add "Write out a sentence in L33T (on paper)" and then "See id you can read someone elses." exercises to the end of the first page above.

                                        +
                                        +
                                        Consider Page Break Here
                                        +

                                        And add "Write out a sentence in L33T (on paper)" and then "See id you can read someone elses." exercises to the end of the first page above.

                                        +

                                        Creating a Letter-Changing Function

                                        From 7eeeec608e6419bd312c1fe01a53f03d721ad4c9 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 14:23:09 -0700 Subject: [PATCH 08/16] a11y: add title to iframe --- eir/school-equity.html | 1 + 1 file changed, 1 insertion(+) diff --git a/eir/school-equity.html b/eir/school-equity.html index 3ae838f4d..77183a2d2 100644 --- a/eir/school-equity.html +++ b/eir/school-equity.html @@ -30,6 +30,7 @@

                                        Benefits

                                        From 48354eb7551e6bade5511c3ba292f029155a774a Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 14:28:06 -0700 Subject: [PATCH 09/16] a11y: Fix a blue button issue on the old compare page --- css/bjc.css | 25 +------------------------ cur/compare.html | 2 +- llab/loader.js | 2 +- 3 files changed, 3 insertions(+), 26 deletions(-) diff --git a/css/bjc.css b/css/bjc.css index edeececa0..3067a521f 100755 --- a/css/bjc.css +++ b/css/bjc.css @@ -47,7 +47,7 @@ h4, .h4 { } /* should have >= 3:1 contrast with black, 4.5:1 with white */ -a:visited { +a:visited:not(.btn-primary) { color: #297694; } @@ -950,29 +950,6 @@ ul.tight li { padding-bottom: 0px; } -/* Blue button links */ - -a.blbtn { - color: #fff; - background-color: #428bca; - border-color: #357ebd; - display: inline-block; - padding: 6px 12px; - margin-bottom: 0; - font-size: 14px; - font-weight: normal; - line-height: 1.428571429; - border: 1px solid transparent; - border-radius: 4px; -} - -a.blbtn:hover { - color: #333 !important; -} -a.blbtn:visited { - color: #fff !important; -} - /* edX BJC Videos */ table.videos { diff --git a/cur/compare.html b/cur/compare.html index 8be7a54d8..d4fd54e17 100644 --- a/cur/compare.html +++ b/cur/compare.html @@ -9,7 +9,7 @@

                                        Comparison with CSP Framework

                                        Computer programming can be immensely satisfying. You get to be inventive and creative. Programming gives you a kind of authorship and control that's quite beyond what people mostly can get in other activities. It's what Seymour Papert called "hard fun," fun precisely because it is mind-stretching but still under your own control. And, because you can judge correctness yourself—your program either works the way you want or it doesn't—you become the judge, not the judged. If the program doesn't work, it's not a failure but a work in progress; you fix it, alone or with ideas from others. If it does work, you may still want to embellish it with new ideas or more elegant structure. That view of learning—that one can always fix what needs fixing and improve what's already good—and the sense of authority that one gains by being a creator are known to be valuable to kids (and adults). And, of course, the skills and ideas behind programming—the computer science of it—are valuable. Programming is a game of skill, like chess but without the competitive aspect, and with useful results beyond the act of programming itself. These reasons, alone, are enough to make us want all kids to have the opportunity to experience the joy of programming.

                                        Given the chance to learn, programming can also be accessible to many students who have not had success in areas they associate with computers and mathematics and science, or who do not picture themselves as programmers. Precisely because you can see for yourself how your program is behaving, you are in a better position to know what steps to take to improve it than you are in most other subjects.

                                        diff --git a/llab/loader.js b/llab/loader.js index 15b87922a..14c409b70 100755 --- a/llab/loader.js +++ b/llab/loader.js @@ -4,7 +4,7 @@ */ const THIS_FILE = 'loader.js'; -const RELEASE_DATE = '2024-07-11'; +const RELEASE_DATE = '2024-09-25'; // Basic llab shape. llab = { From d43107f6ded439f4a91670b6dee2e8ac96c826d0 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 14:45:36 -0700 Subject: [PATCH 10/16] a11y:fix some styleguide issues --- docs/style_guide.html | 162 +++++++++++++++++++++++++----------------- 1 file changed, 95 insertions(+), 67 deletions(-) diff --git a/docs/style_guide.html b/docs/style_guide.html index 5c669305a..d9b1743de 100644 --- a/docs/style_guide.html +++ b/docs/style_guide.html @@ -34,9 +34,13 @@

                                        Use "h3" for Sub-Headings (Title Case)

                                      • How to Make an Picture of Blocks
                                      • How to Make an Animation
                                      • Snap! XML file Conventions
                                        • -
                                      • How to Link to a Project
                                        • - -
                                      • How to Link to a Specfic Part of a Page with Anchors
                                        • +
                                      • + How to Link to a Project + +
                                        • +
                                      • How to Link to a Specific Part of a Page with Anchors
                                      • How to Build a Multiple-Multiple-Choice Quiz

                                      @@ -257,24 +261,28 @@

                                      Showing Code 

                                    3. For example:
                                        -
                                        I believe screen readers will correctly handle Unicode characters such as ↻ (or its Unicode equivalent &#x21BB;) so we can use that instead of "CW." -MF
                                        -
                                      • repeat (4) [move (50) steps, turn ↻ (90) degrees]
                                        • +
                                      • + repeat (4) [move (50) steps, turn ↻ (90) degrees] +
                                        I believe screen readers will correctly handle Unicode characters such as ↻ (or its Unicode equivalent &#x21BB;) so we can use that instead of "CW." -MF
                                        +
                                      • to reference a block: the move block
                                      • If absolutely necessary, use, e.g., "fill in the blank in move () steps below."
                                        • -
                                      • lists should be represented like this: {apple; orange; banana}
                                        • -
                                        -
                                          -
                                        • From BH: "The first time we use {braces}, we should emphasize that that -isn't something you can type into Snap!. And every so often (once per unit?) we should remind people by showing both the text and a picture."
                                          • -
                                        • From BH: "writing Scratch code the other candidates are used to indicate [command], (reporter), and <predicate> blocks"
                                          • -
                                        • - Al: "put a note in the TE to explain why we're doing {apple; orange; banana} -
                                            -
                                          • {1,2,3} is a set in mathematics (an unordered list)
                                            • -
                                          -
                                          • -
                                        -
                                        +
                                      • + lists should be represented like this: {apple; orange; banana} +
                                        +
                                          +
                                        • From BH: "The first time we use {braces}, we should emphasize that that + isn't something you can type into Snap!. And every so often (once per unit?) we should remind people by showing both the text and a picture."
                                          • +
                                        • From BH: "writing Scratch code the other candidates are used to indicate [command], (reporter), and <predicate> blocks"
                                          • +
                                        • + Al: "put a note in the TE to explain why we're doing {apple; orange; banana} +
                                            +
                                          • {1,2,3} is a set in mathematics (an unordered list)
                                            • +
                                          +
                                          • +
                                        +
                                        +
                                    4. Do you have any examples that break or challenge this rule?
                                      5. @@ -285,46 +293,56 @@

                                      Showing Code 

                                      Icons 

                                        -
                                      • Here are a bunch of icons you can use to say certain things that we will say over and over again (it's probably nice to have these on the right and to let the text wrap around them.):
                                        • - Click here to load this file. Then save it to your Snap! account. - Work with a Partner - Work by Yourself - Pair Programming Swap - Import Tools - Talk with Your Partner - Talk with Another Pair - Tough StuffShare Your Work - Predict What Will Happen - Save your work - Write Out Your Thoughts - Write In Your Journal - Set Up Your Headphones or Speakers - Teacher's Choice - Read More - Gather Materials -
                                        +
                                      • + Here are a bunch of icons you can use to say certain things that we will say over and over again (it's probably nice to have these on the right and to let the text wrap around them.): +
                                        + Click here to load this file. Then save it to your Snap! account. + Work with a Partner + Work by Yourself + Pair Programming Swap + Import Tools + Talk with Your Partner + Talk with Another Pair + Tough StuffShare Your Work + Predict What Will Happen + Save your work + Write Out Your Thoughts + Write In Your Journal + Set Up Your Headphones or Speakers + Teacher's Choice + Read More + Gather Materials +
                                        +
                                      • In 1.1, "save your work" should be an LI, but after that all small icons should go on the left not as LIs. --MF, 1/6/21
                                        • -
                                      • These next two have text in them that you get to add so it requires a little extra HTML. (Be sure to edit both 1. the text in the span and 2. the alt and title text for the image.)
                                        • -
                                        "U1L2-Crayon"save your work as U1L2-Crayon
                                        -
                                        "U1L2-Crayon"Start a New Project called U1L2-Crayon
                                        -
                                      • Alternatively, we can also use these mini icons since those are kinda big... You can use classes imageRight, imageLeft, or indent.
                                        • - Work with a Partner - Work by Yourself - Pair Programming Swap - Import Tools - Talk with Your Partner - Take turns speaking - Talk with Another Pair - Tough Stuff - Share Your Work - Predict What Will Happen - Save Your Work - Start a New Project - Write In Your Journal - Set Up Your Headphones or Speakers - Teacher's Choice - Read More - Gather Materials
                                        +
                                      • + These next two have text in them that you get to add so it requires a little extra HTML. (Be sure to edit both 1. the text in the span and 2. the alt and title text for the image.) +
                                        +
                                        "U1L2-Crayon"save your work as U1L2-Crayon
                                        +
                                        "U1L2-Crayon"Start a New Project called U1L2-Crayon
                                        +
                                        • +
                                      • + Alternatively, we can also use these mini icons since those are kinda big... You can use classes imageRight, imageLeft, or indent. +
                                        + Work with a Partner + Work by Yourself + Pair Programming Swap + Import Tools + Talk with Your Partner + Take turns speaking + Talk with Another Pair + Tough Stuff + Share Your Work + Predict What Will Happen + Save Your Work + Start a New Project + Write In Your Journal + Set Up Your Headphones or Speakers + Teacher's Choice + Read More + Gather Materials +
                                        +
                                      @@ -422,15 +440,25 @@

                                      How to Load a Project NOT in Present

                                      From Jens: you can use #cloud to open a shared project in edit mode without running it right away.

                                      There are also three switches you can add to the #present: url to get more control over what will be displayed:

                                        -
                                      1. &editMode: this will also NOT switch to presentation mode, but it will still run the project right away.
                                        2. - -
                                      2. &noRun: this switch will prevent the project from running immediately (it won't fire the green flag event).
                                        3. - -
                                      3. &hideControls: this switch hides the green-flag, pause, stop, and edit/presentation (useful for "hiding" the code) buttons. This is useful when embedding Snap projects into other web pages using iFrames. You can also use this in combination with other switches, but it makes the most sense in presentation mode.
                                        4. - +
                                      4. + &editMode: this will also NOT switch to presentation mode, but it will still run the project right away. + +
                                        5. +
                                      5. + &noRun: this switch will prevent the project from running immediately (it won't fire the green flag event). + +
                                        6. +
                                      6. + &hideControls: this switch hides the green-flag, pause, stop, and edit/presentation (useful for "hiding" the code) buttons. This is useful when embedding Snap projects into other web pages using iFrames. You can also use this in combination with other switches, but it makes the most sense in presentation mode. + +

                                      From 34c377302e64fd7e19fa1d52bee46e86bd139ee9 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 14:57:56 -0700 Subject: [PATCH 11/16] a11y: fix one last sparks dev comment; fix compare page color --- css/bjc.css | 7 +++++++ sparks/student-pages/U1/L6/02-l33t-text.html | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/css/bjc.css b/css/bjc.css index 3067a521f..aa3a66c27 100755 --- a/css/bjc.css +++ b/css/bjc.css @@ -945,6 +945,13 @@ div.socialorange { background-color: #f4c480; } +div.socialorange a { + /* brighter + underlined links for accessibility */ + color: #1049CC; + text-decoration: underline; + +} + ul.tight li { padding-top: 0px; padding-bottom: 0px; diff --git a/sparks/student-pages/U1/L6/02-l33t-text.html b/sparks/student-pages/U1/L6/02-l33t-text.html index 34ff40074..6318985ce 100644 --- a/sparks/student-pages/U1/L6/02-l33t-text.html +++ b/sparks/student-pages/U1/L6/02-l33t-text.html @@ -107,7 +107,7 @@

                                      Creating a Letter-Changing Function

                                    -

                                    Consder Page Break Here

                                    +
                                    Consider Page Break Here

                                    Mapping the Letter-Changing Function Over All the Letters

                                    From 951f35841b66809bfa916235bd13597067ab4a9c Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 15:06:54 -0700 Subject: [PATCH 12/16] a11y: small teachers guide fixes --- cur/teaching-guide/U1/lab-pages/4-privacy.html | 2 +- .../U4/lab-pages/1-reliable-communication.html | 2 +- topic/nyc_bjc/7-teaching-guide.topic | 10 +++++----- topic/nyc_bjc/8-teaching-guide.topic | 10 +++++----- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/cur/teaching-guide/U1/lab-pages/4-privacy.html b/cur/teaching-guide/U1/lab-pages/4-privacy.html index 870a3a254..1f894280b 100644 --- a/cur/teaching-guide/U1/lab-pages/4-privacy.html +++ b/cur/teaching-guide/U1/lab-pages/4-privacy.html @@ -19,7 +19,7 @@

                                    Lab 4: Protecting Your Privacy

                                    Need to fix the yellowbox font color inside orangebox in the CSS. --MF, 11/15/19
                                    -

                                    General Points about Teaching Social Implications

                                    +

                                    General Points about Teaching Social Implications

                                    • Good discussions require trust. Students won't start out trusting each other or you (but mainly each other). It's vital that you catch any ad hominem argument or verbal bullying, make everyone stop talking, and quietly but clearly make it clear that personal attacks aren't acceptable behavior or valid arguments.
                                      • diff --git a/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html b/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html index 5f63863de..19a155483 100644 --- a/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html +++ b/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html @@ -77,8 +77,8 @@

                                      Lab Pages

                                    • What is the minimum number of nodes that can stop working before the sender and the receiver can't communicate? One way to answer this question is to note that the receiver has only two neighbors, so if those two nodes go down, it can't get any messages no matter where the sender is in the network. (The same argument applies to the sender, but since the sender has three neighbors and 3 > 2, it's the receiver that provides the answer to this question.)
                                    • What is the maximum number of nodes that can fail and still let Sender and Receiver communicate? To answer this question, you can find the shortest path between the desired endpoints (which is the one through the two highly-connected central nodes) and then let all the other nodes fail.
                                    +

                                    Brian

                                    This is new. I pulled it off the bottom of the student page and dumped it here. --MF, 11/18/19
                                    -

                                    Brian

                                    This is new. I pulled it off the bottom of the student page and dumped it here. --MF, 11/18/19
                                  1. The last question on this student page poses several questions. Here are some possible correct responses:
                                    • The benefit of fault tolerance is that if some piece of the system fails, the whole system doesn't fail.
                                      • diff --git a/topic/nyc_bjc/7-teaching-guide.topic b/topic/nyc_bjc/7-teaching-guide.topic index 080e182b9..c49c478d4 100755 --- a/topic/nyc_bjc/7-teaching-guide.topic +++ b/topic/nyc_bjc/7-teaching-guide.topic @@ -2,26 +2,26 @@ title: Teaching Guide for Unit 7: Fractals and Recursion { -h3: Purpose +heading: Purpose raw-html:

                                      Programming Focus: Recursion, Abstraction, Fractals

                                      raw-html:

                                      Old Recursion TG

                                      U7 Student Labs

                                      raw-html:

                                      Recursion and functional programming are two programming techniques that go beyond the Framework requirements but they are fundamental to learning to program. Functional programming was introduced in Unit 3, and we'll return to it in Unit 8. Unit 7 is about recursive commands, mainly fractals. V shape with decorations It starts with a teacher demonstration of the Vee project, in which a short program generates V-shapes with randomly chosen decorations at the ends (shown right).

                                      vee calling veeThe same program suddenly generates arbitrarily complex results if the vee procedure itself is added to the list of possible decorations (shown left). This is a teacher demonstration rather than an independent lab activity because the collective "gasp!" of the class is itself a valuable learning experience.

                                      Tree FractalAfter the demonstration, students develop their own non-recursive fractal tree program by building up from small cases (a one-level tree is just a trunk; a two-level tree is a trunk with two branches, etc.) so that they are not confronted at first with the seeming magic of a procedure calling itself. Only after they've written several almost-identical procedures (tree 2, tree 3, tree 4, etc.) does the lab suggest combining them into one recursive procedure, tree. The students then discover why recursive procedures need a base case to terminate the recursion (comparable to their tree 1 block in the non-recursive scheme that draws just one line without calling for any branches).

                                      Once the tree fractal is thoroughly understood, students go on to construct other common fractals (Koch snowflake, Sierpinski gasket, etc.) in Lab 2.

                                      The elegance of the programs themselves helps students see computer programs—and not just the effects they produce—as things of beauty. A key moment in developing that sense is when students understand how a short recursive procedure can generate a deeply complex computational process.

                                      //raw-html:

                                      Social Implications Focus: Impacts of Computing on Work and War

                                      //raw-html:

                                      This unit also contains Social Implications labs exploring the effects of computers on jobs (including both the displacement of old categories of work by new ones and the on-the-job experience of workers whose output is measured by computers) and on warfare (with an emphasis on drones and why they make a qualitative difference in the political cost of war).

                                      -h3: BJC Videos from UC Berkeley +heading: BJC Videos from UC Berkeley raw-html:

                                      There are a number of BJC videos from the edX version of the curriculum that are relevant to Unit 7. These are available on the Teacher Resources page.

                                      -h3: Teacher Guides for Student Labs +heading: Teacher Guides for Student Labs resource: Lab 1: Trees[/bjc-r/cur/teaching-guide/U7/lab-pages/1-trees-in-a-forest.html] raw-html:
                                      • 2–4 days (70–140 minutes)
                                      resource: Lab 2: Recursion Projects [/bjc-r/cur/teaching-guide/U7/lab-pages/2-recursion-projects.html] raw-html:
                                      • 3–5 days (95–190 minutes) for required pages
                                      -h3: Assessments and Solutions +heading: Assessments and Solutions raw-html:
                                      -h3: Optional Teaching Resources +heading: Optional Teaching Resources raw-html:
                                      raw-html:
                                      • Vocabulary Activities for Units 7 and 8 are combined in Unit 8
                                      raw-html: diff --git a/topic/nyc_bjc/8-teaching-guide.topic b/topic/nyc_bjc/8-teaching-guide.topic index c59ba95c9..95ea85eb5 100755 --- a/topic/nyc_bjc/8-teaching-guide.topic +++ b/topic/nyc_bjc/8-teaching-guide.topic @@ -2,16 +2,16 @@ title: Teaching Guide for Unit 8: Recursive Functions { -h3: Purpose +heading: Purpose raw-html:
                                      MARY needs to restructure TG to new lab structure. --MF, 6/15/20
                                      raw-html:

                                      Programming Focus: Recursive Functions

                                      raw-html:

                                      Old Recursive and Higher-Order Functions TG

                                      U7 Student Labs

                                      Unit 8 is about recursive functions, combining the ideas of recursion, from Unit 7, and functional programming, introduced in Unit 3 with the higher order functions on lists. One highlight of the course is the implementation by students of three key list operations: map, keep, and combine.

                                      After a brief introduction to the form of a recursive function (in which the recursive call is an input to a combining function, as opposed to a separate instruction as in recursive commands), we work through the example of sorting lists, showing selection sort and partition sort to introduce O(n log n) timing.

                                      We dive right into branched recursive functions, in which each call gives rise to two or more recursive calls. Linear-recursive functions (those with only one recursive call) are easier to write, but we avoid starting with them for two reasons:

                                      • Most linear-recursive functions could instead be implemented as loops, leading students to as "Why are we using this confusing technique instead of a simple loop?" Branched recursive functions do not lend themselves as easily to looping, so they're more compelling for students.
                                      • With linear-recursive functions, it's easy for students to develop the "go back" model of recursion, as if it were a simple loop. That model is totally wrong for recursive functions (even linear-recursive ones), but once a student gets it into his or her head, it's hard to dislodge.

                                      Other examples in the unit include Pascal's triangle (we see how the naïve implementation takes exponential time, but techniques such as memoization can be used to create an efficient program that still maintains the essentially recursive definition), conversion of numbers to and from binary, which is then generalized to arbitrary bases (up to 36, using all the letters as digits); and finding the subsets of a set (a simple example of a computation that’s unavoidably exponential in time, because the desired output is exponentially large).

                                      Finally, students build simple examples of recursive procedures that apply a function to every item of a list (square all the numbers, take the first letter of all the words, and so on), then generalize that pattern to write the map function, and similarly for keep and combine. This last programming lab is one highlight of the course, because it combines several central ideas: abstraction, functional programming, and recursion.

                                      raw-html:
                                      From old version just in case you want any of this. --MF

                                      This unit extends the technique of recursion, introduced in Unit 5, to reporters, allowing us to write recursive functions.

                                      In a sense, there is nothing new here: Students learned about reporters in Unit 1, and about recursion in Unit 5. But experience has shown that students have more trouble writing recursive functions than they do with recursive commands. The fact that the recursive calls come inside a combiner function, as explained in Lab 1, makes it even more important to develop the "leap of faith" understanding of recursion than in an imperative (command script) program.

                                      -h3: BJC Videos from UC Berkeley +heading: BJC Videos from UC Berkeley raw-html:

                                      There are a number of BJC videos from the edX version of the curriculum that are relevant to Unit 8. These are available on the Teacher Resources page.

                                      -h3: Teacher Guides for Student Labs +heading: Teacher Guides for Student Labs resource: Lab 1: Recursive Reporters [/bjc-r/cur/teaching-guide/U8/lab-pages/1-recursive-reporters.html] raw-html:
                                      • 2–4 days (80–160 minutes)
                                      resource: Lab 2: Base Conversion [/bjc-r/cur/teaching-guide/U8/lab-pages/2-base-conversion.html] @@ -24,10 +24,10 @@ h3: Teacher Guides for Student Labs resource: Optional Project: Sorting [/bjc-r/cur/teaching-guide/U8/lab-pages/U8-optional-project-sorting.html] //raw-html:
                                      • 3–5 days (130–200 minutes)
                                      -h3: Assessments and Solutions +heading: Assessments and Solutions raw-html:
                                      -h3: Optional Teaching Resources +heading: Optional Teaching Resources raw-html:
                                      raw-html:
                                      • Vocabulary Activities (Units 7 and 8)
                                        • raw-html: From d8ab936078c2f2695d56e52e96dc01e0f1b2c682 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 15:41:43 -0700 Subject: [PATCH 13/16] a11y: bump axe versions --- Gemfile.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index f02065809..6eb0a5dc9 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -3,14 +3,14 @@ GEM specs: addressable (2.8.6) public_suffix (>= 2.0.2, < 6.0) - axe-core-api (4.9.1) + axe-core-api (4.10.0) dumb_delegator virtus - axe-core-capybara (4.9.1) - axe-core-api (= 4.9.1) + axe-core-capybara (4.10.0) + axe-core-api (= 4.10.0) dumb_delegator - axe-core-rspec (4.9.1) - axe-core-api (= 4.9.1) + axe-core-rspec (4.10.0) + axe-core-api (= 4.10.0) dumb_delegator virtus axiom-types (0.1.1) From 509dc979bb191e4c95ca993e6040533b3aa7034b Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 16:03:58 -0700 Subject: [PATCH 14/16] delete part of old comment causing test failure... --- cur/teaching-guide/U4/lab-pages/1-reliable-communication.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html b/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html index 19a155483..f1b4d5e29 100644 --- a/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html +++ b/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html @@ -77,7 +77,7 @@

                                        Lab Pages

                                      • What is the minimum number of nodes that can stop working before the sender and the receiver can't communicate? One way to answer this question is to note that the receiver has only two neighbors, so if those two nodes go down, it can't get any messages no matter where the sender is in the network. (The same argument applies to the sender, but since the sender has three neighbors and 3 > 2, it's the receiver that provides the answer to this question.)
                                      • What is the maximum number of nodes that can fail and still let Sender and Receiver communicate? To answer this question, you can find the shortest path between the desired endpoints (which is the one through the two highly-connected central nodes) and then let all the other nodes fail.
                                      -

                                      Brian

                                      This is new. I pulled it off the bottom of the student page and dumped it here. --MF, 11/18/19
                                      +
                                      This is new. I pulled it off the bottom of the student page and dumped it here. --MF, 11/18/19
                                    • The last question on this student page poses several questions. Here are some possible correct responses:
                                        From 68f3ea7aa7bc45cf75309f05b8f8b1f992841c03 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Wed, 25 Sep 2024 16:12:35 -0700 Subject: [PATCH 15/16] a11y: sigh, why isnt this page passing the heading order test? --- .../lab-pages/1-reliable-communication.html | 483 +++++++++++------- 1 file changed, 287 insertions(+), 196 deletions(-) diff --git a/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html b/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html index f1b4d5e29..cfd9c4456 100644 --- a/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html +++ b/cur/teaching-guide/U4/lab-pages/1-reliable-communication.html @@ -1,214 +1,305 @@ - - - - Unit 4 Lab 1 Teacher Guide - - -

                                        Lab 1: Computer Networks

                                        -
                                        KEEP SUCH THAT needs to be fixed. --MF, 6/22/20
                                        -

                                        This lab offers a very brief overview of what could be (and often is, in college-level CS) a full course in itself: how the Internet works. It emphasizes a few key ideas:

                                        -
                                          -
                                        • The Internet is a huge artifact, built and maintained by thousands of people around the world, based on a level of cooperation that's remarkable, considering that it connects enemy countries and competing corporations.
                                          • -
                                        • The design of the network has to be very different from the kind of programming students have done in this course, because in such a large system you have to assume that some network software or (more likely) equipment will fail in the middle of a transaction. So the network needs a lot of redundancy, and software (mostly running in routers) has to manage the redundant parts.
                                          • -
                                        • - The complexity of the network is such that abstraction is an absolute requirement, not just a good idea in general. The multiple levels of abstraction are provided by protocols: design specifications for software in terms of the services it can expect from lower levels of abstraction and the services it must provide to higher levels. There are four main levels of abstraction: -
                                            -
                                          • Application layer: User-visible software such as browsers and email. Assumes a reliable Internet.
                                            • -
                                          • Transport layer: Provides the abstraction of a reliable Internet. The main protocol at this level is TCP: Transmission Control Protocol. Assumes a world-wide addressable Internet.
                                            • -
                                          • Internet layer: Provides the abstraction of a world-wide Internet. The main protocol at this level is IP: Internet Protocol. This runs mainly in routers, not in users' computers. Assumes connection to a local network and one or more larger networks.
                                            • -
                                          • Link layer: Provides hardware connection to a network. Ethernet, WiFi, and cellular data are the main examples.
                                            • -
                                          -
                                          • -
                                        • The running of the Internet takes a lot of work, and involves a lot of international politics. "Who's in charge?" is not a simple question.
                                          • -
                                        -

                                        In addition to these main points, there's a lot of vocabulary the College Board expects students to learn. We try to present the vocabulary a little at a time, in contexts in which each term makes sense.

                                        + + + + Unit 4 Lab 1 Teacher Guide + + +

                                        Lab 1: Computer Networks

                                        +
                                        KEEP SUCH THAT needs to be fixed. --MF, 6/22/20
                                        +

                                        This lab offers a very brief overview of what could be (and often is, in college-level CS) a full course in + itself: how the Internet works. It emphasizes a few key ideas:

                                        +
                                          +
                                        • The Internet is a huge artifact, built and maintained by thousands of people around the world, based on a + level of cooperation that's remarkable, considering that it connects enemy countries and competing + corporations.
                                          • +
                                        • The design of the network has to be very different from the kind of programming students have done in this + course, because in such a large system you have to assume that some network software or (more likely) + equipment will fail in the middle of a transaction. So the network needs a lot of redundancy, and software + (mostly running in routers) has to manage the redundant parts.
                                          • +
                                        • + The complexity of the network is such that abstraction is an absolute requirement, not just a good idea in + general. The multiple levels of abstraction are provided by protocols: design specifications for + software in terms of the services it can expect from lower levels of abstraction and the services it must + provide to higher levels. There are four main levels of abstraction: +
                                            +
                                          • Application layer: User-visible software such as browsers and email. Assumes a reliable Internet. +
                                            • +
                                          • Transport layer: Provides the abstraction of a reliable Internet. The main protocol at this level is + TCP: Transmission Control Protocol. Assumes a world-wide addressable Internet.
                                            • +
                                          • Internet layer: Provides the abstraction of a world-wide Internet. The main protocol at this level + is IP: Internet Protocol. This runs mainly in routers, not in users' computers. Assumes connection + to a local network and one or more larger networks.
                                            • +
                                          • Link layer: Provides hardware connection to a network. Ethernet, WiFi, and cellular data are the + main examples.
                                            • +
                                          +
                                          • +
                                        • The running of the Internet takes a lot of work, and involves a lot of international politics. "Who's + in charge?" is not a simple question.
                                          • +
                                        +

                                        In addition to these main points, there's a lot of vocabulary the College Board expects students to learn. We try + to present the vocabulary a little at a time, in contexts in which each term makes sense.

                                        -

                                        Pacing

                                        -
                                        - The 4 lab pages could be split across 2–4 days (80–160 minutes). Expected times to complete follow: - -
                                        +

                                        Pacing

                                        +
                                        + The 4 lab pages could be split across 2–4 days (80–160 minutes). Expected times to + complete follow: + +
                                        -

                                        Lab Pages

                                        -
                                        -
                                          -
                                        • - Page 1: What Is the Internet? -
                                            -
                                          • - Learning Goals: -
                                              -
                                            • Understand the range of uses of the Internet, including but not limited to the World Wide Web.
                                              • -
                                            • Understand some of the technical requirements to make the Internet work.
                                              • -
                                            • Understand what it means for data or processors to be "in the cloud."
                                              • -
                                            -
                                            • -
                                          • - Tips: -
                                              -
                                            • Ask your school's IT person if you can run "traceroute" in class, to show students how a message is routed to a computer in another country.
                                              • -
                                            -
                                            • -
                                          -
                                          • -
                                        • - Page 2: Network Redundancy. -
                                            -
                                          • Learning Goal: Understand how network redundancy is accomplished on the Internet.
                                            • -
                                          • - Tips: -
                                              -
                                            • - After students have worked through the questions on the lab page, you could use these questions for a group discussion: - A network with the sender connected to the receiver via a multitude of nodes and routes demonstrating network redundancy -
                                                -
                                              • Are there any other two nodes whose failure would stop the message from going through? Either the two neighbor nodes of the receiver could fail or the right neighbor node of the receiver and the node above the left neighbor node of the receiver could fail.
                                                • -
                                              • What is the minimum number of extra connections you'd have to add so that any two nodes could fail without preventing messages between any two other nodes? The answer is two. There are four vertices with only two neighbors; use one edge to connect any two of those, and another to connect the other two. (This will require "crossing" connections on the graph as it is drawn here, but this is OK and could offer an opportunity to remind students of what the elements of the graph represent.)
                                                • -
                                              • What is the minimum number of nodes that can stop working before the sender and the receiver can't communicate? One way to answer this question is to note that the receiver has only two neighbors, so if those two nodes go down, it can't get any messages no matter where the sender is in the network. (The same argument applies to the sender, but since the sender has three neighbors and 3 > 2, it's the receiver that provides the answer to this question.)
                                                • -
                                              • What is the maximum number of nodes that can fail and still let Sender and Receiver communicate? To answer this question, you can find the shortest path between the desired endpoints (which is the one through the two highly-connected central nodes) and then let all the other nodes fail.
                                                • -
                                              -
                                              This is new. I pulled it off the bottom of the student page and dumped it here. --MF, 11/18/19
                                              -
                                              • -
                                            • The last question on this student page poses several questions. Here are some possible correct responses: -
                                                -
                                              • The benefit of fault tolerance is that if some piece of the system fails, the whole system doesn't fail.
                                                • -
                                              • The Internet is fault tolerance because is has redundant connections.
                                                • -
                                              • The vulnerabilities to failure include damage to a cable, power failure, military intervention, hardware malfunction, etc.
                                                • -
                                              -
                                              • -
                                            -
                                            • -
                                          -
                                          • -
                                        • - Page 3: Internet Abstractions and Open Protocols. -
                                            -
                                          • - Learning Goals: -
                                              -
                                            • Understand the four layers of abstraction in the Internet protocols.
                                              • -
                                            • Understand how TCP/IP together provide the main abstractions for the net.
                                              • -
                                            • Understand how your home router can send a message to any IP address.
                                              • -
                                            -
                                            • -
                                          • - Tips: -
                                              -
                                            • The Wikipedia article "Internet Protocol Suite" has a chart showing just a few of the 300-odd protocols that run the Internet. You might let interested kids read up on some obscure protocol and explain to the class what it does and why it's important.
                                              • -
                                            • The specific implementation of TCP/IP most commonly used around the world was developed at UC Berkeley. :-)
                                              • -
                                            • It's easy to give a one-sentence description of a protocol, but, for example, early implementations of TCP worked in theory but could easily become swamped with backed up traffic; the current protocol description includes complicated timing mechanisms that are essential to keeping the net flowing smoothly.
                                              • -
                                            -
                                            • -
                                          -
                                          • -
                                        • - Page 4: Who's In Charge of the Internet? -
                                            -
                                          • Learning Goal: Understand the history of the development of the Internet. In particular, understand the political history of ICANN and the IETF.
                                            • -
                                          -
                                          • - -
                                        -
                                        - -
                                        Are we cutting these assignments? If so, please delete HTML. --MF, 5/16/20
                                        - - -

                                        Solutions

                                        -
                                        - - -

                                        Correlation with 2020 AP CS Principles Framework 

                                        -
                                        -

                                        Computational Thinking Practices: Skills

                                        + +
                                      • + Tips:
                                          -
                                        • 1.D: Evaluate solution options.
                                          • -
                                        • 5.A: Explain how computing systems work.
                                          • +
                                        • Ask your school's IT person if you can run "traceroute" in class, to show + students how a message is routed to a computer in another country.
                                        -

                                        Learning Objectives:

                                        +
                                        • +
                                      +
                                      • +
                                    • + Page 2: Network Redundancy. +
                                        +
                                      • Learning Goal: Understand how network redundancy is accomplished on the + Internet.
                                        • +
                                      • + Tips:
                                          -
                                        • CSN-1.A: Explain how computing devices work together in a network. (5.A)
                                          • -
                                        • CSN-1.B: Explain how the Internet works. (5.A)
                                          • -
                                        • CSN-1.D: Describe the differences between the Internet and the World Wide Web. (5.A)
                                          • -
                                        • - CSN-1.E: For fault-tolerant systems, like the Internet: -
                                            -
                                          1. Describe the benefits of fault tolerance. (1.D)
                                            2. -
                                          2. Explain how a given system is fault-tolerant. (5.A)
                                            3. -
                                          3. Identify vulnerabilities to failure in a system. (1.D)
                                            4. -
                                          -
                                          • +
                                        • + After students have worked through the questions on the lab page, you could use these + questions for a group discussion: + A network with the sender connected to the receiver via a multitude of nodes and routes demonstrating network redundancy +
                                            +
                                          • Are there any other two nodes whose failure would stop the message from going + through? Either the two neighbor nodes of the receiver could fail or the right + neighbor node of the receiver and the node above the left neighbor node + of the receiver could fail.
                                            • +
                                          • What is the minimum number of extra connections you'd have to add so that + any two nodes could fail without preventing messages between any two + other nodes? The answer is two. There are four vertices with only two neighbors; + use one edge to connect any two of those, and another to connect the other two. + (This will require "crossing" connections on the graph as it is drawn here, but + this is OK and could offer an opportunity to remind students of what the + elements of the graph represent.)
                                            • +
                                          • What is the minimum number of nodes that can stop working before the + sender and the receiver can't communicate? One way to answer this question is to + note that the receiver has only two neighbors, so if those two nodes go down, it + can't get any messages no matter where the sender is in the network. (The same + argument applies to the sender, but since the sender has three neighbors and 3 + > 2, it's the receiver that provides the answer to this question.)
                                            • +
                                          • What is the maximum number of nodes that can fail and still let Sender + and Receiver communicate? To answer this question, you can find the shortest + path between the desired endpoints (which is the one through the two + highly-connected central nodes) and then let all the other nodes fail.
                                            • +
                                          +
                                          This is new. I pulled it off the bottom of the student page and + dumped it here. --MF, 11/18/19
                                          +
                                          • +
                                        • The last question on this student page poses several questions. Here are some possible + correct responses: +
                                            +
                                          • The benefit of fault tolerance is that if some piece of the system fails, the + whole system doesn't fail.
                                            • +
                                          • The Internet is fault tolerance because is has redundant connections.
                                            • +
                                          • The vulnerabilities to failure include damage to a cable, power failure, + military intervention, hardware malfunction, etc.
                                            • +
                                          +
                                        -

                                        Essential Knowledge:

                                        +
                                        • +
                                      +
                                      • +
                                    • + Page 3: Internet Abstractions and Open Protocols. +
                                        +
                                      • + Learning Goals: +
                                          +
                                        • Understand the four layers of abstraction in the Internet protocols.
                                          • +
                                        • Understand how TCP/IP together provide the main abstractions for the net.
                                          • +
                                        • Understand how your home router can send a message to any IP address.
                                          • +
                                        +
                                        • +
                                      • + Tips:
                                          -
                                        • CSN-1.A.1: A computing device is a physical artifact that can run a program. Some examples include computers, tablets, servers, routers, and smart sensors.
                                          • -
                                        • CSN-1.A.2: A computing system is a group of computing devices and programs working together for a common purpose.
                                          • -
                                        • CSN-1.A.3: A computer network is a group of interconnected computing devices capable of sending or receiving data.
                                          • -
                                        • CSN-1.A.4: A computer network is a type of a computing system.
                                          • -
                                        • CSN-1.A.5: A path between two computing devices on a computer network (a sender and a receiver) is a sequence of directly connected computing devices that begins at the sender and ends at the receiver.
                                          • -
                                        • CSN-1.A.6: Routing is the process of finding a path from sender to receiver.
                                          • -
                                        • CSN-1.A.7: The bandwidth of a computer network is the maximum amount of data that can be sent in a fixed amount of time.
                                          • -
                                        • CSN-1.A.8: Bandwidth is usually measured in bits per second.
                                          • -
                                        • CSN-1.B.1: The Internet is a computer network consisting of interconnected networks that use standardized, open (nonproprietary) communication protocols.
                                          • -
                                        • CSN-1.B.2: Access to the Internet depends on the ability to connect a computing device to an Internet-connected device.
                                          • -
                                        • CSN-1.B.3: A protocol is an agreed-upon set of rules that specify the behavior of a system.
                                          • -
                                        • CSN-1.B.4: The protocols used in the Internet are open, which allows users to easily connect additional computing devices to the Internet.
                                          • -
                                        • CSN-1.B.5: Routing on the Internet is usually dynamic; it is not specified in advance.
                                          • -
                                        • CSN-1.B.6: The scalability of a system is the capacity for the system to change in size and scale to meet new demands.
                                          • -
                                        • CSN-1.B.7: The Internet was designed to be scalable.
                                          • -
                                        • CSN-1.C.1: Information is passed through the Internet as a data stream. Data streams contain chunks of data, which are encapsulated in packets.
                                          • -
                                        • CSN-1.C.2: Packets contain a chunk of data and metadata used for routing the packet between the origin and the destination on the Internet, as well as for data reassembly.
                                          • -
                                        • CSN-1.C.3: Packets may arrive at the destination in order, out of order, or not at all.
                                          • -
                                        • CSN-1.C-4: IP, TCP, and UDP are common protocols used on the Internet.
                                          • -
                                        • CSN-1.D.1: The World Wide Web is a system of linked pages, programs, and files.
                                          • -
                                        • CSN-1.D.2: HTTP is a protocol used by the World Wide Web.
                                          • -
                                        • CSN-1.D.3: The World Wide Web uses the Internet.
                                          • -
                                        • CSN-1.E.1: The Internet has been engineered to be fault-tolerant, with abstractions for routing and transmitting data.
                                          • -
                                        • CSN-1.E.2: Redundancy is the inclusion of extra components that can be used to mitigate failure of a system if other components fail.
                                          • -
                                        • CSN-1.E.3: One way to accomplish network redundancy is by having more than one path between any two connected devices.
                                          • -
                                        • CSN-1.E.4: If a particular device or connection on the Internet fails, subsequent data will be sent via a different route, if possible.
                                          • -
                                        • CSN-1.E.5: When a system can support failures and still continue to function, it is called fault-tolerant. This is important because elements of complex systems fail at unexpected times, often in groups, and fault tolerance allows users to continue to use the network.
                                          • -
                                        • CSN-1.E.6: Redundancy within a system often requires additional resources but can provide the benefit of fault tolerance.
                                          • -
                                        • CSN-1.E.7: The redundancy of routing options between two points increases the reliability of the Internet and helps it scale to more devices and more people.
                                          • -
                                        • - IOC-1.B.1: Computing innovations can be used in ways that their creators had not originally intended: -
                                            -
                                          • The World Wide Web was originally intended only for rapid and easy exchange of information within the scientific community.
                                            • -
                                          -
                                          • +
                                        • The Wikipedia article "Internet Protocol Suite" has a chart showing just a few of + the 300-odd protocols that run the Internet. You might let interested kids read up on + some obscure protocol and explain to the class what it does and why it's important.
                                          • +
                                        • The specific implementation of TCP/IP most commonly used around the world was developed + at UC Berkeley. :-)
                                          • +
                                        • It's easy to give a one-sentence description of a protocol, but, for example, early + implementations of TCP worked in theory but could easily become swamped with backed up + traffic; the current protocol description includes complicated timing mechanisms that + are essential to keeping the net flowing smoothly.
                                        -
                                    2. + +

                      +
                      • +
                    • + Page 4: Who's In Charge of the Internet? +
                        +
                      • Learning Goal: Understand the history of the development of the + Internet. In particular, understand the political history of ICANN and the IETF.
                        • +
                      +
                      • + +
                    +
                    + + +
                    Are we cutting these assignments? If so, please delete HTML. --MF, 5/16/20
                    + + +

                    Solutions

                    +
                    + + +

                    Correlation with 2020 AP CS Principles Framework 

                    +
                    +

                    Computational Thinking Practices: Skills

                    +
                      +
                    • 1.D: Evaluate solution options.
                      • +
                    • 5.A: Explain how computing systems work.
                      • +
                    +

                    Learning Objectives:

                    +
                      +
                    • CSN-1.A: Explain how computing devices work together in a network. (5.A)
                      • +
                    • CSN-1.B: Explain how the Internet works. (5.A)
                      • +
                    • CSN-1.D: Describe the differences between the Internet and the World Wide Web. (5.A) +
                      • +
                    • + CSN-1.E: For fault-tolerant systems, like the Internet: +
                        +
                      1. Describe the benefits of fault tolerance. (1.D)
                        2. +
                      2. Explain how a given system is fault-tolerant. (5.A)
                        3. +
                      3. Identify vulnerabilities to failure in a system. (1.D)
                        4. +
                      +
                      • +
                    +

                    Essential Knowledge:

                    +
                      +
                    • CSN-1.A.1: A computing device is a physical artifact that can run a program. + Some examples include computers, tablets, servers, routers, and smart sensors.
                      • +
                    • CSN-1.A.2: A computing system is a group of computing devices and programs + working together for a common purpose.
                      • +
                    • CSN-1.A.3: A computer network is a group of interconnected computing devices + capable of sending or receiving data.
                      • +
                    • CSN-1.A.4: A computer network is a type of a computing system.
                      • +
                    • CSN-1.A.5: A path between two computing devices on a computer network (a + sender and a receiver) is a sequence of directly connected computing devices that begins at the sender + and ends at the receiver.
                      • +
                    • CSN-1.A.6: Routing is the process of finding a path from sender to receiver. +
                      • +
                    • CSN-1.A.7: The bandwidth of a computer network is the maximum amount of data + that can be sent in a fixed amount of time.
                      • +
                    • CSN-1.A.8: Bandwidth is usually measured in bits per second.
                      • +
                    • CSN-1.B.1: The Internet is a computer network consisting of interconnected networks + that use standardized, open (nonproprietary) communication protocols.
                      • +
                    • CSN-1.B.2: Access to the Internet depends on the ability to connect a computing device + to an Internet-connected device.
                      • +
                    • CSN-1.B.3: A protocol is an agreed-upon set of rules that specify the behavior + of a system.
                      • +
                    • CSN-1.B.4: The protocols used in the Internet are open, which allows users to + easily connect additional computing devices to the Internet.
                      • +
                    • CSN-1.B.5: Routing on the Internet is usually dynamic; it is not specified in advance. +
                      • +
                    • CSN-1.B.6: The scalability of a system is the capacity for the system to + change in size and scale to meet new demands.
                      • +
                    • CSN-1.B.7: The Internet was designed to be scalable.
                      • +
                    • CSN-1.C.1: Information is passed through the Internet as a data stream. Data + streams contain chunks of data, which are encapsulated in packets.
                      • +
                    • CSN-1.C.2: Packets contain a chunk of data and metadata used for routing the packet + between the origin and the destination on the Internet, as well as for data reassembly.
                      • +
                    • CSN-1.C.3: Packets may arrive at the destination in order, out of order, or not at all. +
                      • +
                    • CSN-1.C-4: IP, TCP, and UDP are common protocols used on the Internet.
                      • +
                    • CSN-1.D.1: The World Wide Web is a system of linked pages, programs, and files.
                      • +
                    • CSN-1.D.2: HTTP is a protocol used by the World Wide Web.
                      • +
                    • CSN-1.D.3: The World Wide Web uses the Internet.
                      • +
                    • CSN-1.E.1: The Internet has been engineered to be fault-tolerant, with abstractions for + routing and transmitting data.
                      • +
                    • CSN-1.E.2: Redundancy is the inclusion of extra components that can be used to + mitigate failure of a system if other components fail.
                      • +
                    • CSN-1.E.3: One way to accomplish network redundancy is by having more than one path + between any two connected devices.
                      • +
                    • CSN-1.E.4: If a particular device or connection on the Internet fails, subsequent data + will be sent via a different route, if possible.
                      • +
                    • CSN-1.E.5: When a system can support failures and still continue to function, it is + called fault-tolerant. This is important because elements of complex systems fail at unexpected + times, often in groups, and fault tolerance allows users to continue to use the network.
                      • +
                    • CSN-1.E.6: Redundancy within a system often requires additional resources but can + provide the benefit of fault tolerance.
                      • +
                    • CSN-1.E.7: The redundancy of routing options between two points increases the + reliability of the Internet and helps it scale to more devices and more people.
                      • +
                    • + IOC-1.B.1: Computing innovations can be used in ways that their creators had not + originally intended: +
                        +
                      • The World Wide Web was originally intended only for rapid and easy exchange of information + within the scientific community.
                        • +
                      +
                      • +
                    +
                    + + - From 4846ecdabe86d5084b6b733ed57ccba8af1b62c3 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Thu, 3 Oct 2024 13:31:14 -0700 Subject: [PATCH 16/16] Set title on embedded iframes, add robots.txt --- llab/script/curriculum.js | 5 +++-- robots.txt | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 robots.txt diff --git a/llab/script/curriculum.js b/llab/script/curriculum.js index 42b648614..8352fc07e 100755 --- a/llab/script/curriculum.js +++ b/llab/script/curriculum.js @@ -309,7 +309,7 @@ llab.addFrame = function() { var source = llab.getQueryParameter("src"); var frame = $(document.createElement("iframe")).attr( - {'src': source, 'class': 'content-embed'} + {'src': source, 'class': 'content-embed', 'title': 'Embedded video content'} ); let content = $(document.createElement('div')); @@ -626,7 +626,8 @@ llab.addFeedback = function(title, topic, course) { 'id': 'feedback-frame', 'width': "300", 'height': "230", - 'src': surveyURL + 'src': surveyURL, + 'title': 'Page feedback survey' }); $('#fdbk').append(frame); } diff --git a/robots.txt b/robots.txt new file mode 100644 index 000000000..fa61b0290 --- /dev/null +++ b/robots.txt @@ -0,0 +1,3 @@ +# This restricts what search engines and other tools can crawl. +User-agent: * +Disallow: /old/