From f3c9d6f16854827c54d477bb501542594c63f9b3 Mon Sep 17 00:00:00 2001 From: Clare Constantine Date: Thu, 25 Apr 2019 16:54:33 -0700 Subject: [PATCH 01/18] show message instead of scholarship dropdown for new facilitator attendees --- .../components/workshop_enrollment_school_info.jsx | 4 ++++ .../api/v1/pd/workshop_enrollment_serializer.rb | 9 ++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/src/code-studio/pd/workshop_dashboard/components/workshop_enrollment_school_info.jsx b/apps/src/code-studio/pd/workshop_dashboard/components/workshop_enrollment_school_info.jsx index 96d6617f436df..09a0638061aa5 100644 --- a/apps/src/code-studio/pd/workshop_dashboard/components/workshop_enrollment_school_info.jsx +++ b/apps/src/code-studio/pd/workshop_dashboard/components/workshop_enrollment_school_info.jsx @@ -103,6 +103,10 @@ export class WorkshopEnrollmentSchoolInfo extends React.Component { } scholarshipInfo(enrollment) { + if (enrollment.new_facilitator) { + return No (New Facilitator); + } + if ( this.props.permissionList.has(ProgramManager) || this.props.permissionList.has(WorkshopAdmin) diff --git a/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb b/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb index be6738fa1d839..e9920047531fa 100644 --- a/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb +++ b/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb @@ -1,9 +1,10 @@ class Api::V1::Pd::WorkshopEnrollmentSerializer < ActiveModel::Serializer + include Pd::Application::ActiveApplicationModels attributes :id, :first_name, :last_name, :email, :district_name, :school, :role, :grades_teaching, :attended_csf_intro_workshop, :csf_course_experience, :csf_courses_planned, :csf_has_physical_curriculum_guide, :user_id, :attended, :pre_workshop_survey, :previous_courses, :replace_existing, :attendances, - :scholarship_status + :scholarship_status, :new_facilitator def user_id user = object.resolve_user @@ -33,4 +34,10 @@ def pre_workshop_survey def attendances object.attendances.count end + + def new_facilitator + object.workshop.local_summer? && + object.workshop.summer_workshop_school_year == APPLICATION_CURRENT_YEAR && + FACILITATOR_APPLICATION_CLASS.where(user_id: object.user_id).first&.status == 'accepted' + end end From 10ffb494a93826ac604b33027277af3fba31c065 Mon Sep 17 00:00:00 2001 From: Bethany Connor Date: Fri, 26 Apr 2019 00:21:00 +0000 Subject: [PATCH 02/18] Fix concept annotations --- dashboard/app/models/concept.rb | 1 - 1 file changed, 1 deletion(-) diff --git a/dashboard/app/models/concept.rb b/dashboard/app/models/concept.rb index 392564f0bd112..c3ea0a019c197 100644 --- a/dashboard/app/models/concept.rb +++ b/dashboard/app/models/concept.rb @@ -6,7 +6,6 @@ # name :string(255) # created_at :datetime # updated_at :datetime -# video_id :integer # video_key :string(255) # # Indexes From d9bf05908c26eaea535dd29f9d11d9edec8fbe14 Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Thu, 25 Apr 2019 20:41:53 -0700 Subject: [PATCH 03/18] fix initial sort of assessment submissions table --- .../SubmissionStatusAssessmentsTable.jsx | 31 +++- .../assessmentsTestHelpers.js | 69 ++++++- .../sectionAssessmentsRedux.js | 22 ++- .../SubmissionStatusAssessmentsTableTest.js | 171 +++++++++++++++++- 4 files changed, 269 insertions(+), 24 deletions(-) diff --git a/apps/src/templates/sectionAssessments/SubmissionStatusAssessmentsTable.jsx b/apps/src/templates/sectionAssessments/SubmissionStatusAssessmentsTable.jsx index 03837e8046a6e..b1b2590b17e54 100644 --- a/apps/src/templates/sectionAssessments/SubmissionStatusAssessmentsTable.jsx +++ b/apps/src/templates/sectionAssessments/SubmissionStatusAssessmentsTable.jsx @@ -54,8 +54,10 @@ export const studentOverviewDataPropType = PropTypes.shape({ name: PropTypes.string.isRequired, numMultipleChoiceCorrect: PropTypes.number, numMultipleChoice: PropTypes.number, - submissionTimeStamp: PropTypes.string.isRequired, + /* timestamp is passed in as a Date so the column can be sorted accurately. See note in sectionAssessmentsRedux for details*/ + submissionTimeStamp: PropTypes.instanceOf(Date).isRequired, isSubmitted: PropTypes.bool.isRequired, + inProgress: PropTypes.bool.isRequired, url: PropTypes.string }); @@ -73,9 +75,11 @@ class SubmissionStatusAssessmentsTable extends Component { }; state = { - [COLUMNS.NAME]: { - direction: 'desc', - position: 0 + sortingColumns: { + [COLUMNS.NAME]: { + direction: 'asc', + position: 0 + } } }; @@ -112,10 +116,22 @@ class SubmissionStatusAssessmentsTable extends Component { submissionTimestampColumnFormatter = (submissionTimeStamp, {rowData}) => { const isSubmitted = rowData.isSubmitted; + const inProgress = rowData.inProgress; + var submissionTimeStampText; + switch (true) { + case isSubmitted: + submissionTimeStampText = rowData.submissionTimeStamp.toLocaleString(); + break; + case inProgress: + submissionTimeStampText = i18n.inProgress(); + break; + default: + submissionTimeStampText = i18n.notStarted(); + } return ( -
-
{submissionTimeStamp}
+
+
{submissionTimeStampText}
{isSubmitted && (
@@ -187,7 +203,8 @@ class SubmissionStatusAssessmentsTable extends Component { style: { ...tableLayoutStyles.headerCell, ...{width: TABLE_COLUMN_WIDTHS.timeStamp} - } + }, + id: 'timestampHeaderCell' }, transforms: [sortable] }, diff --git a/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js b/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js index f4355c2fe0fff..c236349983ee8 100644 --- a/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js +++ b/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js @@ -1,5 +1,16 @@ import i18n from '@cdo/locale'; +export const testDataTimestamps = { + newest: new Date('2019-04-09T20:52:05.000+00:00'), + newer: new Date('2019-04-09T20:40:05.000+00:00'), + new: new Date('2019-02-09T20:52:05.000+00:00'), + old: new Date('2018-12-09T20:52:05.000+00:00'), + older: new Date('2018-10-09T20:52:05.000+00:00'), + oldest: new Date('2018-10-07T20:52:05.000+00:00'), + notStarted: new Date('1980-01-01T20:52:05.000+00:00'), + inProgress: new Date('1990-01-01T20:52:05.000+00:00') +}; + // Data for students' assessments multiple choice table export const studentOverviewData = [ { @@ -7,8 +18,9 @@ export const studentOverviewData = [ name: 'Caley', numMultipleChoiceCorrect: 7, numMultipleChoice: 10, - isSubmitted: true, - submissionTimeStamp: '2/16/18 - 7:41 AM' + isSubmitted: false, + inProgress: false, + submissionTimeStamp: testDataTimestamps.notStarted }, { id: 2, @@ -16,7 +28,8 @@ export const studentOverviewData = [ numMultipleChoiceCorrect: 3, numMultipleChoice: 10, isSubmitted: false, - submissionTimeStamp: '' + inProgress: true, + submissionTimeStamp: testDataTimestamps.inProgress }, { id: 3, @@ -24,7 +37,8 @@ export const studentOverviewData = [ numMultipleChoiceCorrect: 8, numMultipleChoice: 10, isSubmitted: true, - submissionTimeStamp: '5/29/18 - 7:41 AM' + inProgress: false, + submissionTimeStamp: testDataTimestamps.newest }, { id: 4, @@ -32,15 +46,17 @@ export const studentOverviewData = [ numMultipleChoiceCorrect: 10, numMultipleChoice: 10, isSubmitted: true, - submissionTimeStamp: '5/29/18 - 8:00 AM' + inProgress: false, + submissionTimeStamp: testDataTimestamps.newer }, { id: 5, name: 'Brad', numMultipleChoiceCorrect: 0, numMultipleChoice: 10, - isSubmitted: false, - submissionTimeStamp: '' + isSubmitted: true, + inProgress: false, + submissionTimeStamp: testDataTimestamps.new }, { id: 6, @@ -48,7 +64,44 @@ export const studentOverviewData = [ numMultipleChoiceCorrect: 0, numMultipleChoice: 10, isSubmitted: true, - submissionTimeStamp: '5/29/18 - 8:05 AM' + inProgress: false, + submissionTimeStamp: testDataTimestamps.old + }, + { + id: 7, + name: 'Dani', + numMultipleChoiceCorrect: 0, + numMultipleChoice: 10, + isSubmitted: true, + inProgress: false, + submissionTimeStamp: testDataTimestamps.older + }, + { + id: 8, + name: 'Amanda', + numMultipleChoiceCorrect: 0, + numMultipleChoice: 10, + isSubmitted: true, + inProgress: false, + submissionTimeStamp: testDataTimestamps.oldest + }, + { + id: 9, + name: 'Nkiru', + numMultipleChoiceCorrect: 7, + numMultipleChoice: 10, + isSubmitted: false, + inProgress: true, + submissionTimeStamp: testDataTimestamps.inProgress + }, + { + id: 10, + name: 'Karis', + numMultipleChoiceCorrect: 7, + numMultipleChoice: 10, + isSubmitted: false, + inProgress: false, + submissionTimeStamp: testDataTimestamps.notStarted } ]; diff --git a/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js b/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js index 1099f94f909a0..c05c5d721702b 100644 --- a/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js +++ b/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js @@ -3,7 +3,6 @@ import { SET_SCRIPT, getSelectedScriptName } from '@cdo/apps/redux/scriptSelectionRedux'; -import i18n from '@cdo/locale'; import experiments from '@cdo/apps/util/experiments'; export const ALL_STUDENT_FILTER = 0; @@ -651,25 +650,36 @@ export const getStudentsMCSummaryForCurrentAssessment = state => { const studentsAssessment = studentsObject.responses_by_assessment[currentAssessmentId]; - // If the student has not submitted this assessment, display empty results. + /* In order for the sorting of the submission timestamp column to work correctly in the SubmissionStatusAssessmentsTable, the submissionTimeStamp field must be a Date. So, we pass in arbitrary Dates in the past to handle when the assessment is in progress or not yet started. */ + const inProgressFakeTimestamp = new Date('1990-01-01T20:52:05.000+00:00'); + const notStartedFakeTimestamp = new Date('1980-01-01T20:52:05.000+00:00'); + + // If the student has not submitted this assessment if (!studentsAssessment) { return { id: studentId, name: studentsObject.student_name, isSubmitted: false, - submissionTimeStamp: i18n.notStarted() + inProgress: false, + submissionTimeStamp: notStartedFakeTimestamp }; } // Transform that data into what we need for this particular table, in this case // it is the structure studentOverviewDataPropType - const submissionTimeStamp = studentsAssessment.submitted - ? new Date(studentsAssessment.timestamp).toLocaleString() - : i18n.inProgress(); + + /* In progress assessments have a timestamp from the server indicating when the student last worked on the assessment. We don't display that timestamp in the SubmissionStatusAssessmentsTable, but we use it here to check if the assessment has been started. */ + const inProgress = + studentsAssessment.timestamp && !studentsAssessment.submitted; + const submissionTimeStamp = inProgress + ? inProgressFakeTimestamp + : new Date(studentsAssessment.timestamp); + return { id: studentId, name: studentsObject.student_name, numMultipleChoiceCorrect: studentsAssessment.multi_correct, numMultipleChoice: studentsAssessment.multi_count, + inProgress: inProgress, isSubmitted: studentsAssessment.submitted, submissionTimeStamp: submissionTimeStamp, url: studentsAssessment.url diff --git a/apps/test/unit/templates/sectionAssessments/SubmissionStatusAssessmentsTableTest.js b/apps/test/unit/templates/sectionAssessments/SubmissionStatusAssessmentsTableTest.js index 0fa04989caaec..718bf75e31408 100644 --- a/apps/test/unit/templates/sectionAssessments/SubmissionStatusAssessmentsTableTest.js +++ b/apps/test/unit/templates/sectionAssessments/SubmissionStatusAssessmentsTableTest.js @@ -2,7 +2,11 @@ import React from 'react'; import {mount} from 'enzyme'; import {assert, expect} from '../../../util/configuredChai'; import SubmissionStatusAssessmentsTable from '@cdo/apps/templates/sectionAssessments/SubmissionStatusAssessmentsTable'; -import {studentOverviewData} from '@cdo/apps/templates/sectionAssessments/assessmentsTestHelpers'; +import { + studentOverviewData, + testDataTimestamps +} from '@cdo/apps/templates/sectionAssessments/assessmentsTestHelpers'; +import i18n from '@cdo/locale'; describe('SubmissionStatusAssessmentsTable', () => { it('renders a table', () => { @@ -26,7 +30,7 @@ describe('SubmissionStatusAssessmentsTable', () => { expect(tableHeaders).to.have.length(4); const tableRows = wrapper.find('tr'); - expect(tableRows).to.have.length(7); + expect(tableRows).to.have.length(11); }); it('renders with an icon if specified', () => { @@ -49,6 +53,167 @@ describe('SubmissionStatusAssessmentsTable', () => { ); const checkMarkIcons = wrapper.find('#checkmark'); - assert.equal(checkMarkIcons.length, 4); + assert.equal(checkMarkIcons.length, 6); + }); + + it('sorts submissions by date accurately', () => { + const wrapper = mount( + + ); + + const timeStampCells = wrapper.find('#timestampCell'); + assert.equal(timeStampCells.length, 10); + + const timestampHeaderCell = wrapper.find('#timestampHeaderCell'); + + // Sort with oldest first + timestampHeaderCell.simulate('click'); + + assert.equal( + wrapper + .find('#timestampCell') + .at(0) + .text(), + i18n.notStarted() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(1) + .text(), + i18n.notStarted() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(2) + .text(), + i18n.inProgress() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(3) + .text(), + i18n.inProgress() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(4) + .text(), + testDataTimestamps.oldest.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(5) + .text(), + testDataTimestamps.older.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(6) + .text(), + testDataTimestamps.old.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(7) + .text(), + testDataTimestamps.new.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(8) + .text(), + testDataTimestamps.newer.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(9) + .text(), + testDataTimestamps.newest.toLocaleString() + ); + + //Sort with newest first + timestampHeaderCell.simulate('click'); + + assert.equal( + wrapper + .find('#timestampCell') + .at(9) + .text(), + i18n.notStarted() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(8) + .text(), + i18n.notStarted() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(7) + .text(), + i18n.inProgress() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(6) + .text(), + i18n.inProgress() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(5) + .text(), + testDataTimestamps.oldest.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(4) + .text(), + testDataTimestamps.older.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(3) + .text(), + testDataTimestamps.old.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(2) + .text(), + testDataTimestamps.new.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(1) + .text(), + testDataTimestamps.newer.toLocaleString() + ); + assert.equal( + wrapper + .find('#timestampCell') + .at(0) + .text(), + testDataTimestamps.newest.toLocaleString() + ); }); }); From ac147c1e0527be01e30814766c26764a2584af8c Mon Sep 17 00:00:00 2001 From: Clare Constantine Date: Fri, 26 Apr 2019 16:37:30 -0700 Subject: [PATCH 04/18] add tests --- .../pd/workshop_enrollment_serializer_test.rb | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb b/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb index c5daf9ef2bdb5..e10eea8c69a8d 100644 --- a/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb +++ b/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb @@ -1,6 +1,7 @@ require 'test_helper' class Api::V1::Pd::WorkshopEnrollmentSerializerTest < ::ActionController::TestCase + include Pd::Application::ActiveApplicationModels test 'serialized workshop enrollment has expected attributes' do enrollment = create :pd_enrollment expected_attributes = [ @@ -8,7 +9,7 @@ class Api::V1::Pd::WorkshopEnrollmentSerializerTest < ::ActionController::TestCa :grades_teaching, :attended_csf_intro_workshop, :csf_course_experience, :csf_courses_planned, :csf_has_physical_curriculum_guide, :user_id, :attended, :pre_workshop_survey, :previous_courses, :replace_existing, :attendances, - :scholarship_status + :scholarship_status, :new_facilitator ] serialized = ::Api::V1::Pd::WorkshopEnrollmentSerializer.new(enrollment).attributes @@ -23,4 +24,18 @@ class Api::V1::Pd::WorkshopEnrollmentSerializerTest < ::ActionController::TestCa serialized = ::Api::V1::Pd::WorkshopEnrollmentSerializer.new(workshop.enrollments.first).attributes assert_equal enrollment.attendances.count, serialized[:attendances] end + + test 'new_facilitator' do + summer_workshop = create :pd_workshop, :local_summer_workshop_upcoming + enrollment = create :pd_enrollment, :from_user, workshop: summer_workshop + + serialized = ::Api::V1::Pd::WorkshopEnrollmentSerializer.new(summer_workshop.enrollments.first).attributes + refute serialized[:new_facilitator] + + fac_app = create FACILITATOR_APPLICATION_FACTORY, user: enrollment.user + fac_app.update(status: 'accepted') + + serialized = ::Api::V1::Pd::WorkshopEnrollmentSerializer.new(summer_workshop.enrollments.first).attributes + assert serialized[:new_facilitator] + end end From 8d1c965129cfa0791737661e4484d1c290073c06 Mon Sep 17 00:00:00 2001 From: Will Jordan Date: Sun, 28 Apr 2019 23:15:54 -0700 Subject: [PATCH 05/18] UI test updates: Remove redundant 'sign out' steps --- .../ui/features/hidden_scripts_eyes.feature | 2 -- .../ui/features/hidden_stages_eyes.feature | 2 -- dashboard/test/ui/features/i18n.feature | 30 ------------------- dashboard/test/ui/features/stage_lock.feature | 5 ---- .../features/teacher_student_toggle.feature | 3 -- 5 files changed, 42 deletions(-) diff --git a/dashboard/test/ui/features/hidden_scripts_eyes.feature b/dashboard/test/ui/features/hidden_scripts_eyes.feature index 67e100166d3db..32761aea680c8 100644 --- a/dashboard/test/ui/features/hidden_scripts_eyes.feature +++ b/dashboard/test/ui/features/hidden_scripts_eyes.feature @@ -4,13 +4,11 @@ Feature: Hidden Scripts Scenario: Hidden Scripts When I open my eyes to test "hidden scripts" Given I create an authorized teacher-associated student named "bobby" - And I sign out Then I sign in as "Teacher_bobby" Then I am on "http://studio.code.org/courses/allthethingscourse" And I wait to see ".uitest-togglehidden" Then I click selector ".uitest-togglehidden:nth(0) div:contains('Hidden')" And I see no difference for "teacher overview with hidden script" - And I sign out Then I sign in as "bobby" And I am on "http://studio.code.org/courses/allthethingscourse" And I see no difference for "student course overview with hidden script" diff --git a/dashboard/test/ui/features/hidden_stages_eyes.feature b/dashboard/test/ui/features/hidden_stages_eyes.feature index 33b79e85b524f..c5fcb12ae8231 100644 --- a/dashboard/test/ui/features/hidden_stages_eyes.feature +++ b/dashboard/test/ui/features/hidden_stages_eyes.feature @@ -4,14 +4,12 @@ Feature: Hidden Stages Scenario: Hidden Stages When I open my eyes to test "hidden stages" Given I create an authorized teacher-associated student named "bobby" - And I sign out Then I sign in as "Teacher_bobby" Then I am on "http://studio.code.org/s/allthethings" And I select the first section And I wait to see ".uitest-togglehidden" Then I click selector ".uitest-togglehidden:nth(1) div:contains('Hidden')" And I see no difference for "teacher overview with hidden stage" - And I sign out Then I sign in as "bobby" And I am on "http://studio.code.org/s/allthethings" And I see no difference for "student overview with hidden stage" diff --git a/dashboard/test/ui/features/i18n.feature b/dashboard/test/ui/features/i18n.feature index e1b5dda803e43..c6a6cb97108c8 100644 --- a/dashboard/test/ui/features/i18n.feature +++ b/dashboard/test/ui/features/i18n.feature @@ -10,8 +10,6 @@ Scenario: HoC tutorial in Spanish Then element "#runButton" is visible And element "#resetButton" is hidden Then element ".csf-top-instructions p" has "es" text from key "data.level.instructions.maze_2_14" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Frozen tutorial in Spanish Given I am on "http://studio.code.org/s/frozen/stage/1/puzzle/2/lang/es" @@ -21,8 +19,6 @@ Scenario: Frozen tutorial in Spanish Then element "#runButton" is visible And element "#resetButton" is hidden Then element ".csf-top-instructions p" has "es" text from key "data.short_instructions.frozen perpendicular" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Minecraft:Agent tutorial in Spanish Given I am on "http://studio.code.org/s/hero/stage/1/puzzle/1/lang/es" @@ -32,8 +28,6 @@ Scenario: Minecraft:Agent tutorial in Spanish And I click selector "#toggleButton" And I wait until element ".csf-top-instructions p" is visible And element ".csf-top-instructions p" has "es" text from key "data.short_instructions.MC_HOC_2017_01_RETRY" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Toolbox Categories in Spanish Given I am on "http://studio.code.org/s/allthethings/stage/3/puzzle/7/lang/es" @@ -48,8 +42,6 @@ Scenario: Toolbox Categories in Spanish Then element ".blocklyTreeRoot #\\\:7" has "es" text from key "data.block_categories.Logic" Then element ".blocklyTreeRoot #\\\:8" has "es" text from key "data.block_categories.Math" Then element ".blocklyTreeRoot #\\\:9" has "es" text from key "data.block_categories.Text" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Translated function names in Spanish Given I am on "http://studio.code.org/s/allthethings/stage/3/puzzle/3/lang/es" @@ -61,8 +53,6 @@ Scenario: Translated function names in Spanish And element "[block-id=28] .blocklyText" has "es" text from key "data.function_names.draw a square" # Workspace definition block is translated And element "[block-id=29] > .blocklyNonEditableText > .blocklyText" has "es" text from key "data.function_names.draw a square" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: HoC tutorial in Portuguese Given I am on "http://studio.code.org/hoc/15/lang/pt-br" @@ -72,8 +62,6 @@ Scenario: HoC tutorial in Portuguese Then element "#runButton" is visible And element "#resetButton" is hidden Then element ".csf-top-instructions p" has "pt-BR" text from key "data.level.instructions.maze_2_14" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds @no_circle Scenario: Frozen tutorial in Portuguese @@ -84,8 +72,6 @@ Scenario: Frozen tutorial in Portuguese Then element "#runButton" is visible And element "#resetButton" is hidden Then element ".csf-top-instructions p" has "pt-BR" text from key "data.short_instructions.frozen perpendicular" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Minecraft:Agent tutorial in Portuguese Given I am on "http://studio.code.org/s/hero/stage/1/puzzle/1/lang/pt-br" @@ -95,8 +81,6 @@ Scenario: Minecraft:Agent tutorial in Portuguese And I click selector "#toggleButton" And I wait until element ".csf-top-instructions p" is visible And element ".csf-top-instructions p" has "pt-BR" text from key "data.short_instructions.MC_HOC_2017_01_RETRY" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Toolbox Categories in Portuguese Given I am on "http://studio.code.org/s/allthethings/stage/3/puzzle/7/lang/pt-br" @@ -111,8 +95,6 @@ Scenario: Toolbox Categories in Portuguese Then element ".blocklyTreeRoot #\\:7" has "pt-BR" text from key "data.block_categories.Logic" Then element ".blocklyTreeRoot #\\:8" has "pt-BR" text from key "data.block_categories.Math" Then element ".blocklyTreeRoot #\\:9" has "pt-BR" text from key "data.block_categories.Text" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Translated function names in Portuguese Given I am on "http://studio.code.org/s/allthethings/stage/3/puzzle/3/lang/pt-BR" @@ -124,8 +106,6 @@ Scenario: Translated function names in Portuguese And element "[block-id=28] .blocklyText" has "pt-BR" text from key "data.function_names.draw a square" # Workspace definition block is translated And element "[block-id=29] > .blocklyNonEditableText > .blocklyText" has "pt-BR" text from key "data.function_names.draw a square" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: HoC tutorial in Arabic (RTL) Given I am on "http://studio.code.org/hoc/15/lang/ar-sa" @@ -135,8 +115,6 @@ Scenario: HoC tutorial in Arabic (RTL) Then element "#runButton" is visible And element "#resetButton" is hidden Then element ".csf-top-instructions p" has "ar-SA" text from key "data.level.instructions.maze_2_14" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Frozen tutorial in Arabic (RTL) Given I am on "http://studio.code.org/s/frozen/stage/1/puzzle/2/lang/ar-sa" @@ -146,8 +124,6 @@ Scenario: Frozen tutorial in Arabic (RTL) Then element "#runButton" is visible And element "#resetButton" is hidden Then element ".csf-top-instructions p" has "ar-SA" text from key "data.short_instructions.frozen perpendicular" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Minecraft:Agent tutorial in Arabic (RTL) Given I am on "http://studio.code.org/s/hero/stage/1/puzzle/1/lang/ar-sa" @@ -157,8 +133,6 @@ Scenario: Minecraft:Agent tutorial in Arabic (RTL) And I click selector "#toggleButton" And I wait until element ".csf-top-instructions p" is visible Then element ".csf-top-instructions p" has "ar-SA" text from key "data.short_instructions.MC_HOC_2017_01_RETRY" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Translated function names in Arabic Given I am on "http://studio.code.org/s/allthethings/stage/3/puzzle/3/lang/ar-SA" @@ -170,8 +144,6 @@ Scenario: Translated function names in Arabic And element "[block-id=28] .blocklyText" has "ar-SA" text from key "data.function_names.draw a square" # Workspace definition block is translated And element "[block-id=29] > .blocklyNonEditableText > .blocklyText" has "ar-SA" text from key "data.function_names.draw a square" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: Toolbox Categories in Arabic (RTL) Given I am on "http://studio.code.org/s/allthethings/stage/3/puzzle/7/lang/ar-sa" @@ -186,8 +158,6 @@ Scenario: Toolbox Categories in Arabic (RTL) Then element ".blocklyTreeRoot #\\:7" has "ar-SA" text from key "data.block_categories.Logic" Then element ".blocklyTreeRoot #\\:8" has "ar-SA" text from key "data.block_categories.Math" Then element ".blocklyTreeRoot #\\:9" has "ar-SA" text from key "data.block_categories.Text" - Given I am on "http://studio.code.org/reset_session/lang/en" - And I wait for 2 seconds Scenario: English fallback for missing dashboard or pegasus strings in Azerbaijani Given I am on "http://studio.code.org/lang/az-az" diff --git a/dashboard/test/ui/features/stage_lock.feature b/dashboard/test/ui/features/stage_lock.feature index d148698fe16ba..f2550b04d9969 100644 --- a/dashboard/test/ui/features/stage_lock.feature +++ b/dashboard/test/ui/features/stage_lock.feature @@ -6,7 +6,6 @@ Background: @eyes Scenario: Stage Locking Dialog When I open my eyes to test "stage locking" - And I sign out Then I sign in as "Teacher_bobby" Then I am on "http://studio.code.org/s/allthethings" And I select the first section @@ -32,7 +31,6 @@ Scenario: Lock settings for students # teacher unlocks - When I sign out And I sign in as "Teacher_bobby" And I am on "http://studio.code.org/s/allthethings" # Wait until detail view loads @@ -40,7 +38,6 @@ Scenario: Lock settings for students And I open the stage lock dialog And I unlock the stage for students And I wait until element ".modal-backdrop" is gone - And I sign out # now unlocked/not tried for student @@ -69,7 +66,6 @@ Scenario: Lock settings for students # teacher marks readonly - When I sign out And I sign in as "Teacher_bobby" And I am on "http://studio.code.org/s/allthethings" # Wait until detail view loads @@ -77,7 +73,6 @@ Scenario: Lock settings for students And I open the stage lock dialog And I show stage answers for students And I wait until element ".modal-backdrop" is gone - And I sign out # now unlocked/submitted for student diff --git a/dashboard/test/ui/features/teacher_student_toggle.feature b/dashboard/test/ui/features/teacher_student_toggle.feature index ad7668ff3d9ef..a4afb5df029a7 100644 --- a/dashboard/test/ui/features/teacher_student_toggle.feature +++ b/dashboard/test/ui/features/teacher_student_toggle.feature @@ -4,7 +4,6 @@ Feature: Teacher Student Toggle Scenario: Toggle on Multi Level When I open my eyes to test "toggle on multi level" Given I create an authorized teacher-associated student named "Daenerys" - And I sign out Then I sign in as "Teacher_Daenerys" Then I am on "http://studio.code.org/s/allthethings/stage/9/puzzle/1" And I see no difference for "page load" @@ -26,7 +25,6 @@ Scenario: Toggle on Multi Level Scenario: Toggle on Hidden Maze Level When I open my eyes to test "toggle on hidden maze level" Given I create an authorized teacher-associated student named "Arya" - And I sign out Then I sign in as "Teacher_Arya" Then I am on "http://studio.code.org/s/allthethings" And I select the first section @@ -45,7 +43,6 @@ Scenario: Toggle on Hidden Maze Level Scenario: Toggle on Lockable Level When I open my eyes to test "toggle on a lockable level" Given I create an authorized teacher-associated student named "Joffrey" - And I sign out Then I sign in as "Teacher_Joffrey" Then I am on "http://studio.code.org/s/allthethings/lockable/1/puzzle/1/page/1?noautoplay=true" From 33b64b1c25976ca6790537fd0871d3e5b471a732 Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Mon, 29 Apr 2019 11:35:00 -0700 Subject: [PATCH 06/18] export fake timestamps for reuse and update sectionAssessmentsReduxTest --- .../sectionAssessments/assessmentsTestHelpers.js | 8 ++++++++ .../sectionAssessments/sectionAssessmentsRedux.js | 8 ++++---- .../sectionAssessments/sectionAssessmentsReduxTest.js | 10 +++++++--- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js b/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js index c236349983ee8..2df2c340fa4e7 100644 --- a/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js +++ b/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js @@ -1,5 +1,13 @@ import i18n from '@cdo/locale'; +/* In order for the sorting of the submission timestamp column to work correctly in the SubmissionStatusAssessmentsTable, the submissionTimeStamp field must be a Date. So, we pass in arbitrary Dates in the past to handle when the assessment is in progress or not yet started. */ +export const inProgressFakeTimestamp = new Date( + '1990-01-01T20:52:05.000+00:00' +); +export const notStartedFakeTimestamp = new Date( + '1980-01-01T20:52:05.000+00:00' +); + export const testDataTimestamps = { newest: new Date('2019-04-09T20:52:05.000+00:00'), newer: new Date('2019-04-09T20:40:05.000+00:00'), diff --git a/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js b/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js index c05c5d721702b..bd1fb69b3f70d 100644 --- a/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js +++ b/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js @@ -4,6 +4,10 @@ import { getSelectedScriptName } from '@cdo/apps/redux/scriptSelectionRedux'; import experiments from '@cdo/apps/util/experiments'; +import { + inProgressFakeTimestamp, + notStartedFakeTimestamp +} from '@cdo/apps/templates/sectionAssessments/assessmentsTestHelpers'; export const ALL_STUDENT_FILTER = 0; @@ -650,10 +654,6 @@ export const getStudentsMCSummaryForCurrentAssessment = state => { const studentsAssessment = studentsObject.responses_by_assessment[currentAssessmentId]; - /* In order for the sorting of the submission timestamp column to work correctly in the SubmissionStatusAssessmentsTable, the submissionTimeStamp field must be a Date. So, we pass in arbitrary Dates in the past to handle when the assessment is in progress or not yet started. */ - const inProgressFakeTimestamp = new Date('1990-01-01T20:52:05.000+00:00'); - const notStartedFakeTimestamp = new Date('1980-01-01T20:52:05.000+00:00'); - // If the student has not submitted this assessment if (!studentsAssessment) { return { diff --git a/apps/test/unit/templates/sectionAssessments/sectionAssessmentsReduxTest.js b/apps/test/unit/templates/sectionAssessments/sectionAssessmentsReduxTest.js index f3abb71d2ef06..bd190f1cf5830 100644 --- a/apps/test/unit/templates/sectionAssessments/sectionAssessmentsReduxTest.js +++ b/apps/test/unit/templates/sectionAssessments/sectionAssessmentsReduxTest.js @@ -33,6 +33,7 @@ import sectionAssessments, { import {setSection} from '@cdo/apps/redux/sectionDataRedux'; import {setScriptId} from '@cdo/apps/redux/scriptSelectionRedux'; import experiments from '@cdo/apps/util/experiments'; +import {notStartedFakeTimestamp} from '@cdo/apps/templates/sectionAssessments/assessmentsTestHelpers'; describe('sectionAssessmentsRedux', () => { const initialState = sectionAssessments(undefined, {}); @@ -1432,14 +1433,16 @@ describe('sectionAssessmentsRedux', () => { numMultipleChoice: 10, numMultipleChoiceCorrect: 4, isSubmitted: true, - submissionTimeStamp: date.toLocaleString(), + inProgress: false, + submissionTimeStamp: date, url: 'code.org' }, { id: 99, name: 'Issac', isSubmitted: false, - submissionTimeStamp: 'Not started' + inProgress: false, + submissionTimeStamp: notStartedFakeTimestamp } ]); }); @@ -1488,7 +1491,8 @@ describe('sectionAssessmentsRedux', () => { id: 99, name: 'Issac', isSubmitted: false, - submissionTimeStamp: 'Not started' + inProgress: false, + submissionTimeStamp: notStartedFakeTimestamp } ]); }); From f3081a885c6032aa969a73c9eb5d32613d5b0f46 Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Mon, 29 Apr 2019 11:47:18 -0700 Subject: [PATCH 07/18] update to reconfiguredChai --- .../sectionAssessments/SubmissionStatusAssessmentsTableTest.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/test/unit/templates/sectionAssessments/SubmissionStatusAssessmentsTableTest.js b/apps/test/unit/templates/sectionAssessments/SubmissionStatusAssessmentsTableTest.js index 718bf75e31408..115c08665c1f0 100644 --- a/apps/test/unit/templates/sectionAssessments/SubmissionStatusAssessmentsTableTest.js +++ b/apps/test/unit/templates/sectionAssessments/SubmissionStatusAssessmentsTableTest.js @@ -1,6 +1,6 @@ import React from 'react'; import {mount} from 'enzyme'; -import {assert, expect} from '../../../util/configuredChai'; +import {assert, expect} from '../../../util/reconfiguredChai'; import SubmissionStatusAssessmentsTable from '@cdo/apps/templates/sectionAssessments/SubmissionStatusAssessmentsTable'; import { studentOverviewData, From e8c2e5d695df9f0fa09b69aa4cd41a5a9e859698 Mon Sep 17 00:00:00 2001 From: Continuous Integration Date: Mon, 29 Apr 2019 19:03:04 +0000 Subject: [PATCH 08/18] dashboard i18n sync --- .../config/locales/block_categories.en.yml | 1 - dashboard/config/locales/blocks.en.yml | 28 +++ dashboard/config/locales/callouts.en.yml | 12 +- dashboard/config/locales/display_name.en.yml | 1 + .../config/locales/long_instructions.en.yml | 163 +++++++++------- .../config/locales/short_instructions.en.yml | 11 +- i18n/locales/source/dashboard/base.yml | 8 +- .../source/dashboard/block_categories.yml | 1 - i18n/locales/source/dashboard/blocks.yml | 28 +++ i18n/locales/source/dashboard/callouts.yml | 12 +- .../locales/source/dashboard/display_name.yml | 1 + .../source/dashboard/long_instructions.yml | 182 ++++++++++-------- i18n/locales/source/dashboard/scripts.yml | 160 +++++++-------- .../source/dashboard/short_instructions.yml | 11 +- 14 files changed, 369 insertions(+), 250 deletions(-) diff --git a/dashboard/config/locales/block_categories.en.yml b/dashboard/config/locales/block_categories.en.yml index cb599248afe2c..a8b4c8866b364 100644 --- a/dashboard/config/locales/block_categories.en.yml +++ b/dashboard/config/locales/block_categories.en.yml @@ -49,7 +49,6 @@ en: Functional: Functional While Events: While Events Sprite Properties: Sprite Properties - Merge with Behaviors: Merge with Behaviors Predefined: Predefined test: test test2: test2 diff --git a/dashboard/config/locales/blocks.en.yml b/dashboard/config/locales/blocks.en.yml index e6fa3ed474d14..99225dcbebb9c 100644 --- a/dashboard/config/locales/blocks.en.yml +++ b/dashboard/config/locales/blocks.en.yml @@ -731,6 +731,8 @@ en: '"while"': while gamelab_clickedOn: text: when {SPRITE} clicked + gamelab_clickedSpritePointer: + text: clicked sprite gamelab_comment: text: 'comment: {COMMENT}' gamelab_console.log: @@ -942,6 +944,8 @@ en: text: move {SPRITE} pixels {DISTANCE} toward {TARGET} gamelab_moveUp: text: "{THIS} move up" + gamelab_objectSprite: + text: object sprite gamelab_playSound: text: playSound {SOUND} gamelab_pointInDirection: @@ -980,25 +984,35 @@ en: text: set background to {IMG} options: IMG: + '"https://studio.code.org/blockly/media/skins/studio/background_cave.png"': cave '"https://studio.code.org/api/v1/animation-library/04L4sdTODkNZF1OHf4qO_I.Al3QP43wA/category_backgrounds/city.png"': city '"https://studio.code.org/api/v1/animation-library/UieRK0NBKD3xVHtSJxcUTAuhzLM1D_Hq/category_backgrounds/continuous_grass.png"': continuous grass + '"https://studio.code.org/blockly/media/skins/studio/background.png"': court + '"https://studio.code.org/blockly/media/skins/studio/background_desert.png"': desert '"https://studio.code.org/api/v1/animation-library/nfgysU3t3P8XnUBAf9LjIy2JTHtdXpTj/category_backgrounds/desert_road.png"': desert road '"https://studio.code.org/api/v1/animation-library/4FnSIFL33P0PH_C_DnKOse2QbZCdtaJJ/category_backgrounds/farm_land.png"': farm land '"https://studio.code.org/api/v1/animation-library/vrlUwPslp0VK_KJcPQ9OPZNb.Ms5eBL5/category_backgrounds/floating_grass.png"': floating grass '"https://studio.code.org/api/v1/animation-library/ZjjFGjO0xNEZGEweTgANloehQrxwIXVM/category_backgrounds/front_of_house.png"': front of house + '"https://studio.code.org/blockly/media/skins/studio/background_space.png"': galaxy + '"https://studio.code.org/blockly/media/skins/studio/background_grid.png"': grid '"https://studio.code.org/api/v1/animation-library/1K7z7Kc3EeXsLV693byb0xxoJSJ4Du7e/category_backgrounds/kitchen.png"': 'kitchen ' '"https://studio.code.org/api/v1/animation-library/4bsf67OUrcX.t1wbIcE_xygGKxOkiQ6f/category_backgrounds/living_room.png"': living room '"https://studio.code.org/api/v1/animation-library/cJKusc1WPgWvCvgdwRX1gk8Zk0FggcVj/category_backgrounds/meadow.png"': meadow '"https://studio.code.org/api/v1/animation-library/4gC7uWaaRI4aDyrncCFO_wY_67vYhr4C/category_backgrounds/park_view.png"': park view '"https://studio.code.org/api/v1/animation-library/5K0h1rGe5ql4J9TdlqggIzGZYzbD38pF/category_backgrounds/pine_trees.png"': pine trees + '"https://studio.code.org/blockly/media/skins/studio/background_rainbow.png"': rainbow + '"https://studio.code.org/blockly/media/skins/studio/background_scifi.png"': sci-fi '"https://studio.code.org//api/v1/animation-library/WJjQlG1rFhbVmPfcuI_wy6tpwI6mHYnM/category_backgrounds/soccer_field.png"': soccer field '"https://studio.code.org/api/v1/animation-library/Thvd6E7yU59nfop.zZKGWKoR8VLZDTq./category_backgrounds/stage.png"': stage + '"https://studio.code.org/blockly/media/skins/studio/background_santa.png"': stars '"https://studio.code.org/api/v1/animation-library/RblQqWAuW0EkLfYuRVK4LRc0uY_76fvi/category_backgrounds/subway.png"': subway '"https://studio.code.org/api/v1/animation-library/ZY0THG5IedwCgmWVIhiPdJH59OORnmgT/category_backgrounds/sun_and_rainbow.png"': sun and rainbow '"https://studio.code.org/api/v1/animation-library/_aXeLwM1Ge.ZDVJoON.cAlR3iwhKJJvl/category_backgrounds/sunshine_showers.png"': sunshine showers '"https://studio.code.org/api/v1/animation-library/.51KpEhDOyXg4dbDaAnm0dEWLAj1GZwy/category_backgrounds/tennis_court.png"': tennis court '"https://studio.code.org/api/v1/animation-library/yatDsUkvGtT_.fSv68qi1d4YJDMHdGnS/category_backgrounds/tree_island.png"': tree island '"https://studio.code.org/api/v1/animation-library/INSgmsgsLuIk1Aqp7g72h9nLFez.NX0p/category_backgrounds/underground.png"': underground + '"https://studio.code.org/blockly/media/skins/studio/background_underwater.png"': underwater + '"https://studio.code.org/blockly/media/skins/studio/background_winter.png"': winter undefined: none gamelab_setDirection: text: set {SPRITE} movement direction {DIRECTION} @@ -1054,6 +1068,12 @@ en: CONDITION: '"when"': when '"while"': while + gamelab_spriteClickedSet: + text: "{CONDITION} {SPRITE} clicked set {CLICK}" + options: + CONDITION: + '"when"': when + '"while"': while gamelab_spriteCostume: text: "{COSTUME}" gamelab_spriteDirection: @@ -1096,6 +1116,8 @@ en: text: last {VALUE} gamelab_spritesWhereRandom: text: random in group {VALUE} + gamelab_subjectSprite: + text: subject sprite gamelab_thisBeginsBehaviorSimple: text: sprite {SPRITE} begins {BEHAVIOR} options: @@ -1146,6 +1168,12 @@ en: text: when {SPRITE1} touches {SPRITE2} gamelab_whenTouchingAny: text: when {SPRITE} touches any {GROUP} + gamelab_whenTouchingSet: + text: "{CONDITION} {SPRITE1} touches {SPRITE2} set {SPRITEA} and set {SPRITEB}" + options: + CONDITION: + '"when"': when + '"while"': while gamelab_whenTrue: text: when {CONDITION} true gamelab_whenUpArrow: diff --git a/dashboard/config/locales/callouts.en.yml b/dashboard/config/locales/callouts.en.yml index afa008f260f81..9f10e7fcd9e2d 100644 --- a/dashboard/config/locales/callouts.en.yml +++ b/dashboard/config/locales/callouts.en.yml @@ -1073,6 +1073,7 @@ en: Underground Iron_2019_callout: craft_what_is_iron: Mine this iron! Virtual Pet 2_2019_callout: {} + Virtual Pet Template_2019_callout: {} WebLab PS test - 1-12_callout: version_history_button: Check out version history WhileAdventure_callout: @@ -1105,6 +1106,7 @@ en: behaviors 3a_callout: behavior_callout: Why isn't this behavior working for the middle star? star2_callout: Remove this costume block and use the "this sprite" block instead. + this_sprite_callout: Testing behaviors 4_callout: behaviors_edit: Click here to see how this behavior works. behaviors 4a_callout: @@ -1191,8 +1193,7 @@ en: courseA_collector_preLoops6_callout: courseA_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. courseA_forVideoTest_artist_callout: {} - courseA_maze_ramp2_2018_callout: - courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. + courseA_maze_ramp2_2018_callout: {} courseA_maze_ramp2_2019_callout: courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. courseA_maze_ramp2a_2018_callout: @@ -1200,7 +1201,8 @@ en: courseA_maze_ramp3_2018_callout: courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. stone_block_2: Grey blocks are made of stone and cannot be thrown away. - courseA_maze_ramp3a_2018_callout: {} + courseA_maze_ramp3a_2018_callout: + courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. courseA_maze_ramp3a_2019_callout: {} courseA_maze_ramp3b_2018_callout: {} courseA_maze_ramp3b_2019_callout: {} @@ -1258,7 +1260,8 @@ en: courseB_Scrat_ramp2_2018_callout: {} courseB_Scrat_ramp2_2019_callout: {} courseB_Scrat_ramp3a_2018_callout: {} - courseB_Scrat_ramp3a_2019_callout: {} + courseB_Scrat_ramp3a_2019_callout: + courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. courseB_Scrat_ramp3b_2018_callout: {} courseB_Scrat_ramp3b_2019_callout: {} courseB_Scrat_ramp4a_2018_callout: {} @@ -1615,6 +1618,7 @@ en: courseE_aboutme_4_callout: {} courseE_aboutme_5_callout: {} courseE_aboutme_7_callout: {} + courseE_aboutme_template_callout: {} courseE_artist_concept_challenge2_callout: {} courseE_artist_concept_challenge2_2018_callout: {} courseE_artist_concept_challenge2_2019_callout: {} diff --git a/dashboard/config/locales/display_name.en.yml b/dashboard/config/locales/display_name.en.yml index 488df8a0b63f4..416ba0919a398 100644 --- a/dashboard/config/locales/display_name.en.yml +++ b/dashboard/config/locales/display_name.en.yml @@ -1157,6 +1157,7 @@ en: U5-AP-Algorithm-Does-It-Count_2018: AP Practice Response - Score the Response U5-AP-Algorithm-Does-It-Count_2019: AP Practice Response - Score the Response U7 L01 More with Functions: 'Conditionals: Boolean Expressions' + U7 L05 Exit Ticket: Check Your Understanding Using Accelerometer Events_2018: Using Accelerometer Events Using Accelerometer Events_2019: Using Accelerometer Events 'Video: Intro to CSS Part 2_2018': 'Video: Intro to CSS Part 2' diff --git a/dashboard/config/locales/long_instructions.en.yml b/dashboard/config/locales/long_instructions.en.yml index f5fec47780077..8c6b0bad54e84 100644 --- a/dashboard/config/locales/long_instructions.en.yml +++ b/dashboard/config/locales/long_instructions.en.yml @@ -3,6 +3,7 @@ en: data: long_instructions: "'pre-assessment survey q25A'": "If yes, what computer science course(s) had you taken before your current computer science class? \n" + "(joshl) Dance Party 1-validated_2019": "**Make a prediction:** Here’s a sprite that looks like a blue alien! \n\nWhat do you think will happen when you click on it? " 2-3 Artist 1 new: "Hi, I'm an artist. You can write code to make me draw almost anything. Use a few blocks to make me draw over the grey lines in the picture. (Each line is 100 pixels long)\n\n" 2-3 Artist 11: 'Give the stop sign a border by making an octagon with 100 pixels sides. ' 2-3 Artist 12: "Create a circle to finish the eyeball! \n\nIf the artist turns 1 degree with each loop, how many times do you need to repeat the code to draw a circle? " @@ -277,8 +278,8 @@ en: Alien Defender_2018: "**Project Idea**: Make a defender game in Play Lab!" AllTheThings Applab - Turtle move with button: "# Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and would be annoying to do for the allthethings script).\n # Your First Interactive App!\n A new group of commands has been added to the toolbox called **UI Controls** (User Interface Controls) which are commands that let you interact with, and respond to, the user of your app. To keep it simple, we'll start with just two commands: \n* `onEvent` which let's you run a function in response to some event occuring (such as a button click)\n* `button` which puts a button on the screen\n\n# Do This\nYou will replicate the small app, shown below, which makes the turtle move with a button click. You will do three things:\n* Add a `button`\n* Add an `onEvent` block\n* Add `moveForward` inside the the onEvent function block\n\nHere's what you should do - you can come back to watch this as many times as you need to get it right.\n" AllTheThings Applab DesignModeDefault: "\n\n## You try it -- Text Password Checker\n\n**Key idea**: You can use `==` to compare strings as well as numbers. \n\n* Let's use an if-statement in an event handler to compare text that a user inputs in a UI element.\n\n**The setup:**\n* Note the setup in Design Mode\n* There are two images: a red lock, and a green \"unlock\".\n* The green \"unlock\" is *hidden* at the start.\n\n## Do this:\n\n**Add an if-statement to the event handler to check the password and display the \"unlock\" only if the password is correct** \n\n* You can use `==` to compare the text you get from the *password_input* text box and a string you want to use as the password. The boolean expression you should use should look like this:\n\n![](https://images.code.org/9124274f38ed19bdae6cfc4b492162b6-image-1479828796051.png)\n\n* If the user entered the correct password then **show** the green \"unlock\" and **hide** the red lock.\n\t* We've provide the code to hide and show the images. You just need to add the if-statement.\n* Otherwise do nothing. They can try again.\n\n" - 'AllTheThings: Pixelation - Lesson 14 - Make the Letter A': "\n # Task 1: Make a 3x5 letter 'A'\n Start by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n \n The image is intially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A.\n " - 'AllTheThings: Pixelation - Lesson 15 - Color Shades 4x4': "# Pixelation: Task 3\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using *12-bits per pixel*. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n * Row 1 - fill with shades of red. \n * Row 2 - shades of green. \n * Row 3 - shades of blue. \n * Row 4 - shades of gray.\n" + 'AllTheThings: Pixelation - Lesson 14 - Make the Letter A': "\n # Task 1: Make a 3x5 letter 'A'\n Start by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n \n The image is intially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A.\n " + 'AllTheThings: Pixelation - Lesson 15 - Color Shades 4x4': "# Pixelation: Task 3\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using *12-bits per pixel*. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n * Row 1 - fill with shades of red. \n * Row 2 - shades of green. \n * Row 3 - shades of blue. \n * Row 4 - shades of gray.\n" 'AllTheThings: Pixelation - Lesson 15 - Complete 3-bit color': "# Color Pixelation: Task 1\n**Directions:**\n\n* We start you with the 4x2 image Maddie was creating, but we've left out the last two squares. \n* Finish off the image by figuring out which two colors are missing and encode them.\n" App Lab test: Innovation Project AppLab Intro 1 - Add Button: "# Getting Started - Add a button\n\nYou'll need a button on your home screen to go to your new screen. You can make a new button in two ways. \n\n1. If you like the style of the \"Dogs\" button you can make a copy of it. Click the button and then click \"Duplicate\".\n\n\t![](https://images.code.org/171aa97d90014f66f999ecf929b672c0-image-1504289310310.08.10 AM.png)\n\n2. You can also make a new button from scratch by dragging it in from the Design Toolbox.\n\n\t![](https://images.code.org/501c9ddd3e5b737df5b9cf053ae198a7-image-1504289359851.09.09 AM.png)\n\n3. Click and drag to move your new button where you want it.\n\n3. Once you have a new button give it a clear name, \"catButton\". You can also change its text to read \"Cats!\".\n\n\t![](https://images.code.org/87586b18b001fae0001d2243f6d09889-image-1504289448320.10.14 AM.png)\n \n4. There's lots of other ways you can change the look of your button. Experiment with the full menu of options.\n\n5. Once you're done run your app to make sure your button appears. Then click \"Finish\" to move on to learn how to make your button actually work." @@ -757,9 +758,9 @@ en: **Stuck? Click here:** ![expandable](https://images.code.org/64dfec0d9f9c2fc237abb90ef6a72f0e-image-1508384166252.gif) AppLab_test02: "# This is the title \n\n- bullet 1 \n- do this\n- then this\n\n![](https://images.code.org/982f9167cf54c24251922fbd0a7f60b3-image-1436470853351.png)" - Applab AllTheThings ResourcesTab AllResources: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." - Applab AllTheThings ResourcesTab MapReference: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." - Applab AllTheThings ResourcesTab ReferenceLinks: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + Applab AllTheThings ResourcesTab AllResources: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + Applab AllTheThings ResourcesTab MapReference: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + Applab AllTheThings ResourcesTab ReferenceLinks: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." Applab allthethings onRecordEvent: Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and would be annoying to do for the allthethings script). Applab test: This level is submittable. For testing only! Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and would be annoying to do for the allthethings script). Artist Autorun Test: Now, put the function inside of a loop to draw these three squares. @@ -1774,15 +1775,15 @@ en: * Fix the broken code so that the web page displays correctly * Compare the problems you fixed with a neighbor CSD U2 Header Demo: "# Headers\n\n
\n
\n\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headers?**\n\n\nHeaders come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest header. The smallest header is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nSo far, you've organized your content into paragraphs. Another way HTML allows you to organize your code is by using **headers**. A header is a short piece of text that goes at the top of a section of content, like a title.\n\nDo This:\n* Find the headers in the web page below and use the inspector tool to see that code that makes them.\n* Make sure you and your partner agree on what the tags do.\n* Change the code so that \"Drawing\" and \"2 years\" match the headers on the rest of the page." - CSD U2 Header Sizes: "# Header Sizes\n\n
\n
\n\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headers?**\n\n\nHeaders come in 6 different sizes. The most common header is <h1> The number 1 in the HTML tag designates that this is the biggest header. The smallest header is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nHeaders can come in different sizes. In this page, there are six different sized headers, but they are all mixed up. Can you and your partner figure out how to fix them?\n\n\n\nDo This:\n* Use the inspector tool to figure out what makes the headers different sizes\n* Make sure you and your partner agree on what the different header tags do.\n* Change the tags so that the headers are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n\n" + CSD U2 Header Sizes: "# Header Sizes\n\n
\n
\n\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headers?**\n\n\nHeaders come in 6 different sizes. The most common header is <h1> The number 1 in the HTML tag designates that this is the biggest header. The smallest header is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nHeaders can come in different sizes. In this page, there are six different sized headers, but they are all mixed up. Can you and your partner figure out how to fix them?\n\n\n\nDo This:\n* Use the inspector tool to figure out what makes the headers different sizes\n* Make sure you and your partner agree on what the different header tags do.\n* Change the tags so that the headers are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n\n" CSD U2 Header Test: "# Headers and Paragraphs\n\n
\n
\n\n\n\n**What is a paragraph element?**\n\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headers or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.\n
\n
\n\n\n**How do I create multiple paragraphs?**\n\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `

` tags. For example\n

\n\t<p>\n    \tThis is a paragraph.\n    </p>\n\t<p>\n    \tThis is another paragraph.\n    </p>\n
\n
\n
\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headers?**\n\n\nHeaders come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest header. The smallest header is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nThe author of this page added in a lot of content, but did not think about structure. All of the text is mashed together.\n\nDo This:\n* Look through the content with your partner and decide what you think the best structure should be.\n* Use your header and paragraph tags to code the structure into the page.\n" CSD U2 Headers: "
\n
\n\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I create a header?**\n\n\nYou can make something a header element by surrounding it by header tags. For example:\n
 <h1> Header Text </h1>


\n\nNotice how there is a the opening tag (<h1>) and closing tag (</h1>). The closing tag is the same as the opening tag except it has `/` after the opening angle bracket. The text you want to show as the header goes in the middle of the two tags.\n
\n
\n\n\n**What is HTML?**\n\n\nStands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nA piece of a website. Marked by a start tag and sometimes closed with an end tag. Also includes the content of the element as well. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\nThe special set of characters that tells the machine where the start or end of an HTML element is and what type it is. HTML tags add structure to the content of a web page.\n
\n
\n\n\n**Why do you need an opening and closing tag?**\n\n\n\nYou need both an opening and closing tag for many HTML elements because it marks where that structure starts and stops. You don't want all the text on your web page to be a title.\n\n\n
\n
\n\n# Headers\n\nYou may have noticed on the last level that everything you type into the editor is getting smashed together. In order to differentiate between these different parts we use HTML elements to mark the different parts of a web page. In your investigation with the inspector did you come across something that made headers?\n\n# Do This\n\n* Make your header \"Animals\" stand out using the `

` header element." CSD U2 Heading Demo: "# Headings\n\n
\n
\n\nWhat are headings?\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one: <h1>. The number '1' in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags, which get smaller as the number gets larger.\n

\n\n
\nWhat is HTML?\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nSo far, you've organized your content into paragraphs. Another way HTML allows you to organize your code is by using **headings**. A heading is a short piece of text that goes at the top of a section of content, like a title.\n\nDo This:\n* Find the headings in the web page below and use the Inspector Tool to see the code that makes them.\n* Make sure you and your partner agree on what the tags do.\n* Change the code so that \"Drawing\" and \"2 years\" match the headings on the rest of the page." CSD U2 Heading Demo_2018: "# Headings\n\n
\n
\n\n\n\n**What are headings?**\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headings?**\n\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one: <h1>. The number '1' in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags, which get smaller as the number gets larger.\n\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nSo far, you've organized your content into paragraphs. Another way HTML allows you to organize your code is by using **headings**. A heading is a short piece of text that goes at the top of a section of content, like a title.\n\nDo This:\n* Find the headings in the web page below and use the Inspector Tool to see the code that makes them.\n* Make sure you and your partner agree on what the tags do.\n* Change the code so that \"Drawing\" and \"2 years\" match the headings on the rest of the page." CSD U2 Heading Demo_2019: "# Headings\n\n
\n
\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one: <h1>. The number '1' in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags, which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nSo far, you've organized your content into paragraphs. Another way HTML allows you to organize your code is by using **headings**. A heading is a short piece of text that goes at the top of a section of content, like a title.\n\n# Do This:\n\n* Find the headings in the web page below and use the Inspector Tool to see the code that makes them.\n* Make sure you and your partner agree on what the tags do.\n* Change the code so that \"Drawing\" and \"2 years\" match the headings on the rest of the page." - CSD U2 Heading Sizes: "# Heading Sizes\n\n
\n
\n\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\n\n\nDo This:\n* Use the inspector tool to figure out what makes the headings different sizes\n* Make sure you and your partner agree on what the different heading tags do.\n* Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n\n" - CSD U2 Heading Sizes_2018: "# Heading Sizes\n\n
\n
\n\n\n\n**What are headings?**\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headings?**\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\n\n\nDo This:\n* Use the inspector tool to figure out what makes the headings different sizes\n* Make sure you and your partner agree on what the different heading tags do.\n* Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n\n" - CSD U2 Heading Sizes_2019: "# Heading Sizes\n\n
\n
\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\n\n\nDo This:\n* Use the inspector tool to figure out what makes the headings different sizes\n* Make sure you and your partner agree on what the different heading tags do.\n* Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n\n" + CSD U2 Heading Sizes: "# Heading Sizes\n\n
\n
\n\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\n\n\nDo This:\n* Use the inspector tool to figure out what makes the headings different sizes\n* Make sure you and your partner agree on what the different heading tags do.\n* Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n\n" + CSD U2 Heading Sizes_2018: "# Heading Sizes\n\n
\n
\n\n\n\n**What are headings?**\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headings?**\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\n\n\nDo This:\n* Use the inspector tool to figure out what makes the headings different sizes\n* Make sure you and your partner agree on what the different heading tags do.\n* Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n\n" + CSD U2 Heading Sizes_2019: "# Heading Sizes\n\n
\n
\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\n\n\nDo This:\n* Use the inspector tool to figure out what makes the headings different sizes\n* Make sure you and your partner agree on what the different heading tags do.\n* Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n\n" CSD U2 Heading Test: "# Headings and Paragraphs\n\n
\n
\n\nWhat is a paragraph element?\n\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headings or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.\n\n
\n
\nHow do I create multiple paragraphs?\n\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `

` tags. For example\n\n

\n<p>\n  This is a paragraph.\n</p>\n<p>\n  This is another paragraph.\n</p>\n
\n\n
\n
\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n\n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example:\n\n\n\n
\n
\nWhat is an HTML tag?\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nThe author of this page added in a lot of content, but did not think about structure. All of the text is mashed together.\n\nDo This:\n* Look through the content with your partner and decide what you think the best structure should be.\n* Use your heading and paragraph tags to code the structure into the page.\n" CSD U2 Heading Test_2018: "# Headings and Paragraphs\n\n
\n
\n\nWhat is a paragraph element?\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headings or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.\n\n
\n
\n\nHow do I create multiple paragraphs?\n\n\n\nParagraphs are marked by opening (`

`) and closing (`

`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `

` tags. For example\n\n

\n    <p>\n        This is a paragraph.\n    </p>\n    <p>\n        This is another paragraph.\n    </p>\n
\n\n
\n
\n\nWhat are headings?\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\nHow do I make different sized headings?\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\nWhat is HTML?\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\nWhat is an HTML element?\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\nWhat is an HTML tag?\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nThe author of this page added in a lot of content, but did not think about structure. All of the text is mashed together.\n\nDo This:\n* Look through the content with your partner and decide what you think the best structure should be.\n* Use your heading and paragraph tags to code the structure into the page.\n" CSD U2 Heading Test_2019: "# Headings and Paragraphs\n\n
\n
\n\nWhat is a paragraph element?\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headings or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.\n\n
\n
\n\nHow do I create multiple paragraphs?\n\n\n\nParagraphs are marked by opening (`

`) and closing (`

`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `

` tags. For example\n\n

\n    <p>\n        This is a paragraph.\n    </p>\n    <p>\n        This is another paragraph.\n    </p>\n
\n\n
\n
\n\nWhat are headings?\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\nHow do I make different sized headings?\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\nWhat is HTML?\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\nWhat is an HTML element?\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\nWhat is an HTML tag?\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n\n
\n
\n\nThe author of this page added in a lot of content, but did not think about structure. All of the text is mashed together.\n\nDo This:\n* Look through the content with your partner and decide what you think the best structure should be.\n* Use your heading and paragraph tags to code the structure into the page.\n" @@ -11338,8 +11339,8 @@ en: [//]: #(https://images.code.org/63b04e63fc4bc21700b64ef3d6c6b8b7-image-1471475653020.png) CSD U3 abstraction decelerateX: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n* Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n* Discuss with your Partner: What do you think will happen when the car finally stops?\n\n*Challenge: Add code that makes the car slow down only if his velocityX is greater than 0.*" - CSD U3 abstraction decelerateX_2018: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n* Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n* Discuss with your Partner: What do you think will happen when the car finally stops?\n\n*Challenge: Add code that makes the car slow down only if his velocityX is greater than 0.*" - CSD U3 abstraction decelerateX_2019: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n* Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n* Discuss with your Partner: What do you think will happen when the car finally stops?\n\n*Challenge: Add code that makes the car slow down only if his velocityX is greater than 0.*" + CSD U3 abstraction decelerateX_2018: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n* Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n* Discuss with your Partner: What do you think will happen when the car finally stops?\n\n*Challenge: Add code that makes the car slow down only if its velocityX is greater than 0.*" + CSD U3 abstraction decelerateX_2019: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n* Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n* Discuss with your Partner: What do you think will happen when the car finally stops?\n\n*Challenge: Add code that makes the car slow down only if its velocityX is greater than 0.*" CSD U3 abstraction decelerateY: |- # Simulating Gravity @@ -15530,23 +15531,17 @@ en: CSD U6 analog data_2018: |- # Data Event - Each of these analog sensors emits a special event called "data" which occurs every time new data comes in from the sensor. Using this event, we can write programs that continually update. + Each of these analog sensors emits a special event called "data" which occurs every time new data comes in from the sensor. Using this event, you can rewrite the first program you worked on in this lesson so that it continually updates. # Do This - - This is the first program you worked on in this lesson, let's see if we can make it continually update the sound reading using the "data" event. - * Create an event handler to respond to sound sensor's "data" event * Move the existing code into your event handler CSD U6 analog data_2019: |- # Data Event - Each of these analog sensors emits a special event called "data" which occurs every time new data comes in from the sensor. Using this event, we can write programs that continually update. + Each of these analog sensors emits a special event called "data" which occurs every time new data comes in from the sensor. Using this event, you can rewrite the first program you worked on in this lesson so that it continually updates. # Do This - - This is the first program you worked on in this lesson, let's see if we can make it continually update the sound reading using the "data" event. - * Create an event handler to respond to sound sensor's "data" event * Move the existing code into your event handler CSD U6 analog light: |- @@ -24897,7 +24892,7 @@ en: # Do This: * Add a variable that **counts the number of heads (1's)** and write its value to the screen after each flip. - * Run your program severals times **and validate that the number of heads recorded is correct** by visually checking the flips you've printed to the screen. + * Run your program several times **and validate that the number of heads recorded is correct** by visually checking the flips you've printed to the screen. * **Hint:** you will also need to store your current coin flip in a variable to complete this challenge. ![](https://images.code.org/0d99569cd223c63e2166d610d09fd525-image-1446859813702.gif) @@ -24909,7 +24904,7 @@ en: # Do This: * Add a variable that **counts the number of heads (1's)** and write its value to the screen after each flip. - * Run your program severals times **and validate that the number of heads recorded is correct** by visually checking the flips you've printed to the screen. + * Run your program several times **and validate that the number of heads recorded is correct** by visually checking the flips you've printed to the screen. * **Hint:** you will also need to store your current coin flip in a variable to complete this challenge. ![](https://images.code.org/0d99569cd223c63e2166d610d09fd525-image-1446859813702.gif) @@ -27408,7 +27403,7 @@ en: "blue alien" - to a different one that will make the alien start spinning around! + to a different one that will make the alien start spinning! Dance Party 2_simple: "The alien can only move left and right.\n\nChange the behavior inside the \n \n \n alien1\n \n \n block to make the alien start turning. " Dance Party 3 - Validated: "Create a new sprite called `alien2`. \n\nMake it do a different dance move when it's clicked. " Dance Party 3: "Create a new sprite called `alien2`. \n\nMake it do a different dance move when it's clicked. " @@ -27422,21 +27417,21 @@ en: When the new sprite is clicked, it should do something. Dance Party 4 Validated: "Create a third sprite called `alien3`. \n\nCan you set all of your aliens to stand in a straight line? It's an alien dance crew!" Dance Party 4: "Create a third sprite called `alien3`. \n\nCan you set all of your aliens to stand in a straight line? It's an alien dance crew!" - Dance Party 4_2019: |- - Create a third sprite that looks like a yellow alien. - - Can you set all of your aliens to stand in a straight line? It's an alien dance crew! + Dance Party 4_2019: "Form an alien dance crew! \n\n* Create a third sprite that looks like a yellow alien, and make it begin a new dance when clicked.\n* Set all of your aliens to stand in a horizontal line, like this:\n\n![](https://images.code.org/09380fc01069e79d9d33a979379a666b-image-1555960752137.png)" Dance Party 4_simple: "Create a third sprite called `alien3`. \n\nPlace all of your aliens in a straight line. It's an alien dance party!" Dance Party 5 - Validated: "We can change all kinds of things in this program when you click on the sprites. Let’s change their color! \n\n**Add code to change the color of each alien when it gets clicked.**" Dance Party 5: "We can change all kinds of things in this program when you click on the sprites. Let’s change their color! \n\n**Add code to change the color of each alien when it gets clicked.**" - Dance Party 5_2019: "We can change all kinds of things in this program when you click on the sprites. Let’s change their color! \n\n**Add code to change the color of each alien when it gets clicked.**" + Dance Party 5_2019: We can change all kinds of things in this program when you click on the sprites. Add code to change the color of each alien when it gets clicked. Dance Party 5_simple: |- You can change many things in this program. Add code to change the color of each alien when it gets clicked. Dance Party 6 - Validated: "These aliens are running wild! \n\nUse the \n \n block to make each alien stop moving when it is clicked." Dance Party 6: "These aliens are running wild! \n\nUse the \n \n block to make each alien stop moving when it is clicked." - Dance Party 6_2019: "These aliens are running wild! \n\nUse the \"blue alien\"block to make each alien stop moving when it is clicked." + Dance Party 6_2019: |- + These aliens are running wild! + + Use "blue alien" to make each alien stop moving when it is clicked. Dance Party 6_simple: "These aliens are too busy! \n\nUse the \n \n block to make each alien stop moving when it is clicked." Dance Party 7 - Validated: "Finally, add a new bell sprite called `myBell`. \n\nWhen you click on it, make all the aliens start doing the same dance move!" Dance Party 7: "Finally, add a new bell sprite called `myBell`. \n\nWhen you click on it, make all the aliens start doing the same dance move!" @@ -27460,6 +27455,18 @@ en: Dance Party Predict: "**Make a prediction:** Here’s a sprite called `alien1`! \n\nWhat do you think will happen when you click on it? " Dance Party Predict_2019: "**Make a prediction:** Here’s a sprite that looks like a blue alien! \n\nWhat do you think will happen when you click on it? " Dance Party Predict_simple: "**What do you think?** \n\nHere’s a sprite called `alien1`! \n\nWhen you click on it, what will it do? " + Dance Party Template 1_2019: |- + The alien was proud of its dancing skills on Mars, but now it can only move side-to-side. + + Replace the behavior block in + + + + "blue alien" + + + to a different one that will make the alien start spinning around! + Dance Party Template 2_2019: Template Dance_Events_Example_Video: Use events to make your dance party interactive! Dance_Party_01: |- *Let's have a dance party!* @@ -27880,7 +27887,7 @@ en: Fish Tank 1-validated_simple: "**What do you think?**: When you run this code, what will it do?" Fish Tank 1: "**Make a prediction**: What do you think will happen when you run this code?" Fish Tank 2-validated: "Let's make a fish tank! \n\nChange Dusty (the tumbleweed) to a fish." - Fish Tank 2-validated_2019: "Let's make a fish tank! \n\nChange Dusty (the tumbleweed) to a fish." + Fish Tank 2-validated_2019: "Let's make a fish tank! \n\nChange the tumbleweed sprite into any kind of fish by clicking \"tumbleweed\".\n\nBe sure to also update this sprite's costume in ." Fish Tank 2-validated_simple: Change Petal (the flower) to a fish. Fish Tank 2: We're going to make a fish tank. Change the Dusty the tumbleweed to a fish. Fish Tank 3-validated Ram: "The fish is getting dizzy! \n\nChange the fish's behavior so that it swims around the tank." @@ -29020,30 +29027,30 @@ en: # Pixelation: AllTheThings 5 This pixelation level demonstrates the use of the "Hide sliders" option. Notice that the width and height sliders are not available, and the width and height fields are not editable. Pixelation - Lesson 14 - Fix bit offset v.2: 'Something happened to the bits in this image! Find the error and fix it! Hint: a few extra bits were added. You should only need to remove some bits.' - Pixelation - Lesson 14 - Fix bit offset: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. \n" - Pixelation - Lesson 14 - Fix bit offset_2018: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. \n" - Pixelation - Lesson 14 - Fix bit offset_2019: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. \n" + Pixelation - Lesson 14 - Fix bit offset: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. \n" + Pixelation - Lesson 14 - Fix bit offset_2018: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. \n" + Pixelation - Lesson 14 - Fix bit offset_2019: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. \n" Pixelation - Lesson 14 - Fix the error: 'Something happened to the bits in this image! Find error and fix it! Hint: a few extra bits were added. You should only need to remove some bits.' - Pixelation - Lesson 14 - Make the Letter A: "\n\n# Task 1: Make a 3x5 letter 'A'\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." - Pixelation - Lesson 14 - Make the Letter A_2018: "\n\n# Task 1: Make a 3x5 letter 'A'\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." - Pixelation - Lesson 14 - Make the Letter A_2019: "\n\n# Task 1: Make a 3x5 letter 'A'\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." + Pixelation - Lesson 14 - Make the Letter A: "\n\n# Task 1: Make a 3x5 letter 'A'\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." + Pixelation - Lesson 14 - Make the Letter A_2018: "\n\n# Task 1: Make a 3x5 letter 'A'\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." + Pixelation - Lesson 14 - Make the Letter A_2019: "\n\n# Task 1: Make a 3x5 letter 'A'\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." Pixelation - Lesson 14 - Make your own B and W Image: "# Make your own image of any size\n\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\n\n\n**Directions:**\n\n* Encode an image of anything you like.\n* You might want to do some planning and sketching with graph paper first.\n* DO NOT simply make an abstract pattern, like a checkerboard. \n* Depict something, perhaps your name written out, your initials, an icon or logo of some sort.\n* Get creative! The image doesn't have to be a perfect square, it can be long and skinny.\n* Optional: for fun, send your image bits to a friend using the sending bits widget. *(note: this is just a link to the sending formatted text level from a couple of classes ago)*\n\n\n" - Pixelation - Lesson 15 - Color Free Play: "# Personal Favicon\n**Requirements:**\n\n\n* The icon must be 16x16 pixels. \n* You must use the Pixelation Widget to encode the bits of color information.\n* The image must be encoded with at least 12 bits per pixel.\n\n" - Pixelation - Lesson 15 - Color Shades 4x4: "# Pixelation: Task 3\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using *12-bits per pixel*. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n * Row 1 - fill with shades of red. \n * Row 2 - shades of green. \n * Row 3 - shades of blue. \n * Row 4 - shades of gray.\n" - Pixelation - Lesson 15 - Color Shades 4x4_2018: "# Pixelation: Task 3\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using *12-bits per pixel*. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n * Row 1 - fill with shades of red. \n * Row 2 - shades of green. \n * Row 3 - shades of blue. \n * Row 4 - shades of gray.\n" - Pixelation - Lesson 15 - Color Shades 4x4_2019: "# Pixelation: Task 3\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using *12-bits per pixel*. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n * Row 1 - fill with shades of red. \n * Row 2 - shades of green. \n * Row 3 - shades of blue. \n * Row 4 - shades of gray.\n" + Pixelation - Lesson 15 - Color Free Play: "# Personal Favicon\n**Requirements:**\n\n\n* The icon must be 16x16 pixels. \n* You must use the Pixelation Widget to encode the bits of color information.\n* The image must be encoded with at least 12 bits per pixel.\n\n" + Pixelation - Lesson 15 - Color Shades 4x4: "# Pixelation: Task 3\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using *12-bits per pixel*. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n * Row 1 - fill with shades of red. \n * Row 2 - shades of green. \n * Row 3 - shades of blue. \n * Row 4 - shades of gray.\n" + Pixelation - Lesson 15 - Color Shades 4x4_2018: "# Pixelation: Task 3\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using *12-bits per pixel*. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n * Row 1 - fill with shades of red. \n * Row 2 - shades of green. \n * Row 3 - shades of blue. \n * Row 4 - shades of gray.\n" + Pixelation - Lesson 15 - Color Shades 4x4_2019: "# Pixelation: Task 3\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using *12-bits per pixel*. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n * Row 1 - fill with shades of red. \n * Row 2 - shades of green. \n * Row 3 - shades of blue. \n * Row 4 - shades of gray.\n" Pixelation - Lesson 15 - Color Shades: |- # Color Pixelation: Task 2 **Directions:** - We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! + We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! Pixelation - Lesson 15 - Color Shades_2018: |- # Color Pixelation: Task 2 **Directions:** - We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! + We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! Pixelation - Lesson 15 - Color Shades_2019: |- # Color Pixelation: Task 2 **Directions:** - We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! + We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! Pixelation - Lesson 15 - Complete 3-bit color: "# Color Pixelation: Task 1\n**Directions:**\n\n* We start you with the 4x2 image Maddie was creating, but we've left out the last two squares. \n* Finish off the image by figuring out which two colors are missing and encode them.\n" Pixelation - Lesson 15 - Complete 3-bit color_2018: "# Color Pixelation: Task 1\n**Directions:**\n\n* We start you with the 4x2 image Maddie was creating, but we've left out the last two squares. \n* Finish off the image by figuring out which two colors are missing and encode them.\n" Pixelation - Lesson 15 - Complete 3-bit color_2019: "# Color Pixelation: Task 1\n**Directions:**\n\n* We start you with the 4x2 image Maddie was creating, but we've left out the last two squares. \n* Finish off the image by figuring out which two colors are missing and encode them.\n" @@ -29077,7 +29084,7 @@ en: Play Lab Rocket 2: We've started the Design Recipe for `rocket-height` using the contract and examples you just wrote. Complete the function definition for `rocket-height` and run your animation. Play Lab Rocket 3: Awesome, now can you update that function so that our rocket moves more quickly? Make sure to update the purpose statement, examples, and function definition to launch a rocket at 40 meters per second. Play Lab Rocket Free Play: 'Free Play: Experiment with your `rocket-height` function to make the rocket fly in different ways. Click "Finish" when you are done.' - Poorva copy U3L2 Using Simple Commands: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + Poorva copy U3L2 Using Simple Commands: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." Poorva-test: "# Header 1\n## Header 2\n### Header 3\n#### Header 4\n##### Header 5\n\nThis is regular text, **bolded text** and *italicized text*. " Practice Create Performance Task: "# Practice Create Performance Task\n\nYou've finally made it to the end of the Building Apps Unit! We will continue some programming in the next unit, but for now we are going to use all the new concepts you have learn to create something of your own design! \n\n# Do This:\n\n* **Read the Project Overview** to understand the entire project.\n* **Follow the Project Planning Guide**.\n* **Implement your final program in this level**." Practice Create Performance Task_2018: |- @@ -29297,13 +29304,13 @@ en: NOTE: your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions. ![](https://images.code.org/fd6e8b4d2218a242bae19ac9c78b5d5f-image-1447799438050.gif) - SG U3L03 - draw step: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n* Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n* If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n* We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n* First let's **define** a function that *draws just one of these zig-zag steps.* We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** and call a function named `drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n\nYou'll use four subgoals for this. First, you'll **define a function** (`//Define function`), which will include **moving the turtle** (`//Move turtle`) and **orienting the turtle** (`//Orient turtle`). Last, don't forget to **call the function** (`//Call function`). If you get stuck, plan your solution with subgoals.\n\n![](https://images.code.org/4fa605353695afa0cd01ec01a1e2c709-image-1441772033658.gif)" + SG U3L03 - draw step: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n* Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n* If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n* We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n* First let's **define** a function that *draws just one of these zig-zag steps.* We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** and call a function named `drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n\nYou'll use four subgoals for this. First, you'll **define a function** (`//Define function`), which will include **moving the turtle** (`//Move turtle`) and **orienting the turtle** (`//Orient turtle`). Last, don't forget to **call the function** (`//Call function`). If you get stuck, plan your solution with subgoals.\n\n![](https://images.code.org/4fa605353695afa0cd01ec01a1e2c709-image-1441772033658.gif)" SG U3L03 Define and use turnAround: "# Do This:\n**Define** a function called `turnAround()` which turns the turtle around. Once you've defined the function **call** it to make sure it works as you expect and then move the turtle forward, as shown below. \n\n![](https://images.code.org/4c31307ec14cc6dfd65589f2a813120e-image-1447884881189.gif)\n\n**Remember** typically, you call a function in lines of code *above* the function definition - this might make you feel like you are working in reverse, since you first write the code to define the function and *then* add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\n\n![](https://images.code.org/3faf16575757ffae616dffd761085ab5-image-1467818996127.gif)\n\nYou'll use four subgoals to solve this problem (sort of). First you'll `//Define function`, which will include `//Orient turtle`. As you will start to see, even subgoals can be broken down into subgoals sometimes. This will be helpful when you start creating more complex functions. \n\nThen you'll `//Call function` and `//Move turtle`.\n\nDon't forget to name your functions." SG U3L03 Draw a T using turnAround: "# Do This:\nGet some more practice **calling** a function by using `turnAround()` along with your old friend the `moveForward()` function to create a plus sign that is centered at the turtle's first position, as shown below. Even though you just wrote this function, we've already **defined** `turnAround()` for you. \n\nRemember, add lines of code that call the function *above* the definition. The function definition is after the function call to support **abstraction**. If you don't need to know how the function works inside, you never have to look at it, you can just call it.\n\n*NOTE: the turtle should end where it started, which is also the middle of the plus sign, as shown below. Each of the four segments of the plus sign are one `moveForward()` long.* \n\n![](https://images.code.org/9d6c2d7d69c2f1c68c5b273bdbae65c7-image-1441296690812.11.14 AM.png)\n\n\nYou'll use three subgoals for this problem: `//call function`, `//orient turtle`, and `//move turtle`. Defining the function is already done for you. We've put subgoals for the first few steps in already. Plan the rest of the code with subgoal blocks (in the **Goals** tab) to get the most efficient path before filling it in with blocks." SG U3L03 Free Response Wrap Up: 'In your own words, explain at least one reason why programming languages have functions. Include an example of something you did in this lesson that demonstrates the reason you describe. ' - SG U3L03 Three Steps: "# Do This:\n\n\nWe are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond.\nIf you look at the whole image we are trying to draw, you'll notice that each of the 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange).\n\nRight now we'll write the code for one of those sides. So...\n\n**Define** a new function named `drawSide()` which makes three calls in a row to `drawStep()` followed by a `moveForward()` and a `right()`. \n\n**Replace** the original function call to `drawStep()` with a call to your newly defined `drawSide()` function. \n\nThe diagrams below show the intended actions.\n\n![](https://images.code.org/480f6787e4d2daf34d67642e25b29de6-image-1441772552026.png)\n![](https://images.code.org/02f52d406854d6f86535adf2f593ccc9-image-1441772709549.gif)\n\n\nTo solve this puzzle, you’ll use three subgoals. You’ll **Define the function** (`//Define function`), which will include **calling** 2 different functions (`//Call function`) and **moving the turtle** (`//Move turtle`). Then you'll **call the function** (`//Call function`) that you defined." + SG U3L03 Three Steps: "# Do This:\n\n\nWe are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond.\nIf you look at the whole image we are trying to draw, you'll notice that each of the 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange).\n\nRight now we'll write the code for one of those sides. So...\n\n**Define** a new function named `drawSide()` which makes three calls in a row to `drawStep()` followed by a `moveForward()` and a `right()`. \n\n**Replace** the original function call to `drawStep()` with a call to your newly defined `drawSide()` function. \n\nThe diagrams below show the intended actions.\n\n![](https://images.code.org/480f6787e4d2daf34d67642e25b29de6-image-1441772552026.png)\n![](https://images.code.org/02f52d406854d6f86535adf2f593ccc9-image-1441772709549.gif)\n\n\nTo solve this puzzle, you’ll use three subgoals. You’ll **Define the function** (`//Define function`), which will include **calling** 2 different functions (`//Call function`) and **moving the turtle** (`//Move turtle`). Then you'll **call the function** (`//Call function`) that you defined." SG U3L03 define turnRight and draw a rectangle: "# Draw a rectangle with right\n\nAs you know, in order to turn right we have to call `turnLeft()` three times. We've started you out with a stub that **defines** a function called `right()`. Start by adding code inside the function definition that will turn the turtle to the right (by turning left three times) when called. \n\nThen **use** this function in some code to draw a rectangle, as shown below. Make sure the turtle ends facing the same direction and in the same location it started. The rectangle below is 2 `moveForward`s tall and 1 `moveForward` wide.\n\n![](https://images.code.org/fd6e8b4d2218a242bae19ac9c78b5d5f-image-1447799438050.gif)\n\n**Note**: Your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions.\n\nYou'll use three subgoals to solve the problem: `//Orient turtle`, `//Move turtle`, and `//Call function`. `//Define function` is already done for you. Notice that we haven't filled the subgoals in for you (for the right function or drawing the rectangle). If you are having trouble finding the solution, plan your approach with subgoals before filling it in with blocks. If you're not having trouble, feel free to skip the subgoals." SG U3L03 draw diamond: "# Do This:\nWe're finally ready to make our diamond! **Define** a function named `function drawDiamond()` that **calls** `drawSide()` multiple times in order to complete the drawing. Your final solution should be triggered by **a single call** to `drawDiamond()`. \n\n\n\n\n\n\n
\n\n
\n\n**Notes**:\n\nIn the end you will have 4 functions defined:\n\n* drawDiamond()\n* drawSide()\n* drawStep()\n* right()\n\nThese 4 functions work sort of like a hierarchy of top-down design. At the top is `drawDiamond()` which makes calls to `drawSide()`, which makes calls to `drawStep()` and `right()`.\n\nFor most programming problems that you face, the problem won't be broken down into pieces like it was for this series of puzzles. You'll have to figure out your own hierarchy of functions based on which patterns you want to use multiple times. This is why planning your solution ahead of time can make your code more efficient. \n\nSubgoals will help you do this. Once you recognize that the diamond can be drawn using the same function repeated 4 times, you can note with a subgoal comment that you'll need to define and call a function for `drawSide()`. Then you can figure out that one side can be drawn using the same function 3 times plus a couple of steps, you can make note to define and call `drawStep()`. Once you've planned the solution, you can fill in blocks to complete it." SG U3L04 - 3 by 3 with functions: |- @@ -29615,8 +29622,8 @@ en: SG U3L08 Assessment2: "“Abstraction” is often used to focus on a general case and ignore a specific instance of a problem. \n\nGiven this meaning of the word, how are functions with parameters an example of abstraction?" SG U3L08 comments: "# Commenting code for yourself and for collaboration\n\nProgrammers write comments into their code for two main reasons: (1) sharing code with other programmers (2) remembering their own thoughts or plans for code they write. \n\nFor both cases a programmers **write comments into their code to explain their thinking to the reader.**\n\nThe subgoal comments you've seen are a specific type of commenting meant to help you learn. As you get more experience programming, comments you write can be in addition to, or simply replace your subgoal comments.\n\n
More: Why write comments?\n
\n

\nWhen sharing code with others, comments are useful to point out sections of code you might want help with, or to explain a complicated section of code that's hard to reason about. It's useful for example to write a comment like: //This function assumes that the fish have already been drawn because it helps the reader understand when, where, why that section of code might be executed.\n

\n

\n

\nWhen writing comments for yourself, it might be a note about how you plan to solve a problem, or jotting down the reason you did something to remind yourself later when you come back to it. For example you might write a comment like: //to do: make a function to handle this code below\n

\n

\n Many programmers, when starting from scratch, like to write out a high level plan for the code they want to write in comments, and then go in starting writing code to fill in the plan. This is particularly useful if you're facing a large problem that needs to be broken down into parts. You can think about the big picture to start and write out a strategy in comments so you don't forget it later -- which happens -- because once you start writing code you'll run into lots of micro-hurdles that might take time to solve or work out the bugs and you need your brain space to work on those. A plan for drawing an under the sea scene might look like this:\n

\n    // setup for drawing\n    // draw background with color and bubbles\n    // draw all the fish\n    // draw all the seagrass\n    // draw bubbles again\n
\n

\n
\n
\n\n# Do This\n\n**Add your own comments** to the code that you've been working on. Imagine that you are describing the purpose of the code to one of your classmates. Or find the most complicated part and try to explain it.\n\nThe way that you add comments is with the `// Comment` block, which is in the **Functions** tab of the toolbox.\n\n**See how:** ![expandable](https://images.code.org/fc29157949ee10369cb8a8db280b886f-image-1508515330684.gif)" SG U3L08 how to add comments: "# Now you try it - Add a comment\n\nThe starting code provided has some comments already in it.\n\n# Do This\n\nInsert a comment that says `// Draw a starfish at specific location` just above the section of code that will draw the starfish. \n\nThe way that you add comments is with the `// Comment` block, which is in the **Functions** tab of the toolbox ([Show me](#triggercallout=show_comment)).\n\n**See how:** ![expandable](https://images.code.org/fc29157949ee10369cb8a8db280b886f-image-1508515330684.gif)\n\n**Add more comments** to the code that explain what each section of code is for. Imagine that you are describing the purpose of the code to one of your classmates. Or find the most complicated part and try to explain it.\n\n**Click finish** once you've added the comment. And keep adding comments as you go!!!" - SG U3L2 Using Simple Commands part 1: "# Welcome to App Lab - Let's get started\n\n\nWe're going to start learning how to program with turtle commands. Given only 2 turtle commands, write code to complete the drawings in each of the following challenges. \n\n\n\n# Do This: \nAdd code to draw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the `Finish` button - it will appear after you run the program once.\n" - SG U3L2 Using Simple Commands: "# Now you try it!\n\nWe'll be learning how to code with subgoals throughout this unit.\n\nTypically, you'll solve problems by dragging blocks from the toolbox to the workspace. Sometimes we'll put subgoals that solve the problem into the workspace, and sometimes you'll have to identify the subgoals yourself.\n\nHere we've added a series of `// Move turtle` and `// Orient turtle` subgoals into the workspace that describe how to solve the 1x1 square problem...but it's incomplete.\n\n# Do This: \n\n* Complete the code for the the 1x1 square solution we've started below.\n* Drag each turtle block beneath the proper subgoal in the code. \n\n**Click here to see how** ![expandable](https://images.code.org/5818d0b6080e3a30dc081a166cfbffcb-image-1508437404576.gif)\n\n\n\n* Reminder: the turtle should end up in its original position, facing its original direction.\n\nOnce you think you have a solution, click the `Finish` button." + SG U3L2 Using Simple Commands part 1: "# Welcome to App Lab - Let's get started\n\n\nWe're going to start learning how to program with turtle commands. Given only 2 turtle commands, write code to complete the drawings in each of the following challenges. \n\n\n\n# Do This: \nAdd code to draw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the `Finish` button - it will appear after you run the program once.\n" + SG U3L2 Using Simple Commands: "# Now you try it!\n\nWe'll be learning how to code with subgoals throughout this unit.\n\nTypically, you'll solve problems by dragging blocks from the toolbox to the workspace. Sometimes we'll put subgoals that solve the problem into the workspace, and sometimes you'll have to identify the subgoals yourself.\n\nHere we've added a series of `// Move turtle` and `// Orient turtle` subgoals into the workspace that describe how to solve the 1x1 square problem...but it's incomplete.\n\n# Do This: \n\n* Complete the code for the the 1x1 square solution we've started below.\n* Drag each turtle block beneath the proper subgoal in the code. \n\n**Click here to see how** ![expandable](https://images.code.org/5818d0b6080e3a30dc081a166cfbffcb-image-1508437404576.gif)\n\n\n\n* Reminder: the turtle should end up in its original position, facing its original direction.\n\nOnce you think you have a solution, click the `Finish` button." SG U3L2_Add-subgoals: "# New challenge \n\nDraw a 3x3 grid to the *front* and *right* of the turtle *as efficiently* as possible.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on the situation. For this problem let's say that efficient means: **using the fewest turtle commands possible**\n\n# Do this\n\n1. This problem presents some subtle challenges. Before you start creating the program, you might want to test your ideas on paper for faster brainstorming. Work with your partner to discuss possible solutions or strategies. Try more than one.\n\n2. Once you have a solution, **start** by identifying the subgoals and drag them from the **Goals** tab into the workspace. \n\n3. Then start filling it in with turtle blocks, and **testing** it out as you go by adding a few commands, then running the program, adding a few more, run again, and so on.\n\nWhen you think you're done click `Finish` and move on.\n" SG U3L2_Turtle3by3Grid: |- # New challenge @@ -29636,7 +29643,7 @@ en: 3. Then start filling it in with turtle blocks, and **testing** it out as you go by adding a few commands, then running the program, adding a few more, run again, and so on. When you think you're done click `Finish` and move on. - SG U3L2_TurtleSquare_right: "# New problem \n\nThis time, draw a 1 x 1 square, so the square is above and to the right of the turtle. This means you need to draw it by moving and *turning right*. **But there there is no command to turn right!** \n\nHow do you turn right when the only command you have is `turnLeft()`? You need to figure it out.\n\n## One Subgoal - multiple lines of code \nSometimes a single subgoal like `// Orient Turtle` might require several lines of code to accomplish. \n\nFor example in this problem the *goal* of orienting the turtle for each right turn means turning left a few times. So you would add multiple `turnLeft()` commands under a single `//Orient Turtle` subgoal. (shown at right).\n\n
\n\n# Do this\n\n\n* We've again added subgoals to solve this problem into the workspace. Notice that we still only use `Move turtle` and `Orient turtle`.\n* Add code beneath each subgoal, to draw a 1 x 1 square by moving and *turning right*.\n* Reminder: The program should stop with turtle in its original position, facing its original direction.\n\nWhen you're done click the `Finish` button to move onto the next problem.\n\n" + SG U3L2_TurtleSquare_right: "# New problem \n\nThis time, draw a 1 x 1 square, so the square is above and to the right of the turtle. This means you need to draw it by moving and *turning right*. **But there there is no command to turn right!** \n\nHow do you turn right when the only command you have is `turnLeft()`? You need to figure it out.\n\n## One Subgoal - multiple lines of code \nSometimes a single subgoal like `// Orient Turtle` might require several lines of code to accomplish. \n\nFor example in this problem the *goal* of orienting the turtle for each right turn means turning left a few times. So you would add multiple `turnLeft()` commands under a single `//Orient Turtle` subgoal. (shown at right).\n\n
\n\n# Do this\n\n\n* We've again added subgoals to solve this problem into the workspace. Notice that we still only use `Move turtle` and `Orient turtle`.\n* Add code beneath each subgoal, to draw a 1 x 1 square by moving and *turning right*.\n* Reminder: The program should stop with turtle in its original position, facing its original direction.\n\nWhen you're done click the `Finish` button to move onto the next problem.\n\n" SG csp_U3_plan_code_FR: "\n\n
\n\nIn this lesson we talked about top-down design for building up solutions to larger programming problems. Plan the code that you would use to draw this image (shown at right). Describe each of the functions that you would create. You should not write all the code, only the names of the functions that you would create with a brief description of what each function would do. \n\nWrite your plan following the format:\n\n
\n\n Name of function - description of what it does\n\n Name of function 2 - description of what it does\n ..." SG csp_U3_square_v_rect_FR: |- @@ -32519,7 +32526,7 @@ en: U3-Design Mode-ID and Event Handler: "# Activate Your Button\nOn the last level you added a button using Design Mode. If you click it, nothing happens. Let's make the button work. \nYour button has been brought over to this level. \n\n**Goal:** Add code using Design Mode to make the button respond to a click.\n\n# Do This:\n\n\n\n* **Change ID of button** from “button1” to “redButton”.\n\n* **Insert `onEvent` from Design Mode** by clicking *Insert and show code* under the **Events Tab**.\n\n* Run the program and **look for the output in the *Debug Console*** below the workspace instead of the app window. We will discuss the *Debug Console* on the next level." U3-Design Mode-ID: "# Baker note: we might not need this level, or the message about IDs being important might be able to shift to another level (stays here for now...pending).\n\n# IDs Are Still Important\n\n\n# Do This\n\nTry updating the ID name and then update the code to match. \n\n**Switch to Design Mode** and **edit the ID** to be more descriptive. You can edit it from either the Properties tab or the Events tab.\n\n**Switch to Code Mode** and check out the **dropdown ID menu**. Your new ID should be in the dropdown list!\n\n**Test it out** to make sure it works.\n\n" U3-Design Mode-Image: "# Adding Images\n\nTo practice using images in Design Mode we are going to **recreate the \"Chaser Game\"** from the last lesson.\n\n# Do This:\n\n* **Add an Image element** ![](https://images.code.org/cda02ffe3acc869822a551f5cdbf8606-image-1444667846363.37.14 AM.png)\n* **Choose your image** ![](https://images.code.org/e5b9571ae54af60a3ae597b787e741ea-image-1444667688762.34.42 AM.png)\n\t* **URLs** can be added directly into the \"picture\" field. \n\t* **Upload images** by clicking \"Choose\".\n\t* **Note:** You can always see all the files you've uploaded by clicking the gear at the top of the toolbox. ![](https://images.code.org/53b405b771bc11bf5d24c84c878c80dd-image-1444668067826.35.10 AM.png)\n* **Insert an event handler** for the image.\n* From here you can **work in Code Mode** to complete the remainder of your application. Recall that in the \"Chaser Game\" you just need an image that runs away from the mouse.\n* If you have time **use Design Mode** to quickly improve some of the visual components of your game." - U313 Two Buttons with Ids: "# Make a Prediction - Learning to Code Better, Faster\nResearch has shown that when you encounter a new piece of code you learn faster by simply **making a prediction about what will happen before you run the program**. It's not actually important if your prediction is correct, but the act of predicting allows you to construct a stronger mental model for how code works and then test your understanding when you run the code.\n\nGood programmers do this all the time. **They don't expect their code is correct the first time they write it.** Instead they get in the habit of running their code, checking their assumptions, and making changes as needed. Programming isn't a fixed set of steps. It's a creative and continuous cycle of writing, testing, and improving code.\n\n# Predict - Observe - Reflect\nThis program creates a button and **two event handlers** which listen for a click on that button. \n\n**Predict:** What will happen when the \"Forward\" button is clicked? Force yourself to make a prediction about what the turtle will do! **\"I don't know\" is not a prediction**. Think about the options and talk about it with a classmate: Will it..\n* move forward?\n* turn left?\n* turn left *and* move forward?\n* do nothing?\n* move forward *and* turn left?\n* cause an error?\n* something else? \n\n**Observe:** Once you've made a prediction, close these instructions and **run the program** to observe what happens.\n\n**Reflect:** Was your prediction correct? If not what about your mental model might need to change? Talk about it with a classmate and experiment with the code to make sure you understand what is happening.\n" + U313 Two Buttons with Ids: "# Make a Prediction - Learning to Code Better, Faster\nResearch has shown that when you encounter a new piece of code you learn faster by simply **making a prediction about what will happen before you run the program**. It's not actually important if your prediction is correct, but the act of predicting allows you to construct a stronger mental model for how code works and then test your understanding when you run the code.\n\nGood programmers do this all the time. **They don't expect their code is correct the first time they write it.** Instead they get in the habit of running their code, checking their assumptions, and making changes as needed. Programming isn't a fixed set of steps. It's a creative and continuous cycle of writing, testing, and improving code.\n\n# Predict - Observe - Reflect\nThis program creates a button and **two event handlers** which listen for a click on that button. \n\n**Predict:** What will happen when the \"Forward\" button is clicked? Force yourself to make a prediction about what the turtle will do! **\"I don't know\" is not a prediction**. Think about the options and talk about it with a classmate: Will it..\n* move forward?\n* turn left?\n* turn left *and* move forward?\n* do nothing?\n* move forward *and* turn left?\n* cause an error?\n* something else? \n\n**Observe:** Once you've made a prediction, close these instructions and **run the program** to observe what happens.\n\n**Reflect:** Was your prediction correct? If not what about your mental model might need to change? Talk about it with a classmate and experiment with the code to make sure you understand what is happening.\n" U313 drag Two Buttons: "# Buttons and Unique IDs\nYou may have noticed that the button command has two parameters: `button(id, text)`. The `text` is the text that actually shows up on the button display, and the `id` (we'll typically write **ID**) is a **unique identifier** for that element in the app.\n\nEach element that appears in the app must have a **unique ID**. In fact, if you try to run a program that has two buttons with same ID you will get a warning message in the console. Watch:\n\n\nNotice that even though the text on the buttons was different, the IDs were the same, which caused the error message to show up. To get rid of that error message you will have to change the ID of the button from the default `id` to something else.\n\n**Error messages happen to everyone and they are helpful!**: getting an error or warning message when you run your program is *not a big deal*. Programmers actually rely on error messages to tell them where and how to fix their code.\nSometimes error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers to an id (id) which already exists.` But a warning like this contains helpful information and clues such as the line the error occured on, or some word or command it didn't recognize. \n\n# Do This:\nThe goal here is to experience an error message in a program, study it, and fix it.\n* **Drag** two buttons into the workspace (same as shown above) with the default IDs.\n* **Run** the program to see the warning message in the console.\n* **Read** the warning message to see what it says.\n* **Change** the IDs of the buttons to make them unique. An ID must be specified in quotes. You can use double-quotes: `\"myId\"`, or single quotes: `'myId'`\n* **Re-run the program** to make sure you don't get the error.\n\nOnce you've got two buttons on the screen with different IDs and the program can run without generating the warning, move on to the next level.\n" U313 eventsDetails: "# Buttons and Unique Ids\nYou may have noticed that the button command has two parameters: `button(id, text)`. The 'text' is the text that actually shows up on the button display, and the 'id' (which is shorthand for I.D.) is a **unique identifier** for that element in the app.\n\nEach element that appears in the app must have a **unique id**. In fact, if you try to run a program that has two buttons with same id you will get a warning message in the console. Watch:\n\n\nNotice that even though the text on the buttons was different, the ids were the same, which caused the error message to show up. To get rid of that error message you will have to change the default button ID of `\"id\"`.\n\n# Do This\nThe only goal here is to experience this kind of warning message. It's not a big deal if it happens to you. It's a very common thing to happen and the computer is trying to tell you how to fix your code.\n\n* **Drag** two buttons into the workspace (same as shown above)\n* **Run** the program with the default values to see the warning message in the console.\n* **Read** the warning message to see what it says.\n* **Change** the ids of the buttons to make them unique, and re-run the program to make sure you don't get the error.\n* **NOTE:** an id must be specified in quotes. You can use double-quotes: `\"myId\"`, or single quotes: `'myId'` \n\n\n" U3L01 Assessment1: "Consider the algorithm you designed for today’s activity. Identify two instances where there may be multiple ways to interpret your instructions and suggest improvements that could be made to improve their clarity.\n\n" @@ -32563,9 +32570,9 @@ en: U3L03 - draw rect function: "This is your code from the previous level. Did you know that you can write functions that call your own functions?\n\nTake the code that draws the rectangle and move into a new function called `drawRectangle()`. The first line of your program should be a single call to `drawRectangle()`. The rest of the code should just be function definitions. \n\nNOTE: your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions.\n\n![](https://images.code.org/fd6e8b4d2218a242bae19ac9c78b5d5f-image-1447799438050.gif)" U3L03 - draw rect function_2018: "This is your code from the previous level. Did you know that you can write functions that call your own functions?\n\nTake the code that draws the rectangle and move into a new function called `drawRectangle()`. The first line of your program should be a single call to `drawRectangle()`. The rest of the code should just be function definitions. \n\nNOTE: your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions.\n\n![](https://images.code.org/fd6e8b4d2218a242bae19ac9c78b5d5f-image-1447799438050.gif)" U3L03 - draw rect function_2019: "This is your code from the previous level. Did you know that you can write functions that call your own functions?\n\nTake the code that draws the rectangle and move into a new function called `drawRectangle()`. The first line of your program should be a single call to `drawRectangle()`. The rest of the code should just be function definitions. \n\nNOTE: your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions.\n\n![](https://images.code.org/fd6e8b4d2218a242bae19ac9c78b5d5f-image-1447799438050.gif)" - U3L03 - draw step: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n* Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n* If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n* We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n* First let's **define** a function that *draws just one of these zig-zag steps.* We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n![](https://images.code.org/4fa605353695afa0cd01ec01a1e2c709-image-1441772033658.gif)" - U3L03 - draw step_2018: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n* Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n* If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n* We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n* First let's **define** a function that *draws just one of these zig-zag steps.* We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n![](https://images.code.org/4fa605353695afa0cd01ec01a1e2c709-image-1441772033658.gif)" - U3L03 - draw step_2019: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n* Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n* If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n* We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n* First let's **define** a function that *draws just one of these zig-zag steps.* We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n![](https://images.code.org/4fa605353695afa0cd01ec01a1e2c709-image-1441772033658.gif)" + U3L03 - draw step: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n* Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n* If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n* We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n* First let's **define** a function that *draws just one of these zig-zag steps.* We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n![](https://images.code.org/4fa605353695afa0cd01ec01a1e2c709-image-1441772033658.gif)" + U3L03 - draw step_2018: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n* Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n* If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n* We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n* First let's **define** a function that *draws just one of these zig-zag steps.* We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n![](https://images.code.org/4fa605353695afa0cd01ec01a1e2c709-image-1441772033658.gif)" + U3L03 - draw step_2019: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n* Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n* If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n* We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n* First let's **define** a function that *draws just one of these zig-zag steps.* We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n![](https://images.code.org/4fa605353695afa0cd01ec01a1e2c709-image-1441772033658.gif)" U3L03 Define and use turnAround: "# Do This:\n**Define** a function called `turnAround` which turns the turtle around. Once you've defined the function **call** it to make sure it works as you expect and then move the turtle forward, as shown below. \n\n![](https://images.code.org/4c31307ec14cc6dfd65589f2a813120e-image-1447884881189.gif)\n\n**Remember** typically, you call a function in lines of code *above* the function definition - this might make you feel like you are working in reverse, since you first write the code to define the function and *then* add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\n\n![](https://images.code.org/3faf16575757ffae616dffd761085ab5-image-1467818996127.gif)" U3L03 Define and use turnAround_2018: "# Do This:\n**Define** a function called `turnAround` which turns the turtle around. Once you've defined the function **call** it to make sure it works as you expect and then move the turtle forward, as shown below. \n\n![](https://images.code.org/4c31307ec14cc6dfd65589f2a813120e-image-1447884881189.gif)\n\n**Remember** typically, you call a function in lines of code *above* the function definition - this might make you feel like you are working in reverse, since you first write the code to define the function and *then* add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\n\n![](https://images.code.org/3faf16575757ffae616dffd761085ab5-image-1467818996127.gif)" U3L03 Define and use turnAround_2019: "# Do This:\n**Define** a function called `turnAround` which turns the turtle around. Once you've defined the function **call** it to make sure it works as you expect and then move the turtle forward, as shown below. \n\n![](https://images.code.org/4c31307ec14cc6dfd65589f2a813120e-image-1447884881189.gif)\n\n**Remember** typically, you call a function in lines of code *above* the function definition - this might make you feel like you are working in reverse, since you first write the code to define the function and *then* add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\n\n![](https://images.code.org/3faf16575757ffae616dffd761085ab5-image-1467818996127.gif)" @@ -32581,11 +32588,11 @@ en: U3L03 Free Response Wrap Up: "In your own words, explain at least one reason why programming languages have functions. Include an example of something you did in this lesson that demonstrates the reason you describe.\n\n" U3L03 Free Response Wrap Up_2018: "In your own words, explain at least one reason why programming languages have functions. Include an example of something you did in this lesson that demonstrates the reason you describe.\n\n" U3L03 Free Response Wrap Up_2019: "In your own words, explain at least one reason why programming languages have functions. Include an example of something you did in this lesson that demonstrates the reason you describe.\n\n" - U3L03 Three Steps: "# Do This:\n\n\nWe are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond.\nIf you look at the whole image we are trying to draw, you'll notice that each of 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange).\n\nRight now we'll write the code for one of those sides. So...\n\n**Define** a new function named `drawSide()` which makes three calls in a row to `drawStep()` followed by a `moveForward()` and `right()`. \n\n**Replace** the original function call to `drawStep()` with a call to your newly defined `drawSide()` function. \n\nThe diagrams below show the intended actions.\n\n![](https://images.code.org/480f6787e4d2daf34d67642e25b29de6-image-1441772552026.png)\n![](https://images.code.org/02f52d406854d6f86535adf2f593ccc9-image-1441772709549.gif)\n\n\n\n" + U3L03 Three Steps: "# Do This:\n\n\nWe are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond.\nIf you look at the whole image we are trying to draw, you'll notice that each of 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange).\n\nRight now we'll write the code for one of those sides. So...\n\n**Define** a new function named `drawSide()` which makes three calls in a row to `drawStep()` followed by a `moveForward()` and `right()`. \n\n**Replace** the original function call to `drawStep()` with a call to your newly defined `drawSide()` function. \n\nThe diagrams below show the intended actions.\n\n![](https://images.code.org/480f6787e4d2daf34d67642e25b29de6-image-1441772552026.png)\n![](https://images.code.org/02f52d406854d6f86535adf2f593ccc9-image-1441772709549.gif)\n\n\n\n" U3L03 Three Steps_2018: |+ # Do This: - + We are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond. If you look at the whole image we are trying to draw, you'll notice that each of 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange). @@ -32616,7 +32623,7 @@ en: U3L03 Three Steps_2019: |+ # Do This: - + We are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond. If you look at the whole image we are trying to draw, you'll notice that each of 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange). @@ -34486,10 +34493,10 @@ en: U3L2 Free Response Reflection: 'Respond to your teacher''s prompt in the space below. ' - U3L2 Using Simple Commands (no tooltips): "**Directions:** Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. \n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n**Warm up 1:** Draw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." - U3L2 Using Simple Commands: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." - U3L2 Using Simple Commands_2018: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." - U3L2 Using Simple Commands_2019: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + U3L2 Using Simple Commands (no tooltips): "**Directions:** Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. \n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n**Warm up 1:** Draw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + U3L2 Using Simple Commands: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + U3L2 Using Simple Commands_2018: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + U3L2 Using Simple Commands_2019: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." U3L20 Assessment4: 'How do you know if a program needs a conditional statement? ' @@ -34887,7 +34894,7 @@ en: U3L2_TurtleSquare_right: |- # Do This: - + This time, draw a 1 x 1 square to the *front and right* of the turtle as efficiently as possible. Notice that there is no command to turn right! You need to figure out how to draw this by only turning left and moving forward. The program should stop with turtle in its original position, facing its original direction. @@ -38102,8 +38109,8 @@ en: U6 - updateRecord - Contacts - Save edited contact_2018: "# Saving an Updated Contact in the Database\n\nThe last step for your Contacts App is to save the updated information from the user in the database. You can accomplish this by using `updateRecord`.\n\n# Do This:\n\n* **Add an event handler for the “Update Contact” button.** In the event handler:\n\t* Create a new object called `objToUpdate` and set it to a copy of the current contact.\n\t* Call `updateRecord`, and make sure to set the first and second parameters.\n\t* In the callback function for `updateRecord`, call `refreshLocalData` to update your local copy of the database.\n* **Run your program** and verify that when you edit the information for a contact, the changes are reflected when you return to the \"View Contacts\" screen.\n\n
\n\n\n\nYour code should look similar to this. (click to expand)\n\n\n\n![](https://images.code.org/8f1c01a434934ee3bfdc4941f657b4dc-image-1455924274767.png)\n\n

\n\n**Congratulations!** You now have a fully-functioning Contacts App!\n\nYou can use this same pattern of **create, read, update, and delete** commands (a.k.a. “**CRUD** commands”) to store permanent data in many different types of apps.\n\n" U6 - updateRecord - Contacts - Save edited contact_2019: "# Saving an Updated Contact in the Database\n\nThe last step for your Contacts App is to save the updated information from the user in the database. You can accomplish this by using `updateRecord`.\n\n# Do This:\n\n* **Add an event handler for the “Update Contact” button.** In the event handler:\n\t* Create a new object called `objToUpdate` and set it to a copy of the current contact.\n\t* Call `updateRecord`, and make sure to set the first and second parameters.\n\t* In the callback function for `updateRecord`, call `refreshLocalData` to update your local copy of the database.\n* **Run your program** and verify that when you edit the information for a contact, the changes are reflected when you return to the \"View Contacts\" screen.\n\n
\n\n\n\nYour code should look similar to this. (click to expand)\n\n\n\n![](https://images.code.org/8f1c01a434934ee3bfdc4941f657b4dc-image-1455924274767.png)\n\n

\n\n**Congratulations!** You now have a fully-functioning Contacts App!\n\nYou can use this same pattern of **create, read, update, and delete** commands (a.k.a. “**CRUD** commands”) to store permanent data in many different types of apps.\n\n" U6 - updateRecord - Default Block: "# Updating Records\n\nSometimes in your program, you may want to make edits to a record that already exists in your database. You can do this using the `updateRecord` block.\n\n![](https://images.code.org/c62e74c0fff801bb59a024894f7e8caf-image-1455576434177.PNG)\n\n`updateRecord` has three parameters:\n\n* The **name of the table** which contains the record you want to update\n* The **object** you want to update.\n* A **callback function**\n\nThe object in the second parameter needs to have an ID property. As with `deleteRecord`, this object’s ID is used to determine which record in the database should be updated.\n\n\n# Do This:\n\n**Your database already includes a table called “mySongs”.**\n\n* Open the Data Viewer for mySongs and note that the record for **“Eye of the Tiger” is missing information** for the artist and seconds columns.
![](https://images.code.org/3e7f6503480eaeeea2be6eedc51fa5bd-image-1455666147565.PNG)\n* **Run the starter code provided and take note of what prints to the console.**\n* **Drag out the `updateRecord` block.**\n\t* Set the table name to **“mySongs”**.\n\t* Set the object to `songToUpdate`.\n\t* In the callback function, add a `console.log` statement to **print out the updated record’s title and artist.**\n* **Run the program again.**\n\t* Look at the output to the console.\n * Refresh the Data Viewer and **verify that the record for “Eye of the Tiger” has been updated.**\n\n" - U6 - updateRecord - Default Block_2018: "# Updating Records\n\nSometimes in your program, you may want to make edits to a record that already exists in your database. You can do this using the `updateRecord` block.\n\n![](https://images.code.org/c62e74c0fff801bb59a024894f7e8caf-image-1455576434177.PNG)\n\n`updateRecord` has three parameters:\n\n* The **name of the table** which contains the record you want to update\n* The **object** you want to update.\n* A **callback function**\n\nThe object in the second parameter needs to have an ID property. As with `deleteRecord`, this object’s ID is used to determine which record in the database should be updated.\n\n\n# Do This:\n\n**Your database already includes a table called “mySongs”.**\n\n* Open the Data Viewer for mySongs and note that the record for **“Eye of the Tiger” is missing information** for the artist and seconds columns.
![](https://images.code.org/3e7f6503480eaeeea2be6eedc51fa5bd-image-1455666147565.PNG)\n* **Run the starter code provided and take note of what prints to the console.**\n* **Drag out the `updateRecord` block.**\n\t* Set the table name to **“mySongs”**.\n\t* Set the object to `songToUpdate`.\n\t* In the callback function, add a `console.log` statement to **print out the updated record’s title and artist.**\n* **Run the program again.**\n\t* Look at the output to the console.\n * Refresh the Data Viewer and **verify that the record for “Eye of the Tiger” has been updated.**\n\n" - U6 - updateRecord - Default Block_2019: "# Updating Records\n\nSometimes in your program, you may want to make edits to a record that already exists in your database. You can do this using the `updateRecord` block.\n\n![](https://images.code.org/c62e74c0fff801bb59a024894f7e8caf-image-1455576434177.PNG)\n\n`updateRecord` has three parameters:\n\n* The **name of the table** which contains the record you want to update\n* The **object** you want to update.\n* A **callback function**\n\nThe object in the second parameter needs to have an ID property. As with `deleteRecord`, this object’s ID is used to determine which record in the database should be updated.\n\n\n# Do This:\n\n**Your database already includes a table called “mySongs”.**\n\n* Open the Data Viewer for mySongs and note that the record for **“Eye of the Tiger” is missing information** for the artist and seconds columns.
![](https://images.code.org/3e7f6503480eaeeea2be6eedc51fa5bd-image-1455666147565.PNG)\n* **Run the starter code provided and take note of what prints to the console.**\n* **Drag out the `updateRecord` block.**\n\t* Set the table name to **“mySongs”**.\n\t* Set the object to `songToUpdate`.\n\t* In the callback function, add a `console.log` statement to **print out the updated record’s title and artist.**\n* **Run the program again.**\n\t* Look at the output to the console.\n * Refresh the Data Viewer and **verify that the record for “Eye of the Tiger” has been updated.**\n\n" + U6 - updateRecord - Default Block_2018: "# Updating Records\n\nSometimes in your program, you may want to make edits to a record that already exists in your database. You can do this using the `updateRecord` block.\n\n![](https://images.code.org/c62e74c0fff801bb59a024894f7e8caf-image-1455576434177.PNG)\n\n`updateRecord` has three parameters:\n\n* The **name of the table** which contains the record you want to update\n* The **object** you want to update.\n* A **callback function**\n\nThe object in the second parameter needs to have an ID property. As with `deleteRecord`, this object’s ID is used to determine which record in the database should be updated.\n\n\n# Do This:\n\n**Your database already includes a table called “mySongs”.**\n\n* Look in the data tab for mySongs and note that the record for **“Eye of the Tiger” is missing information** for the artist and seconds columns.
![](https://images.code.org/3e7f6503480eaeeea2be6eedc51fa5bd-image-1455666147565.PNG)\n* **Run the starter code provided and take note of what prints to the console.**\n* **Drag out the `updateRecord` block.**\n\t* Set the table name to **“mySongs”**.\n\t* Set the object to `songToUpdate`.\n\t* In the callback function, add a `console.log` statement to **print out the updated record’s title and artist.**\n* **Run the program again.**\n\t* Look at the output to the console.\n * Click the data tab and **verify that the record for “Eye of the Tiger” has been updated.**\n\n" + U6 - updateRecord - Default Block_2019: "# Updating Records\n\nSometimes in your program, you may want to make edits to a record that already exists in your database. You can do this using the `updateRecord` block.\n\n![](https://images.code.org/c62e74c0fff801bb59a024894f7e8caf-image-1455576434177.PNG)\n\n`updateRecord` has three parameters:\n\n* The **name of the table** which contains the record you want to update\n* The **object** you want to update.\n* A **callback function**\n\nThe object in the second parameter needs to have an ID property. As with `deleteRecord`, this object’s ID is used to determine which record in the database should be updated.\n\n\n# Do This:\n\n**Your database already includes a table called “mySongs”.**\n\n* Look in the data tab for mySongs and note that the record for **“Eye of the Tiger” is missing information** for the artist and seconds columns.
![](https://images.code.org/3e7f6503480eaeeea2be6eedc51fa5bd-image-1455666147565.PNG)\n* **Run the starter code provided and take note of what prints to the console.**\n* **Drag out the `updateRecord` block.**\n\t* Set the table name to **“mySongs”**.\n\t* Set the object to `songToUpdate`.\n\t* In the callback function, add a `console.log` statement to **print out the updated record’s title and artist.**\n* **Run the program again.**\n\t* Look at the output to the console.\n * Click the data tab and **verify that the record for “Eye of the Tiger” has been updated.**\n\n" U6 - updateRecord - Update Nonexistent Record: |+ # What If *updateRecord* Fails? @@ -38192,6 +38199,17 @@ en: + U7 L05 Exit Ticket: | + Evaluate if the following function is a good candidate to be placed in a library. Why or why not? + + + function updateScore(player, points) + if(player == "player1"){ + player1Points = player1Points + points; + } else { + player2Points = player2Points + points; + } + } Underground Avoiding Lava: Lava is hiding beneath some of these blocks, which you'll need to cover up before moving forward. An `if` command will come in handy here. Add a `move forward` command in the correct place to mine these blocks. Underground Avoiding Lava_2018: Lava is hiding beneath some of these blocks, which you'll need to cover up before moving forward. An `if` command will come in handy here. Add a `move forward` command in the correct place to mine these blocks. Underground Avoiding Lava_2019: Lava is hiding beneath some of these blocks, which you'll need to cover up before moving forward. An `if` command will come in handy here. Add a `move forward` command in the correct place to mine these blocks. @@ -38401,6 +38419,12 @@ en: * Make one of your food sprites controllable by adding keypress events (example: press up to go up, down to go down). Virtual Pet Freeplay_simple: "Freeplay: What more can you make your giraffe do? \n\n- Can you add more special items for your giraffe? \n- Can you give her some friends? " Virtual Pet Predict: "**Make a prediction:** This is Geraldine, your new pet giraffe. What do you think will happen if you press run and then click on her?" + Virtual Pet Template_2019: |- + Now it's your turn to create your own virtual pet! Let's start by giving it a look you like. + + 1. Click the **Costumes** tab. + 2. Draw your own costume, or choose one from the library. + 3. In the code below, change the pet sprite's costume to your own. Visual Accessibility: |- # Visual Accessibility: Color Contrast @@ -38476,9 +38500,9 @@ en: 'Widget: Black and White Pixelation': "# Make your own image of any size\n\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\n\n\n**Directions:**\n\n* Encode an image of anything you like.\n* You might want to do some planning and sketching with graph paper first.\n* DO NOT simply make an abstract pattern, like a checkerboard. \n* Depict something, perhaps your name written out, your initials, an icon or logo of some sort.\n* Get creative! The image doesn't have to be a perfect square, it can be long and skinny.\n* Optional: for fun, send your image bits to a friend using the sending bits widget. *(note: this is just a link to the sending formatted text level from a couple of classes ago)*\n\n\n" 'Widget: Black and White Pixelation_2018': "# Make your own image of any size\n\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\n\n\n**Directions:**\n\n* Encode an image of anything you like.\n* You might want to do some planning and sketching with graph paper first.\n* DO NOT simply make an abstract pattern, like a checkerboard. \n* Depict something, perhaps your name written out, your initials, an icon or logo of some sort.\n* Get creative! The image doesn't have to be a perfect square, it can be long and skinny.\n* Optional: for fun, send your image bits to a friend using the sending bits widget. *(note: this is just a link to the sending formatted text level from a couple of classes ago)*\n\n\n" 'Widget: Black and White Pixelation_2019': "# Make your own image of any size\n\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\n\n\n**Directions:**\n\n* Encode an image of anything you like.\n* You might want to do some planning and sketching with graph paper first.\n* DO NOT simply make an abstract pattern, like a checkerboard. \n* Depict something, perhaps your name written out, your initials, an icon or logo of some sort.\n* Get creative! The image doesn't have to be a perfect square, it can be long and skinny.\n* Optional: for fun, send your image bits to a friend using the sending bits widget. *(note: this is just a link to the sending formatted text level from a couple of classes ago)*\n\n\n" - 'Widget: Color Pixelation': "# Personal Favicon\n**Requirements:**\n\n\n* The icon must be 16x16 pixels. \n* You must use the Pixelation Widget to encode the bits of color information.\n* The image must be encoded with at least 12 bits per pixel.\n\n" - 'Widget: Color Pixelation_2018': "# Personal Favicon\n**Requirements:**\n\n\n* The icon must be 16x16 pixels. \n* You must use the Pixelation Widget to encode the bits of color information.\n* The image must be encoded with at least 12 bits per pixel.\n\n" - 'Widget: Color Pixelation_2019': "# Personal Favicon\n**Requirements:**\n\n\n* The icon must be 16x16 pixels. \n* You must use the Pixelation Widget to encode the bits of color information.\n* The image must be encoded with at least 12 bits per pixel.\n\n" + 'Widget: Color Pixelation': "# Personal Favicon\n**Requirements:**\n\n\n* The icon must be 16x16 pixels. \n* You must use the Pixelation Widget to encode the bits of color information.\n* The image must be encoded with at least 12 bits per pixel.\n\n" + 'Widget: Color Pixelation_2018': "# Personal Favicon\n**Requirements:**\n\n\n* The icon must be 16x16 pixels. \n* You must use the Pixelation Widget to encode the bits of color information.\n* The image must be encoded with at least 12 bits per pixel.\n\n" + 'Widget: Color Pixelation_2019': "# Personal Favicon\n**Requirements:**\n\n\n* The icon must be 16x16 pixels. \n* You must use the Pixelation Widget to encode the bits of color information.\n* The image must be encoded with at least 12 bits per pixel.\n\n" 'Widget: Text Compression': Look for patterns (repeated words or phrases) in the text. Enter the patterns you see into the dictionary on the right. As you type entries into the dictionary, the symbol for the entry is inserted into the text in place of the pattern. 'Widget: Text Compression_2018': Look for patterns (repeated words or phrases) in the text. Enter the patterns you see into the dictionary on the right. As you type entries into the dictionary, the symbol for the entry is inserted into the text in place of the pattern. 'Widget: Text Compression_2019': Look for patterns (repeated words or phrases) in the text. Enter the patterns you see into the dictionary on the right. As you type entries into the dictionary, the symbol for the entry is inserted into the text in place of the pattern. @@ -38773,7 +38797,7 @@ en: * Create a new behavior and use it to make the ball roll. Your behavior should combine two different actions. behaviors 7: |- - Drive off into the sunset! + Drive off into the horizon! * Create a new behavior and use it to make the car move up and shrink. If you do it right, it could look like it is driving off into the horizon. behaviors free play: "**Free play:** Create your own outer space scene!" @@ -41517,6 +41541,7 @@ en: courseE_aboutme_6: "Awesome job! Your poster is just as cool as Rikki's! \n\nRikki: Almost as cool. Almost. 😉\n\nKeep going! Here are a few improvements Rikki recommends. Try them out!\n\n1. Add a background! Choose a background that fits your poster.\n2. Add behaviors! Make each of your sprites react differently when clicked.\n3. Add more events! Use the other blocks in the `Events` toolbox category.\n" courseE_aboutme_7: "**Free Play**: Rikki is kid using Sprite Lab to create an _interactive poster_ about herself that she can share on the web. \nShe has chosen this sprite to represent her! \nRikki has given you permission to check out her poster. You can even edit her code! \nPlay with Rikki's poster and code for a bit, then click **Finish**." courseE_aboutme_freeplay: "Awesome job! Your poster is just as cool as Rikki's! \n\nRikki: Almost as cool. Almost. 😉\n\nKeep going! Here are a few things Rikki is going to add to her poster. Try them out!\n\n1. Add a background! Choose a background that fits your poster.\n2. Add behaviors! Make each of your sprites react differently when clicked.\n3. Add other kinds of events! Apply your creativity and coding skills and try events other than `click`.\n" + courseE_aboutme_template: This is a template level for "About Me 2019". courseE_artist_concept1: "Recreate this image. \n\n- The hexagons have sides of 50 pixels\n- The hexagons are 100 pixels apart\n- The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." courseE_artist_concept1_2018: "Recreate this image. \n\n- The hexagons have sides of 50 pixels\n- The hexagons are 100 pixels apart\n- The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." courseE_artist_concept1_2019: "Recreate this image. \n\n- The hexagons have sides of 50 pixels\n- The hexagons are 100 pixels apart\n- The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." @@ -44605,8 +44630,8 @@ en: * How many apples did the elephant collect? * How many apples did the hippo collect? * How much time did it take for all of the apples to be collected? - subgoal U3 L4 introducing subgoal labels: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." - subgoal U3L2 Using Simple Commands: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + subgoal U3 L4 introducing subgoal labels: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + subgoal U3L2 Using Simple Commands: "\n\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n\n\n# Do This: \nDraw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." subgoal-test-clone: |- ### use goal labels to structure your solution. @@ -44619,7 +44644,7 @@ en: The turtle should draw a square moving clockwise. Drag out ["move turtle" subgoal label](#triggercallout=trigger_move_subgoal) into the workspace. - subgoalU3L2_TurtleSquare_right: " \n\n# Do This:\n\nThis time, draw a 1 x 1 square to the *front and right* of the turtle as efficiently as possible. Notice that there is no command to turn right! You need to figure out how to draw this by only turning left and moving forward. The program should stop with turtle in its original position, facing its original direction.\n\nWhen you're done click the Finish button to move onto the next problem.\n" + subgoalU3L2_TurtleSquare_right: " \n\n# Do This:\n\nThis time, draw a 1 x 1 square to the *front and right* of the turtle as efficiently as possible. Notice that there is no command to turn right! You need to figure out how to draw this by only turning left and moving forward. The program should stop with turtle in its original position, facing its original direction.\n\nWhen you're done click the Finish button to move onto the next problem.\n" subgoals_U3_turtle_prediction_FR: |- ## Code Trace diff --git a/dashboard/config/locales/short_instructions.en.yml b/dashboard/config/locales/short_instructions.en.yml index b1dfb14e8b356..ceb5d065817da 100644 --- a/dashboard/config/locales/short_instructions.en.yml +++ b/dashboard/config/locales/short_instructions.en.yml @@ -2,6 +2,7 @@ en: data: short_instructions: + "(joshl) Dance Party 1-validated_2019": 'What do you think will happen when you click on the alien? ' 2-3 Artist 1 new: Hi, I'm an artist. You can write code to make me draw almost anything. Use a few blocks to make me draw over the grey lines in the picture. (Each line is 100 pixels long) 2-3 Artist 11: "Give the stop sign a border by making an octagon with 100 pixels sides. \n\n" 2-3 Artist 12: |- @@ -1820,7 +1821,7 @@ en: Dance Party 1-validated_2019: 'What do you think will happen when you click on the alien? ' Dance Party 1-validated_simple: 'What do you think will happen when you click on the alien? ' Dance Party 2: Change the behavior inside the `___ begins ___` block to make the alien start spinning around. - Dance Party 2_2019: Replace the behavior block in the `sprite begins` block to a different one that will make the alien start spinning around! + Dance Party 2_2019: Replace the behavior block in the `sprite begins` block to a different one that will make the alien start spinning! Dance Party 2_simple: Change the behavior inside the `___ begins ___` block to make the alien start spinning around. Dance Party 3 - Validated: 'Create a new sprite called `alien2`, then make it do a different dance move when it''s clicked. ' Dance Party 3 Ram: Make the sprite do something different when you press the up arrow. @@ -1829,7 +1830,7 @@ en: Dance Party 3_simple: 'Create a new sprite called `alien2`, then make it do a different dance move when it''s clicked. ' Dance Party 4 Validated: 'Create a third sprite called `alien3` and get all of your aliens to stand in a line. ' Dance Party 4: 'Create a third sprite called `alien3` and get all of your aliens to stand in a line. ' - Dance Party 4_2019: 'Create a third sprite that looks like a yellow alien, and get all of your aliens to stand in a line. ' + Dance Party 4_2019: Create a third sprite that looks like a yellow alien, make it do a dance when clicked, and set all of your aliens to stand in a horizontal line. Dance Party 4_simple: 'Create a third sprite called `alien3` and get all of your aliens to stand in a line. ' Dance Party 5 - Validated: Add code to change the color of each alien when it gets clicked. Dance Party 5: Add code to change the color of each alien when it gets clicked. @@ -1849,6 +1850,8 @@ en: Dance Party Predict: 'What do you think will happen when you click on the alien? ' Dance Party Predict_2019: 'What do you think will happen when you click on the alien? ' Dance Party Predict_simple: 'What do you think will happen when you click on the alien? ' + Dance Party Template 1_2019: Replace the behavior block in the `sprite begins` block to a different one that will make the alien start spinning around! + Dance Party Template 2_2019: Template Dance_Events_Example_Video: Use events to make your dance party interactive! Dance_Party_01: Drag the `make a new` block into the workspace, and connect it inside the `setup` block. Dance_Party_01_low: Drag the `make a new` block into the workspace, and connect it inside the `setup` block. @@ -3651,6 +3654,7 @@ en: Virtual Pet Freeplay: 'Freeplay: What more can you make your giraffe do? ' Virtual Pet Freeplay_2019: "**Free Play:** What more can you make your pet do? Try anything you like!" Virtual Pet Freeplay_simple: 'Freeplay: What more can you make your giraffe do? ' + Virtual Pet Template_2019: Create your own virtual pet! Click the **Costumes** tab to create or select a new costume for your virtual pet. In the code below, change the pet sprite's costume to your own. WhileAdventure: Our adventurer wants to collect coins. Can you help her grab as many as she can using only one remove 1 block? 'Widget: Black and White Pixelation': Now make your own image! We've started you off with a 10x10 canvas but you can make it whatever size you want. Happy pixeling! 'Widget: Black and White Pixelation_2018': Now make your own image! We've started you off with a 10x10 canvas but you can make it whatever size you want. Happy pixeling! @@ -3711,7 +3715,7 @@ en: behaviors 5: Move the astronaut diagonally. behaviors 5a: Make the ball roll. behaviors 6: Make the ball roll. - behaviors 7: Drive off into the sunset! + behaviors 7: Drive off into the horizon! behaviors clone me 2: Clone this level and make your own blocks! behaviors clone me Ram: Clone this level and make your own blocks! behaviors clone me joshl: Clone this level and make your own blocks! @@ -5373,6 +5377,7 @@ en: courseE_aboutme_6: Awesome job! Keep going! Try adding more features to your poster to make it even better. Try adding a background, behaviors, and other kinds of events! courseE_aboutme_7: Play with Rikki's poster and code for a bit, then click **Finish**. courseE_aboutme_freeplay: Awesome job! Keep going! Try adding more features to your poster to make it even better. Try adding a background, behaviors, and other kinds of events! + courseE_aboutme_template: Use the **Costumes** tab to create or select a new costume for your sprite! courseE_artist_concept1: 'Recreate this image. ' courseE_artist_concept1_2018: 'Recreate this image. ' courseE_artist_concept1_2019: 'Recreate this image. ' diff --git a/i18n/locales/source/dashboard/base.yml b/i18n/locales/source/dashboard/base.yml index e7755150646ab..a6d2b5d32593c 100644 --- a/i18n/locales/source/dashboard/base.yml +++ b/i18n/locales/source/dashboard/base.yml @@ -299,13 +299,6 @@ en: header: finished_hoc: "I finished!" sign_in_to_save: 'Sign in to save progress' - free_play: - playlab: 'Make a Play Lab app' - artist: 'Draw something' - calculate: 'Calculate something' - applab: 'Make an App Lab app' - gamelab: 'Make a Game Lab project' - weblab: 'Make a Web Lab (beta) project' my_dashboard: "My Dashboard" course_catalog: "Course Catalog" project_gallery: "Projects" @@ -347,6 +340,7 @@ en: district_dashboard: 'District Dashboard' label: 'Hi %{username}' stats: 'Code Studio' + my_projects: 'My projects' settings: 'Account settings' logout: 'Sign out' signin: 'Sign in' diff --git a/i18n/locales/source/dashboard/block_categories.yml b/i18n/locales/source/dashboard/block_categories.yml index cb599248afe2c..a8b4c8866b364 100644 --- a/i18n/locales/source/dashboard/block_categories.yml +++ b/i18n/locales/source/dashboard/block_categories.yml @@ -49,7 +49,6 @@ en: Functional: Functional While Events: While Events Sprite Properties: Sprite Properties - Merge with Behaviors: Merge with Behaviors Predefined: Predefined test: test test2: test2 diff --git a/i18n/locales/source/dashboard/blocks.yml b/i18n/locales/source/dashboard/blocks.yml index ff47a7ea3494d..de5b3585eb93d 100644 --- a/i18n/locales/source/dashboard/blocks.yml +++ b/i18n/locales/source/dashboard/blocks.yml @@ -731,6 +731,8 @@ en: '"while"': while gamelab_clickedOn: text: when [SPRITE][0] clicked + gamelab_clickedSpritePointer: + text: clicked sprite gamelab_comment: text: 'comment: [COMMENT][0]' gamelab_console.log: @@ -942,6 +944,8 @@ en: text: move [SPRITE][0] pixels [DISTANCE][1] toward [TARGET][2] gamelab_moveUp: text: "[THIS][0] move up" + gamelab_objectSprite: + text: object sprite gamelab_playSound: text: playSound [SOUND][0] gamelab_pointInDirection: @@ -980,25 +984,35 @@ en: text: set background to [IMG][0] options: IMG: + '"https://studio.code.org/blockly/media/skins/studio/background_cave.png"': cave '"https://studio.code.org/api/v1/animation-library/04L4sdTODkNZF1OHf4qO_I.Al3QP43wA/category_backgrounds/city.png"': city '"https://studio.code.org/api/v1/animation-library/UieRK0NBKD3xVHtSJxcUTAuhzLM1D_Hq/category_backgrounds/continuous_grass.png"': continuous grass + '"https://studio.code.org/blockly/media/skins/studio/background.png"': court + '"https://studio.code.org/blockly/media/skins/studio/background_desert.png"': desert '"https://studio.code.org/api/v1/animation-library/nfgysU3t3P8XnUBAf9LjIy2JTHtdXpTj/category_backgrounds/desert_road.png"': desert road '"https://studio.code.org/api/v1/animation-library/4FnSIFL33P0PH_C_DnKOse2QbZCdtaJJ/category_backgrounds/farm_land.png"': farm land '"https://studio.code.org/api/v1/animation-library/vrlUwPslp0VK_KJcPQ9OPZNb.Ms5eBL5/category_backgrounds/floating_grass.png"': floating grass '"https://studio.code.org/api/v1/animation-library/ZjjFGjO0xNEZGEweTgANloehQrxwIXVM/category_backgrounds/front_of_house.png"': front of house + '"https://studio.code.org/blockly/media/skins/studio/background_space.png"': galaxy + '"https://studio.code.org/blockly/media/skins/studio/background_grid.png"': grid '"https://studio.code.org/api/v1/animation-library/1K7z7Kc3EeXsLV693byb0xxoJSJ4Du7e/category_backgrounds/kitchen.png"': 'kitchen ' '"https://studio.code.org/api/v1/animation-library/4bsf67OUrcX.t1wbIcE_xygGKxOkiQ6f/category_backgrounds/living_room.png"': living room '"https://studio.code.org/api/v1/animation-library/cJKusc1WPgWvCvgdwRX1gk8Zk0FggcVj/category_backgrounds/meadow.png"': meadow '"https://studio.code.org/api/v1/animation-library/4gC7uWaaRI4aDyrncCFO_wY_67vYhr4C/category_backgrounds/park_view.png"': park view '"https://studio.code.org/api/v1/animation-library/5K0h1rGe5ql4J9TdlqggIzGZYzbD38pF/category_backgrounds/pine_trees.png"': pine trees + '"https://studio.code.org/blockly/media/skins/studio/background_rainbow.png"': rainbow + '"https://studio.code.org/blockly/media/skins/studio/background_scifi.png"': sci-fi '"https://studio.code.org//api/v1/animation-library/WJjQlG1rFhbVmPfcuI_wy6tpwI6mHYnM/category_backgrounds/soccer_field.png"': soccer field '"https://studio.code.org/api/v1/animation-library/Thvd6E7yU59nfop.zZKGWKoR8VLZDTq./category_backgrounds/stage.png"': stage + '"https://studio.code.org/blockly/media/skins/studio/background_santa.png"': stars '"https://studio.code.org/api/v1/animation-library/RblQqWAuW0EkLfYuRVK4LRc0uY_76fvi/category_backgrounds/subway.png"': subway '"https://studio.code.org/api/v1/animation-library/ZY0THG5IedwCgmWVIhiPdJH59OORnmgT/category_backgrounds/sun_and_rainbow.png"': sun and rainbow '"https://studio.code.org/api/v1/animation-library/_aXeLwM1Ge.ZDVJoON.cAlR3iwhKJJvl/category_backgrounds/sunshine_showers.png"': sunshine showers '"https://studio.code.org/api/v1/animation-library/.51KpEhDOyXg4dbDaAnm0dEWLAj1GZwy/category_backgrounds/tennis_court.png"': tennis court '"https://studio.code.org/api/v1/animation-library/yatDsUkvGtT_.fSv68qi1d4YJDMHdGnS/category_backgrounds/tree_island.png"': tree island '"https://studio.code.org/api/v1/animation-library/INSgmsgsLuIk1Aqp7g72h9nLFez.NX0p/category_backgrounds/underground.png"': underground + '"https://studio.code.org/blockly/media/skins/studio/background_underwater.png"': underwater + '"https://studio.code.org/blockly/media/skins/studio/background_winter.png"': winter undefined: none gamelab_setDirection: text: set [SPRITE][0] movement direction [DIRECTION][1] @@ -1054,6 +1068,12 @@ en: CONDITION: '"when"': when '"while"': while + gamelab_spriteClickedSet: + text: "[CONDITION][0] [SPRITE][1] clicked set [CLICK][2]" + options: + CONDITION: + '"when"': when + '"while"': while gamelab_spriteCostume: text: "[COSTUME][0]" gamelab_spriteDirection: @@ -1096,6 +1116,8 @@ en: text: last [VALUE][0] gamelab_spritesWhereRandom: text: random in group [VALUE][0] + gamelab_subjectSprite: + text: subject sprite gamelab_thisBeginsBehaviorSimple: text: sprite [SPRITE][0] begins [BEHAVIOR][1] options: @@ -1146,6 +1168,12 @@ en: text: when [SPRITE1][0] touches [SPRITE2][1] gamelab_whenTouchingAny: text: when [SPRITE][0] touches any [GROUP][1] + gamelab_whenTouchingSet: + text: "[CONDITION][0] [SPRITE1][1] touches [SPRITE2][2] set [SPRITEA][3] and set [SPRITEB][4]" + options: + CONDITION: + '"when"': when + '"while"': while gamelab_whenTrue: text: when [CONDITION][0] true gamelab_whenUpArrow: diff --git a/i18n/locales/source/dashboard/callouts.yml b/i18n/locales/source/dashboard/callouts.yml index afa008f260f81..9f10e7fcd9e2d 100644 --- a/i18n/locales/source/dashboard/callouts.yml +++ b/i18n/locales/source/dashboard/callouts.yml @@ -1073,6 +1073,7 @@ en: Underground Iron_2019_callout: craft_what_is_iron: Mine this iron! Virtual Pet 2_2019_callout: {} + Virtual Pet Template_2019_callout: {} WebLab PS test - 1-12_callout: version_history_button: Check out version history WhileAdventure_callout: @@ -1105,6 +1106,7 @@ en: behaviors 3a_callout: behavior_callout: Why isn't this behavior working for the middle star? star2_callout: Remove this costume block and use the "this sprite" block instead. + this_sprite_callout: Testing behaviors 4_callout: behaviors_edit: Click here to see how this behavior works. behaviors 4a_callout: @@ -1191,8 +1193,7 @@ en: courseA_collector_preLoops6_callout: courseA_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. courseA_forVideoTest_artist_callout: {} - courseA_maze_ramp2_2018_callout: - courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. + courseA_maze_ramp2_2018_callout: {} courseA_maze_ramp2_2019_callout: courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. courseA_maze_ramp2a_2018_callout: @@ -1200,7 +1201,8 @@ en: courseA_maze_ramp3_2018_callout: courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. stone_block_2: Grey blocks are made of stone and cannot be thrown away. - courseA_maze_ramp3a_2018_callout: {} + courseA_maze_ramp3a_2018_callout: + courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. courseA_maze_ramp3a_2019_callout: {} courseA_maze_ramp3b_2018_callout: {} courseA_maze_ramp3b_2019_callout: {} @@ -1258,7 +1260,8 @@ en: courseB_Scrat_ramp2_2018_callout: {} courseB_Scrat_ramp2_2019_callout: {} courseB_Scrat_ramp3a_2018_callout: {} - courseB_Scrat_ramp3a_2019_callout: {} + courseB_Scrat_ramp3a_2019_callout: + courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. courseB_Scrat_ramp3b_2018_callout: {} courseB_Scrat_ramp3b_2019_callout: {} courseB_Scrat_ramp4a_2018_callout: {} @@ -1615,6 +1618,7 @@ en: courseE_aboutme_4_callout: {} courseE_aboutme_5_callout: {} courseE_aboutme_7_callout: {} + courseE_aboutme_template_callout: {} courseE_artist_concept_challenge2_callout: {} courseE_artist_concept_challenge2_2018_callout: {} courseE_artist_concept_challenge2_2019_callout: {} diff --git a/i18n/locales/source/dashboard/display_name.yml b/i18n/locales/source/dashboard/display_name.yml index 488df8a0b63f4..416ba0919a398 100644 --- a/i18n/locales/source/dashboard/display_name.yml +++ b/i18n/locales/source/dashboard/display_name.yml @@ -1157,6 +1157,7 @@ en: U5-AP-Algorithm-Does-It-Count_2018: AP Practice Response - Score the Response U5-AP-Algorithm-Does-It-Count_2019: AP Practice Response - Score the Response U7 L01 More with Functions: 'Conditionals: Boolean Expressions' + U7 L05 Exit Ticket: Check Your Understanding Using Accelerometer Events_2018: Using Accelerometer Events Using Accelerometer Events_2019: Using Accelerometer Events 'Video: Intro to CSS Part 2_2018': 'Video: Intro to CSS Part 2' diff --git a/i18n/locales/source/dashboard/long_instructions.yml b/i18n/locales/source/dashboard/long_instructions.yml index 6aadf222123c9..c8d981ae1550b 100644 --- a/i18n/locales/source/dashboard/long_instructions.yml +++ b/i18n/locales/source/dashboard/long_instructions.yml @@ -3,6 +3,7 @@ en: data: long_instructions: "'pre-assessment survey q25A'": 'If yes, what computer science course(s) had you taken before your current computer science class? ' + "(joshl) Dance Party 1-validated_2019": "**Make a prediction:** Here’s a sprite that looks like a blue alien! \n\nWhat do you think will happen when you click on it? " 2-3 Artist 1 new: Hi, I'm an artist. You can write code to make me draw almost anything. Use a few blocks to make me draw over the grey lines in the picture. (Each line is 100 pixels long) 2-3 Artist 11: 'Give the stop sign a border by making an octagon with 100 pixels sides. ' 2-3 Artist 12: "Create a circle to finish the eyeball! \n\nIf the artist turns 1 degree with each loop, how many times do you need to repeat the code to draw a circle? " @@ -275,8 +276,8 @@ en: Alien Defender_2018: "**Project Idea**: Make a defender game in Play Lab!" AllTheThings Applab - Turtle move with button: "# Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and would be annoying to do for the allthethings script).\n\n# Your First Interactive App!\n\n A new group of commands has been added to the toolbox called **UI Controls** (User Interface Controls) which are commands that let you interact with, and respond to, the user of your app. To keep it simple, we'll start with just two commands: \n\n- `onEvent` which let's you run a function in response to some event occuring (such as a button click)\n- `button` which puts a button on the screen\n\n# Do This\n\nYou will replicate the small app, shown below, which makes the turtle move with a button click. You will do three things:\n\n- Add a `button`\n- Add an `onEvent` block\n- Add `moveForward` inside the the onEvent function block\n\nHere's what you should do - you can come back to watch this as many times as you need to get it right.\n" AllTheThings Applab DesignModeDefault: "\n\n## You try it -- Text Password Checker\n\n**Key idea**: You can use `==` to compare strings as well as numbers. \n\n- Let's use an if-statement in an event handler to compare text that a user inputs in a UI element.\n\n**The setup:**\n\n- Note the setup in Design Mode\n- There are two images: a red lock, and a green \"unlock\".\n- The green \"unlock\" is _hidden_ at the start.\n\n## Do this:\n\n**Add an if-statement to the event handler to check the password and display the \"unlock\" only if the password is correct** \n\n- You can use `==` to compare the text you get from the *password\\_input* text box and a string you want to use as the password. The boolean expression you should use should look like this:\n\n[][0]\n\n- If the user entered the correct password then **show** the green \"unlock\" and **hide** the red lock.\n - We've provide the code to hide and show the images. You just need to add the if-statement.\n- Otherwise do nothing. They can try again." - 'AllTheThings: Pixelation - Lesson 14 - Make the Letter A': "\n # Task 1: Make a 3x5 letter 'A'\n Start by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n \n The image is intially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A.\n " - 'AllTheThings: Pixelation - Lesson 15 - Color Shades 4x4': "# Pixelation: Task 3\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using _12-bits per pixel_. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n- Row 1 - fill with shades of red. \n- Row 2 - shades of green. \n- Row 3 - shades of blue. \n- Row 4 - shades of gray." + 'AllTheThings: Pixelation - Lesson 14 - Make the Letter A': "\n # Task 1: Make a 3x5 letter 'A'\n Start by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n \n The image is intially setup with the *incorrect* dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A.\n " + 'AllTheThings: Pixelation - Lesson 15 - Color Shades 4x4': "# Pixelation: Task 3\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using _12-bits per pixel_. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n- Row 1 - fill with shades of red. \n- Row 2 - shades of green. \n- Row 3 - shades of blue. \n- Row 4 - shades of gray." 'AllTheThings: Pixelation - Lesson 15 - Complete 3-bit color': "# Color Pixelation: Task 1\n\n**Directions:**\n\n- We start you with the 4x2 image Maddie was creating, but we've left out the last two squares. \n- Finish off the image by figuring out which two colors are missing and encode them." App Lab test: Innovation Project AppLab Intro 1 - Add Button: "# Getting Started - Add a button\n\nYou'll need a button on your home screen to go to your new screen. You can make a new button in two ways. \n\n1. If you like the style of the \"Dogs\" button you can make a copy of it. Click the button and then click \"Duplicate\".\n\n [][0]\n\n2. You can also make a new button from scratch by dragging it in from the Design Toolbox.\n\n [][1]\n\n3. Click and drag to move your new button where you want it.\n\n4. Once you have a new button give it a clear name, \"catButton\". You can also change its text to read \"Cats!\".\n\n [][2]\n\n5. There's lots of other ways you can change the look of your button. Experiment with the full menu of options.\n\n6. Once you're done run your app to make sure your button appears. Then click \"Finish\" to move on to learn how to make your button actually work." @@ -767,13 +768,13 @@ en: **Stuck? Click here:** [expandable][0] AppLab_test02: "# This is the title\n\n- bullet 1 \n- do this\n- then this\n\n[][0]" Applab AllTheThings ResourcesTab AllResources: |- - + Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. What does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end. - + # Do This: @@ -781,13 +782,13 @@ en: Once you think you have a solution, click the Finish button - it will appear once you run the program. Applab AllTheThings ResourcesTab MapReference: |- - + Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. What does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end. - + # Do This: @@ -795,13 +796,13 @@ en: Once you think you have a solution, click the Finish button - it will appear once you run the program. Applab AllTheThings ResourcesTab ReferenceLinks: |- - + Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. What does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end. - + # Do This: @@ -1842,15 +1843,15 @@ en: - Fix the broken code so that the web page displays correctly - Compare the problems you fixed with a neighbor CSD U2 Header Demo: "# Headers\n\n
\n
\n\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headers?**\n\n\nHeaders come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest header. The smallest header is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nSo far, you've organized your content into paragraphs. Another way HTML allows you to organize your code is by using **headers**. A header is a short piece of text that goes at the top of a section of content, like a title.\n\nDo This:\n\n- Find the headers in the web page below and use the inspector tool to see that code that makes them.\n- Make sure you and your partner agree on what the tags do.\n- Change the code so that \"Drawing\" and \"2 years\" match the headers on the rest of the page." - CSD U2 Header Sizes: "# Header Sizes\n\n
\n
\n\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headers?**\n\n\nHeaders come in 6 different sizes. The most common header is <h1> The number 1 in the HTML tag designates that this is the biggest header. The smallest header is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nHeaders can come in different sizes. In this page, there are six different sized headers, but they are all mixed up. Can you and your partner figure out how to fix them?\n\nDo This:\n\n- Use the inspector tool to figure out what makes the headers different sizes\n- Make sure you and your partner agree on what the different header tags do.\n- Change the tags so that the headers are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n" + CSD U2 Header Sizes: "# Header Sizes\n\n
\n
\n\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headers?**\n\n\nHeaders come in 6 different sizes. The most common header is <h1> The number 1 in the HTML tag designates that this is the biggest header. The smallest header is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nHeaders can come in different sizes. In this page, there are six different sized headers, but they are all mixed up. Can you and your partner figure out how to fix them?\n\nDo This:\n\n- Use the inspector tool to figure out what makes the headers different sizes\n- Make sure you and your partner agree on what the different header tags do.\n- Change the tags so that the headers are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n" CSD U2 Header Test: "# Headers and Paragraphs\n\n
\n
\n\n\n\n**What is a paragraph element?**\n\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headers or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.\n
\n
\n\n\n**How do I create multiple paragraphs?**\n\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `

` tags. For example\n

\n\t<p>\n    \tThis is a paragraph.\n    </p>\n\t<p>\n    \tThis is another paragraph.\n    </p>\n
\n
\n
\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headers?**\n\n\nHeaders come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest header. The smallest header is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nThe author of this page added in a lot of content, but did not think about structure. All of the text is mashed together.\n\nDo This:\n\n- Look through the content with your partner and decide what you think the best structure should be.\n- Use your header and paragraph tags to code the structure into the page." CSD U2 Headers: "
\n
\n\n\n\n**What are headers?**\n\n\nHeaders are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I create a header?**\n\n\nYou can make something a header element by surrounding it by header tags. For example:\n
 <h1> Header Text </h1>


\n\nNotice how there is a the opening tag (\\

) and closing tag (\\

). The closing tag is the same as the opening tag except it has `/` after the opening angle bracket. The text you want to show as the header goes in the middle of the two tags.\n\n
\n
\n\n\n**What is HTML?**\n\n\nStands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nA piece of a website. Marked by a start tag and sometimes closed with an end tag. Also includes the content of the element as well. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\nThe special set of characters that tells the machine where the start or end of an HTML element is and what type it is. HTML tags add structure to the content of a web page.\n
\n
\n\n\n**Why do you need an opening and closing tag?**\n\n\n\nYou need both an opening and closing tag for many HTML elements because it marks where that structure starts and stops. You don't want all the text on your web page to be a title.\n\n
\n
\n\n# Headers\n\nYou may have noticed on the last level that everything you type into the editor is getting smashed together. In order to differentiate between these different parts we use HTML elements to mark the different parts of a web page. In your investigation with the inspector did you come across something that made headers?\n\n# Do This\n\n- Make your header \"Animals\" stand out using the `

` header element." CSD U2 Heading Demo: "# Headings\n\n
\n
\n\nWhat are headings?\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n\n
\n
\nHow do I make different sized headings?\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one: \\

. The number '1' in the HTML tag designates that this is the biggest heading. The smallest heading is \\

. You can also try the \\

, \\

, \\

, and \\

tags, which get smaller as the number gets larger.\n\n
\n
\n
\nWhat is HTML?\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n\n
\n
\nWhat is an HTML element?\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n\n
\n
\nWhat is an HTML tag?\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nSo far, you've organized your content into paragraphs. Another way HTML allows you to organize your code is by using **headings**. A heading is a short piece of text that goes at the top of a section of content, like a title.\n\nDo This:\n\n- Find the headings in the web page below and use the Inspector Tool to see the code that makes them.\n- Make sure you and your partner agree on what the tags do.\n- Change the code so that \"Drawing\" and \"2 years\" match the headings on the rest of the page." CSD U2 Heading Demo_2018: "# Headings\n\n
\n
\n\n\n\n**What are headings?**\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headings?**\n\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one: <h1>. The number '1' in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags, which get smaller as the number gets larger.\n

\n\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nSo far, you've organized your content into paragraphs. Another way HTML allows you to organize your code is by using **headings**. A heading is a short piece of text that goes at the top of a section of content, like a title.\n\nDo This:\n\n- Find the headings in the web page below and use the Inspector Tool to see the code that makes them.\n- Make sure you and your partner agree on what the tags do.\n- Change the code so that \"Drawing\" and \"2 years\" match the headings on the rest of the page." CSD U2 Heading Demo_2019: "# Headings\n\n
\n
\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one: <h1>. The number '1' in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags, which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nSo far, you've organized your content into paragraphs. Another way HTML allows you to organize your code is by using **headings**. A heading is a short piece of text that goes at the top of a section of content, like a title.\n\n# Do This:\n\n- Find the headings in the web page below and use the Inspector Tool to see the code that makes them.\n- Make sure you and your partner agree on what the tags do.\n- Change the code so that \"Drawing\" and \"2 years\" match the headings on the rest of the page." - CSD U2 Heading Sizes: "# Heading Sizes\n\n
\n
\n\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\nDo This:\n\n- Use the inspector tool to figure out what makes the headings different sizes\n- Make sure you and your partner agree on what the different heading tags do.\n- Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n" - CSD U2 Heading Sizes_2018: "# Heading Sizes\n\n
\n
\n\n\n\n**What are headings?**\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headings?**\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\nDo This:\n\n- Use the inspector tool to figure out what makes the headings different sizes\n- Make sure you and your partner agree on what the different heading tags do.\n- Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n" - CSD U2 Heading Sizes_2019: "# Heading Sizes\n\n
\n
\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\nDo This:\n\n- Use the inspector tool to figure out what makes the headings different sizes\n- Make sure you and your partner agree on what the different heading tags do.\n- Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n" + CSD U2 Heading Sizes: "# Heading Sizes\n\n
\n
\n\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\nDo This:\n\n- Use the inspector tool to figure out what makes the headings different sizes\n- Make sure you and your partner agree on what the different heading tags do.\n- Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n" + CSD U2 Heading Sizes_2018: "# Heading Sizes\n\n
\n
\n\n\n\n**What are headings?**\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\n\n**How do I make different sized headings?**\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\n\n**What is HTML?**\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\n\n**What is an HTML element?**\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\n\n**What is an HTML tag?**\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\nDo This:\n\n- Use the inspector tool to figure out what makes the headings different sizes\n- Make sure you and your partner agree on what the different heading tags do.\n- Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n" + CSD U2 Heading Sizes_2019: "# Heading Sizes\n\n
\n
\n\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. The most common heading is <h1> The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\nWhat is an HTML tag?\n\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nHeadings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?\n\nDo This:\n\n- Use the inspector tool to figure out what makes the headings different sizes\n- Make sure you and your partner agree on what the different heading tags do.\n- Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below. \n\n" CSD U2 Heading Test: "# Headings and Paragraphs\n\n
\n
\n\nWhat is a paragraph element?\n\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headings or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.\n\n
\n
\nHow do I create multiple paragraphs?\n\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `

` tags. For example\n\n

\n<p>\n  This is a paragraph.\n</p>\n<p>\n  This is another paragraph.\n</p>\n
\n\n
\n
\nWhat are headings?\n\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n\n
\n
\nHow do I make different sized headings?\n\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one \\

. The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is \\

. You can also try the \\

, \\

, \\

, and \\

tags which get smaller as the number gets larger.\n\n
\n
\nWhat is HTML?\n\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n\n
\n
\nWhat is an HTML element?\n\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example:\n\n\n\n
\n
\nWhat is an HTML tag?\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nThe author of this page added in a lot of content, but did not think about structure. All of the text is mashed together.\n\nDo This:\n\n- Look through the content with your partner and decide what you think the best structure should be.\n- Use your heading and paragraph tags to code the structure into the page." CSD U2 Heading Test_2018: "# Headings and Paragraphs\n\n
\n
\n\nWhat is a paragraph element?\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headings or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.\n\n
\n
\n\nHow do I create multiple paragraphs?\n\n\n\nParagraphs are marked by opening (`

`) and closing (`

`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `

` tags. For example\n\n

\n    <p>\n        This is a paragraph.\n    </p>\n    <p>\n        This is another paragraph.\n    </p>\n
\n\n
\n
\n\nWhat are headings?\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\nHow do I make different sized headings?\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\nWhat is HTML?\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\nWhat is an HTML element?\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\nWhat is an HTML tag?\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nThe author of this page added in a lot of content, but did not think about structure. All of the text is mashed together.\n\nDo This:\n\n- Look through the content with your partner and decide what you think the best structure should be.\n- Use your heading and paragraph tags to code the structure into the page." CSD U2 Heading Test_2019: "# Headings and Paragraphs\n\n
\n
\n\nWhat is a paragraph element?\n\nParagraphs are marked by opening(`

`) and closing(`

`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headings or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.\n\n
\n
\n\nHow do I create multiple paragraphs?\n\n\n\nParagraphs are marked by opening (`

`) and closing (`

`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `

` tags. For example\n\n

\n    <p>\n        This is a paragraph.\n    </p>\n    <p>\n        This is another paragraph.\n    </p>\n
\n\n
\n
\n\nWhat are headings?\n\nHeadings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so its easier for a user to read.\n
\n
\n\nHow do I make different sized headings?\n\nHeadings come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.\n
\n
\n\nWhat is HTML?\n\nHTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated. \n
\n
\n\nWhat is an HTML element?\n\nAn HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example: \n\n
\n
\n\nWhat is an HTML tag?\n\n\nAn HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.\n\n
\n
\n\nThe author of this page added in a lot of content, but did not think about structure. All of the text is mashed together.\n\nDo This:\n\n- Look through the content with your partner and decide what you think the best structure should be.\n- Use your heading and paragraph tags to code the structure into the page." @@ -12405,8 +12406,8 @@ en: [//]: #(https://images.code.org/63b04e63fc4bc21700b64ef3d6c6b8b7-image-1471475653020.png) CSD U3 abstraction decelerateX: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n- Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n- Discuss with your Partner: What do you think will happen when the car finally stops?\n\n_Challenge: Add code that makes the car slow down only if his velocityX is greater than 0._" - CSD U3 abstraction decelerateX_2018: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n- Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n- Discuss with your Partner: What do you think will happen when the car finally stops?\n\n_Challenge: Add code that makes the car slow down only if his velocityX is greater than 0._" - CSD U3 abstraction decelerateX_2019: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n- Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n- Discuss with your Partner: What do you think will happen when the car finally stops?\n\n_Challenge: Add code that makes the car slow down only if his velocityX is greater than 0._" + CSD U3 abstraction decelerateX_2018: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n- Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n- Discuss with your Partner: What do you think will happen when the car finally stops?\n\n_Challenge: Add code that makes the car slow down only if its velocityX is greater than 0._" + CSD U3 abstraction decelerateX_2019: "# Slowing Things Down\n\nNow that you've had some practice speeding things up, can you use the counter pattern to slow sprites down? \n\n# Do This\n\nThe car is going to run into the water! You'll need to use the counter pattern to slow it down.\n\n- Use the `sprite.velocityX` block with a counter pattern to slow the car down by 0.25 as it moves across the screen. \n- Discuss with your Partner: What do you think will happen when the car finally stops?\n\n_Challenge: Add code that makes the car slow down only if its velocityX is greater than 0._" CSD U3 abstraction decelerateY: |- # Simulating Gravity @@ -16840,23 +16841,19 @@ en: CSD U6 analog data_2018: |- # Data Event - Each of these analog sensors emits a special event called "data" which occurs every time new data comes in from the sensor. Using this event, we can write programs that continually update. + Each of these analog sensors emits a special event called "data" which occurs every time new data comes in from the sensor. Using this event, you can rewrite the first program you worked on in this lesson so that it continually updates. # Do This - This is the first program you worked on in this lesson, let's see if we can make it continually update the sound reading using the "data" event. - - Create an event handler to respond to sound sensor's "data" event - Move the existing code into your event handler CSD U6 analog data_2019: |- # Data Event - Each of these analog sensors emits a special event called "data" which occurs every time new data comes in from the sensor. Using this event, we can write programs that continually update. + Each of these analog sensors emits a special event called "data" which occurs every time new data comes in from the sensor. Using this event, you can rewrite the first program you worked on in this lesson so that it continually updates. # Do This - This is the first program you worked on in this lesson, let's see if we can make it continually update the sound reading using the "data" event. - - Create an event handler to respond to sound sensor's "data" event - Move the existing code into your event handler CSD U6 analog light: |- @@ -27240,7 +27237,7 @@ en: # Do This: - Add a variable that **counts the number of heads (1's)** and write its value to the screen after each flip. - - Run your program severals times **and validate that the number of heads recorded is correct** by visually checking the flips you've printed to the screen. + - Run your program several times **and validate that the number of heads recorded is correct** by visually checking the flips you've printed to the screen. - **Hint:** you will also need to store your current coin flip in a variable to complete this challenge. [][0] @@ -27252,7 +27249,7 @@ en: # Do This: - Add a variable that **counts the number of heads (1's)** and write its value to the screen after each flip. - - Run your program severals times **and validate that the number of heads recorded is correct** by visually checking the flips you've printed to the screen. + - Run your program several times **and validate that the number of heads recorded is correct** by visually checking the flips you've printed to the screen. - **Hint:** you will also need to store your current coin flip in a variable to complete this challenge. [][0] @@ -29999,7 +29996,7 @@ en: "blue alien" - to a different one that will make the alien start spinning around! + to a different one that will make the alien start spinning! Dance Party 2_simple: "The alien can only move left and right.\n\nChange the behavior inside the \n \n \n alien1\n \n \n block to make the alien start turning. " Dance Party 3 - Validated: "Create a new sprite called `alien2`. \n\nMake it do a different dance move when it's clicked. " Dance Party 3: "Create a new sprite called `alien2`. \n\nMake it do a different dance move when it's clicked. " @@ -30013,21 +30010,21 @@ en: When the new sprite is clicked, it should do something. Dance Party 4 Validated: "Create a third sprite called `alien3`. \n\nCan you set all of your aliens to stand in a straight line? It's an alien dance crew!" Dance Party 4: "Create a third sprite called `alien3`. \n\nCan you set all of your aliens to stand in a straight line? It's an alien dance crew!" - Dance Party 4_2019: |- - Create a third sprite that looks like a yellow alien. - - Can you set all of your aliens to stand in a straight line? It's an alien dance crew! + Dance Party 4_2019: "Form an alien dance crew! \n\n- Create a third sprite that looks like a yellow alien, and make it begin a new dance when clicked.\n- Set all of your aliens to stand in a horizontal line, like this:\n\n[][0]" Dance Party 4_simple: "Create a third sprite called `alien3`. \n\nPlace all of your aliens in a straight line. It's an alien dance party!" Dance Party 5 - Validated: "We can change all kinds of things in this program when you click on the sprites. Let’s change their color! \n\n**Add code to change the color of each alien when it gets clicked.**" Dance Party 5: "We can change all kinds of things in this program when you click on the sprites. Let’s change their color! \n\n**Add code to change the color of each alien when it gets clicked.**" - Dance Party 5_2019: "We can change all kinds of things in this program when you click on the sprites. Let’s change their color! \n\n**Add code to change the color of each alien when it gets clicked.**" + Dance Party 5_2019: We can change all kinds of things in this program when you click on the sprites. Add code to change the color of each alien when it gets clicked. Dance Party 5_simple: |- You can change many things in this program. Add code to change the color of each alien when it gets clicked. Dance Party 6 - Validated: "These aliens are running wild! \n\nUse the \n \n block to make each alien stop moving when it is clicked." Dance Party 6: "These aliens are running wild! \n\nUse the \n \n block to make each alien stop moving when it is clicked." - Dance Party 6_2019: "These aliens are running wild! \n\nUse the \"blue alien\"block to make each alien stop moving when it is clicked." + Dance Party 6_2019: |- + These aliens are running wild! + + Use "blue alien" to make each alien stop moving when it is clicked. Dance Party 6_simple: "These aliens are too busy! \n\nUse the \n \n block to make each alien stop moving when it is clicked." Dance Party 7 - Validated: "Finally, add a new bell sprite called `myBell`. \n\nWhen you click on it, make all the aliens start doing the same dance move!" Dance Party 7: "Finally, add a new bell sprite called `myBell`. \n\nWhen you click on it, make all the aliens start doing the same dance move!" @@ -30054,6 +30051,18 @@ en: Dance Party Predict: "**Make a prediction:** Here’s a sprite called `alien1`! \n\nWhat do you think will happen when you click on it? " Dance Party Predict_2019: "**Make a prediction:** Here’s a sprite that looks like a blue alien! \n\nWhat do you think will happen when you click on it? " Dance Party Predict_simple: "**What do you think?** \n\nHere’s a sprite called `alien1`! \n\nWhen you click on it, what will it do? " + Dance Party Template 1_2019: |- + The alien was proud of its dancing skills on Mars, but now it can only move side-to-side. + + Replace the behavior block in + + + + "blue alien" + + + to a different one that will make the alien start spinning around! + Dance Party Template 2_2019: Template Dance_Events_Example_Video: Use events to make your dance party interactive! Dance_Party_01: |- _Let's have a dance party!_ @@ -30568,7 +30577,7 @@ en: Fish Tank 1-validated_simple: "**What do you think?**: When you run this code, what will it do?" Fish Tank 1: "**Make a prediction**: What do you think will happen when you run this code?" Fish Tank 2-validated: "Let's make a fish tank! \n\nChange Dusty (the tumbleweed) to a fish." - Fish Tank 2-validated_2019: "Let's make a fish tank! \n\nChange Dusty (the tumbleweed) to a fish." + Fish Tank 2-validated_2019: "Let's make a fish tank! \n\nChange the tumbleweed sprite into any kind of fish by clicking \"tumbleweed\".\n\nBe sure to also update this sprite's costume in ." Fish Tank 2-validated_simple: Change Petal (the flower) to a fish. Fish Tank 2: We're going to make a fish tank. Change the Dusty the tumbleweed to a fish. Fish Tank 3-validated Ram: "The fish is getting dizzy! \n\nChange the fish's behavior so that it swims around the tank." @@ -31915,33 +31924,33 @@ en: This pixelation level demonstrates the use of the "Hide sliders" option. Notice that the width and height sliders are not available, and the width and height fields are not editable. Pixelation - Lesson 14 - Fix bit offset v.2: 'Something happened to the bits in this image! Find the error and fix it! Hint: a few extra bits were added. You should only need to remove some bits.' - Pixelation - Lesson 14 - Fix bit offset: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. " - Pixelation - Lesson 14 - Fix bit offset_2018: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. " - Pixelation - Lesson 14 - Fix bit offset_2019: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. " + Pixelation - Lesson 14 - Fix bit offset: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. " + Pixelation - Lesson 14 - Fix bit offset_2018: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. " + Pixelation - Lesson 14 - Fix bit offset_2019: "# Oh no! An image got messed up during transmission!\n\n\n\n**The problem:** A single extra bit was inserted into the stream of bits that make up the C of the Code.org logo.
That extra bit bumps all of the other bits down the line which makes the logo look messed up.\n
**Your task:** Hunt down the extra bit and remove it to fix the Code.org logo. \n
**HINT:** One bit early on would make it look like many bits were out of order. " Pixelation - Lesson 14 - Fix the error: 'Something happened to the bits in this image! Find error and fix it! Hint: a few extra bits were added. You should only need to remove some bits.' - Pixelation - Lesson 14 - Make the Letter A: "\n\n# Task 1: Make a 3x5 letter 'A'\n\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the _incorrect_ dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." - Pixelation - Lesson 14 - Make the Letter A_2018: "\n\n# Task 1: Make a 3x5 letter 'A'\n\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the _incorrect_ dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." - Pixelation - Lesson 14 - Make the Letter A_2019: "\n\n# Task 1: Make a 3x5 letter 'A'\n\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the _incorrect_ dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." + Pixelation - Lesson 14 - Make the Letter A: "\n\n# Task 1: Make a 3x5 letter 'A'\n\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the _incorrect_ dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." + Pixelation - Lesson 14 - Make the Letter A_2018: "\n\n# Task 1: Make a 3x5 letter 'A'\n\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the _incorrect_ dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." + Pixelation - Lesson 14 - Make the Letter A_2019: "\n\n# Task 1: Make a 3x5 letter 'A'\n\nStart by trying to recreate the 3x5 letter \"A\" depicted (at right) using the pixelation widget. \n\nThe image is initially setup with the _incorrect_ dimensions. Your first task is to set the second byte to the 8-bit binary code for 5: 0000 0101. Then you can start entering pixel data to make the A." Pixelation - Lesson 14 - Make your own B and W Image: "# Make your own image of any size\n\n[][0]\n[][1]\n[][2]\n[][3]\n[][4]\n[][5]\n[][6]\n\n**Directions:**\n\n- Encode an image of anything you like.\n- You might want to do some planning and sketching with graph paper first.\n- DO NOT simply make an abstract pattern, like a checkerboard. \n- Depict something, perhaps your name written out, your initials, an icon or logo of some sort.\n- Get creative! The image doesn't have to be a perfect square, it can be long and skinny.\n- Optional: for fun, send your image bits to a friend using the sending bits widget. _(note: this is just a link to the sending formatted text level from a couple of classes ago)_" - Pixelation - Lesson 15 - Color Free Play: "# Personal Favicon\n\n**Requirements:**\n\n\n- The icon must be 16x16 pixels. \n- You must use the Pixelation Widget to encode the bits of color information.\n- The image must be encoded with at least 12 bits per pixel." - Pixelation - Lesson 15 - Color Shades 4x4: "# Pixelation: Task 3\n\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using _12-bits per pixel_. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n- Row 1 - fill with shades of red. \n- Row 2 - shades of green. \n- Row 3 - shades of blue. \n- Row 4 - shades of gray." - Pixelation - Lesson 15 - Color Shades 4x4_2018: "# Pixelation: Task 3\n\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using _12-bits per pixel_. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n- Row 1 - fill with shades of red. \n- Row 2 - shades of green. \n- Row 3 - shades of blue. \n- Row 4 - shades of gray." - Pixelation - Lesson 15 - Color Shades 4x4_2019: "# Pixelation: Task 3\n\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using _12-bits per pixel_. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n- Row 1 - fill with shades of red. \n- Row 2 - shades of green. \n- Row 3 - shades of blue. \n- Row 4 - shades of gray." + Pixelation - Lesson 15 - Color Free Play: "# Personal Favicon\n\n**Requirements:**\n\n\n- The icon must be 16x16 pixels. \n- You must use the Pixelation Widget to encode the bits of color information.\n- The image must be encoded with at least 12 bits per pixel." + Pixelation - Lesson 15 - Color Shades 4x4: "# Pixelation: Task 3\n\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using _12-bits per pixel_. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n- Row 1 - fill with shades of red. \n- Row 2 - shades of green. \n- Row 3 - shades of blue. \n- Row 4 - shades of gray." + Pixelation - Lesson 15 - Color Shades 4x4_2018: "# Pixelation: Task 3\n\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using _12-bits per pixel_. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n- Row 1 - fill with shades of red. \n- Row 2 - shades of green. \n- Row 3 - shades of blue. \n- Row 4 - shades of gray." + Pixelation - Lesson 15 - Color Shades 4x4_2019: "# Pixelation: Task 3\n\n\n\n**Directions:**\nWe start you out with the 4x4 image Maddie created in the video.\n\nYour task is to fill a 4x4 grid with colors using _12-bits per pixel_. The result should look something like (but not exactly) the image shown at right. \n\nHere are the requirements:\n\n- Row 1 - fill with shades of red. \n- Row 2 - shades of green. \n- Row 3 - shades of blue. \n- Row 4 - shades of gray." Pixelation - Lesson 15 - Color Shades: |- # Color Pixelation: Task 2 **Directions:** - We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! + We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! Pixelation - Lesson 15 - Color Shades_2018: |- # Color Pixelation: Task 2 **Directions:** - We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! + We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! Pixelation - Lesson 15 - Color Shades_2019: |- # Color Pixelation: Task 2 **Directions:** - We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! + We start you out with the row of shades of red that Maddie created in the video. Experiment with 6-bit color by filling in the bottom row of the image with shades of a different color. Here is an example with some shades of blue. Try your own color! Pixelation - Lesson 15 - Complete 3-bit color: "# Color Pixelation: Task 1\n\n**Directions:**\n\n- We start you with the 4x2 image Maddie was creating, but we've left out the last two squares. \n- Finish off the image by figuring out which two colors are missing and encode them." Pixelation - Lesson 15 - Complete 3-bit color_2018: "# Color Pixelation: Task 1\n\n**Directions:**\n\n- We start you with the 4x2 image Maddie was creating, but we've left out the last two squares. \n- Finish off the image by figuring out which two colors are missing and encode them." Pixelation - Lesson 15 - Complete 3-bit color_2019: "# Color Pixelation: Task 1\n\n**Directions:**\n\n- We start you with the 4x2 image Maddie was creating, but we've left out the last two squares. \n- Finish off the image by figuring out which two colors are missing and encode them." @@ -31982,13 +31991,13 @@ en: Play Lab Rocket 3: Awesome, now can you update that function so that our rocket moves more quickly? Make sure to update the purpose statement, examples, and function definition to launch a rocket at 40 meters per second. Play Lab Rocket Free Play: 'Free Play: Experiment with your `rocket-height` function to make the rocket fly in different ways. Click "Finish" when you are done.' Poorva copy U3L2 Using Simple Commands: |- - + Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. What does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end. - + # Do This: @@ -32252,11 +32261,11 @@ en: NOTE: your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions. [][0] - SG U3L03 - draw step: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n- Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n- If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n- We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n- First let's **define** a function that _draws just one of these zig-zag steps._ We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** and call a function named `drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\nYou'll use four subgoals for this. First, you'll **define a function** (`//Define function`), which will include **moving the turtle** (`//Move turtle`) and **orienting the turtle** (`//Orient turtle`). Last, don't forget to **call the function** (`//Call function`). If you get stuck, plan your solution with subgoals.\n\n[][0]" + SG U3L03 - draw step: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n- Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n- If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n- We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n- First let's **define** a function that _draws just one of these zig-zag steps._ We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** and call a function named `drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\nYou'll use four subgoals for this. First, you'll **define a function** (`//Define function`), which will include **moving the turtle** (`//Move turtle`) and **orienting the turtle** (`//Orient turtle`). Last, don't forget to **call the function** (`//Call function`). If you get stuck, plan your solution with subgoals.\n\n[][0]" SG U3L03 Define and use turnAround: "# Do This:\n\n**Define** a function called `turnAround()` which turns the turtle around. Once you've defined the function **call** it to make sure it works as you expect and then move the turtle forward, as shown below. \n\n[][0]\n\n**Remember** typically, you call a function in lines of code _above_ the function definition - this might make you feel like you are working in reverse, since you first write the code to define the function and _then_ add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\n\n[][1]\n\nYou'll use four subgoals to solve this problem (sort of). First you'll `//Define function`, which will include `//Orient turtle`. As you will start to see, even subgoals can be broken down into subgoals sometimes. This will be helpful when you start creating more complex functions. \n\nThen you'll `//Call function` and `//Move turtle`.\n\nDon't forget to name your functions." SG U3L03 Draw a T using turnAround: "# Do This:\n\nGet some more practice **calling** a function by using `turnAround()` along with your old friend the `moveForward()` function to create a plus sign that is centered at the turtle's first position, as shown below. Even though you just wrote this function, we've already **defined** `turnAround()` for you. \n\nRemember, add lines of code that call the function _above_ the definition. The function definition is after the function call to support **abstraction**. If you don't need to know how the function works inside, you never have to look at it, you can just call it.\n\n_NOTE: the turtle should end where it started, which is also the middle of the plus sign, as shown below. Each of the four segments of the plus sign are one `moveForward()` long._ \n\n[][0]\n\nYou'll use three subgoals for this problem: `//call function`, `//orient turtle`, and `//move turtle`. Defining the function is already done for you. We've put subgoals for the first few steps in already. Plan the rest of the code with subgoal blocks (in the **Goals** tab) to get the most efficient path before filling it in with blocks." SG U3L03 Free Response Wrap Up: In your own words, explain at least one reason why programming languages have functions. Include an example of something you did in this lesson that demonstrates the reason you describe. - SG U3L03 Three Steps: "# Do This:\n\n\n\nWe are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond.\nIf you look at the whole image we are trying to draw, you'll notice that each of the 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange).\n\nRight now we'll write the code for one of those sides. So...\n\n**Define** a new function named `drawSide()` which makes three calls in a row to `drawStep()` followed by a `moveForward()` and a `right()`. \n\n**Replace** the original function call to `drawStep()` with a call to your newly defined `drawSide()` function. \n\nThe diagrams below show the intended actions.\n\n[][0]\n[][1]\n\nTo solve this puzzle, you’ll use three subgoals. You’ll **Define the function** (`//Define function`), which will include **calling** 2 different functions (`//Call function`) and **moving the turtle** (`//Move turtle`). Then you'll **call the function** (`//Call function`) that you defined." + SG U3L03 Three Steps: "# Do This:\n\n\n\nWe are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond.\nIf you look at the whole image we are trying to draw, you'll notice that each of the 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange).\n\nRight now we'll write the code for one of those sides. So...\n\n**Define** a new function named `drawSide()` which makes three calls in a row to `drawStep()` followed by a `moveForward()` and a `right()`. \n\n**Replace** the original function call to `drawStep()` with a call to your newly defined `drawSide()` function. \n\nThe diagrams below show the intended actions.\n\n[][0]\n[][1]\n\nTo solve this puzzle, you’ll use three subgoals. You’ll **Define the function** (`//Define function`), which will include **calling** 2 different functions (`//Call function`) and **moving the turtle** (`//Move turtle`). Then you'll **call the function** (`//Call function`) that you defined." SG U3L03 define turnRight and draw a rectangle: "# Draw a rectangle with right\n\nAs you know, in order to turn right we have to call `turnLeft()` three times. We've started you out with a stub that **defines** a function called `right()`. Start by adding code inside the function definition that will turn the turtle to the right (by turning left three times) when called. \n\nThen **use** this function in some code to draw a rectangle, as shown below. Make sure the turtle ends facing the same direction and in the same location it started. The rectangle below is 2 `moveForward`s tall and 1 `moveForward` wide.\n\n[][0]\n\n**Note**: Your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions.\n\nYou'll use three subgoals to solve the problem: `//Orient turtle`, `//Move turtle`, and `//Call function`. `//Define function` is already done for you. Notice that we haven't filled the subgoals in for you (for the right function or drawing the rectangle). If you are having trouble finding the solution, plan your approach with subgoals before filling it in with blocks. If you're not having trouble, feel free to skip the subgoals." SG U3L03 draw diamond: "# Do This:\n\nWe're finally ready to make our diamond! **Define** a function named `function drawDiamond()` that **calls** `drawSide()` multiple times in order to complete the drawing. Your final solution should be triggered by **a single call** to `drawDiamond()`. \n\n\n\n\n\n\n
\n\n
\n\n**Notes**:\n\nIn the end you will have 4 functions defined:\n\n- drawDiamond()\n- drawSide()\n- drawStep()\n- right()\n\nThese 4 functions work sort of like a hierarchy of top-down design. At the top is `drawDiamond()` which makes calls to `drawSide()`, which makes calls to `drawStep()` and `right()`.\n\nFor most programming problems that you face, the problem won't be broken down into pieces like it was for this series of puzzles. You'll have to figure out your own hierarchy of functions based on which patterns you want to use multiple times. This is why planning your solution ahead of time can make your code more efficient. \n\nSubgoals will help you do this. Once you recognize that the diamond can be drawn using the same function repeated 4 times, you can note with a subgoal comment that you'll need to define and call a function for `drawSide()`. Then you can figure out that one side can be drawn using the same function 3 times plus a couple of steps, you can make note to define and call `drawStep()`. Once you've planned the solution, you can fill in blocks to complete it." SG U3L04 - 3 by 3 with functions: |- @@ -32614,8 +32623,8 @@ en: SG U3L08 Assessment2: "“Abstraction” is often used to focus on a general case and ignore a specific instance of a problem. \n\nGiven this meaning of the word, how are functions with parameters an example of abstraction?" SG U3L08 comments: "# Commenting code for yourself and for collaboration\n\nProgrammers write comments into their code for two main reasons: (1) sharing code with other programmers (2) remembering their own thoughts or plans for code they write. \n\nFor both cases a programmers **write comments into their code to explain their thinking to the reader.**\n\nThe subgoal comments you've seen are a specific type of commenting meant to help you learn. As you get more experience programming, comments you write can be in addition to, or simply replace your subgoal comments.\n\n
More: Why write comments?\n
\n

\nWhen sharing code with others, comments are useful to point out sections of code you might want help with, or to explain a complicated section of code that's hard to reason about. It's useful for example to write a comment like: //This function assumes that the fish have already been drawn because it helps the reader understand when, where, why that section of code might be executed.\n

\n

\n

\nWhen writing comments for yourself, it might be a note about how you plan to solve a problem, or jotting down the reason you did something to remind yourself later when you come back to it. For example you might write a comment like: //to do: make a function to handle this code below\n

\n

\n Many programmers, when starting from scratch, like to write out a high level plan for the code they want to write in comments, and then go in starting writing code to fill in the plan. This is particularly useful if you're facing a large problem that needs to be broken down into parts. You can think about the big picture to start and write out a strategy in comments so you don't forget it later -- which happens -- because once you start writing code you'll run into lots of micro-hurdles that might take time to solve or work out the bugs and you need your brain space to work on those. A plan for drawing an under the sea scene might look like this:\n

\n    // setup for drawing\n    // draw background with color and bubbles\n    // draw all the fish\n    // draw all the seagrass\n    // draw bubbles again\n
\n

\n
\n
\n\n# Do This\n\n**Add your own comments** to the code that you've been working on. Imagine that you are describing the purpose of the code to one of your classmates. Or find the most complicated part and try to explain it.\n\nThe way that you add comments is with the `// Comment` block, which is in the **Functions** tab of the toolbox.\n\n**See how:** [expandable][0]" SG U3L08 how to add comments: "# Now you try it - Add a comment\n\nThe starting code provided has some comments already in it.\n\n# Do This\n\nInsert a comment that says `// Draw a starfish at specific location` just above the section of code that will draw the starfish. \n\nThe way that you add comments is with the `// Comment` block, which is in the **Functions** tab of the toolbox ([Show me][0]).\n\n**See how:** [expandable][1]\n\n**Add more comments** to the code that explain what each section of code is for. Imagine that you are describing the purpose of the code to one of your classmates. Or find the most complicated part and try to explain it.\n\n**Click finish** once you've added the comment. And keep adding comments as you go!!!" - SG U3L2 Using Simple Commands part 1: "# Welcome to App Lab - Let's get started\n\n\n\nWe're going to start learning how to program with turtle commands. Given only 2 turtle commands, write code to complete the drawings in each of the following challenges. \n\n\n\n# Do This:\n\nAdd code to draw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the `Finish` button - it will appear after you run the program once." - SG U3L2 Using Simple Commands: "# Now you try it!\n\nWe'll be learning how to code with subgoals throughout this unit.\n\nTypically, you'll solve problems by dragging blocks from the toolbox to the workspace. Sometimes we'll put subgoals that solve the problem into the workspace, and sometimes you'll have to identify the subgoals yourself.\n\nHere we've added a series of `// Move turtle` and `// Orient turtle` subgoals into the workspace that describe how to solve the 1x1 square problem...but it's incomplete.\n\n# Do This:\n\n- Complete the code for the the 1x1 square solution we've started below.\n- Drag each turtle block beneath the proper subgoal in the code. \n\n**Click here to see how** [expandable][0]\n\n\n\n- Reminder: the turtle should end up in its original position, facing its original direction.\n\nOnce you think you have a solution, click the `Finish` button." + SG U3L2 Using Simple Commands part 1: "# Welcome to App Lab - Let's get started\n\n\n\nWe're going to start learning how to program with turtle commands. Given only 2 turtle commands, write code to complete the drawings in each of the following challenges. \n\n\n\n# Do This:\n\nAdd code to draw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the `Finish` button - it will appear after you run the program once." + SG U3L2 Using Simple Commands: "# Now you try it!\n\nWe'll be learning how to code with subgoals throughout this unit.\n\nTypically, you'll solve problems by dragging blocks from the toolbox to the workspace. Sometimes we'll put subgoals that solve the problem into the workspace, and sometimes you'll have to identify the subgoals yourself.\n\nHere we've added a series of `// Move turtle` and `// Orient turtle` subgoals into the workspace that describe how to solve the 1x1 square problem...but it's incomplete.\n\n# Do This:\n\n- Complete the code for the the 1x1 square solution we've started below.\n- Drag each turtle block beneath the proper subgoal in the code. \n\n**Click here to see how** [expandable][0]\n\n\n\n- Reminder: the turtle should end up in its original position, facing its original direction.\n\nOnce you think you have a solution, click the `Finish` button." SG U3L2_Add-subgoals: "# New challenge \n\nDraw a 3x3 grid to the _front_ and _right_ of the turtle _as efficiently_ as possible.\n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on the situation. For this problem let's say that efficient means: **using the fewest turtle commands possible**\n\n# Do this\n\n1. This problem presents some subtle challenges. Before you start creating the program, you might want to test your ideas on paper for faster brainstorming. Work with your partner to discuss possible solutions or strategies. Try more than one.\n\n2. Once you have a solution, **start** by identifying the subgoals and drag them from the **Goals** tab into the workspace. \n\n3. Then start filling it in with turtle blocks, and **testing** it out as you go by adding a few commands, then running the program, adding a few more, run again, and so on.\n\nWhen you think you're done click `Finish` and move on." SG U3L2_Turtle3by3Grid: |- # New challenge @@ -32635,7 +32644,7 @@ en: 3. Then start filling it in with turtle blocks, and **testing** it out as you go by adding a few commands, then running the program, adding a few more, run again, and so on. When you think you're done click `Finish` and move on. - SG U3L2_TurtleSquare_right: "# New problem \n\nThis time, draw a 1 x 1 square, so the square is above and to the right of the turtle. This means you need to draw it by moving and _turning right_. **But there there is no command to turn right!** \n\nHow do you turn right when the only command you have is `turnLeft()`? You need to figure it out.\n\n## One Subgoal - multiple lines of code \n\nSometimes a single subgoal like `// Orient Turtle` might require several lines of code to accomplish. \n\nFor example in this problem the _goal_ of orienting the turtle for each right turn means turning left a few times. So you would add multiple `turnLeft()` commands under a single `//Orient Turtle` subgoal. (shown at right).\n\n
\n\n# Do this\n\n- We've again added subgoals to solve this problem into the workspace. Notice that we still only use `Move turtle` and `Orient turtle`.\n- Add code beneath each subgoal, to draw a 1 x 1 square by moving and _turning right_.\n- Reminder: The program should stop with turtle in its original position, facing its original direction.\n\nWhen you're done click the `Finish` button to move onto the next problem." + SG U3L2_TurtleSquare_right: "# New problem \n\nThis time, draw a 1 x 1 square, so the square is above and to the right of the turtle. This means you need to draw it by moving and _turning right_. **But there there is no command to turn right!** \n\nHow do you turn right when the only command you have is `turnLeft()`? You need to figure it out.\n\n## One Subgoal - multiple lines of code \n\nSometimes a single subgoal like `// Orient Turtle` might require several lines of code to accomplish. \n\nFor example in this problem the _goal_ of orienting the turtle for each right turn means turning left a few times. So you would add multiple `turnLeft()` commands under a single `//Orient Turtle` subgoal. (shown at right).\n\n
\n\n# Do this\n\n- We've again added subgoals to solve this problem into the workspace. Notice that we still only use `Move turtle` and `Orient turtle`.\n- Add code beneath each subgoal, to draw a 1 x 1 square by moving and _turning right_.\n- Reminder: The program should stop with turtle in its original position, facing its original direction.\n\nWhen you're done click the `Finish` button to move onto the next problem." SG csp_U3_plan_code_FR: "\n\n
\n\nIn this lesson we talked about top-down design for building up solutions to larger programming problems. Plan the code that you would use to draw this image (shown at right). Describe each of the functions that you would create. You should not write all the code, only the names of the functions that you would create with a brief description of what each function would do. \n\nWrite your plan following the format:\n\n
\n\n Name of function - description of what it does\n\n Name of function 2 - description of what it does\n ..." SG csp_U3_square_v_rect_FR: |- @@ -35589,7 +35598,7 @@ en: U3-Design Mode-ID and Event Handler: "# Activate Your Button\n\nOn the last level you added a button using Design Mode. If you click it, nothing happens. Let's make the button work. \nYour button has been brought over to this level. \n\n**Goal:** Add code using Design Mode to make the button respond to a click.\n\n# Do This:\n\n\n\n- **Change ID of button** from “button1” to “redButton”.\n\n- **Insert `onEvent` from Design Mode** by clicking _Insert and show code_ under the **Events Tab**.\n\n- Run the program and **look for the output in the _Debug Console_** below the workspace instead of the app window. We will discuss the _Debug Console_ on the next level." U3-Design Mode-ID: "# Baker note: we might not need this level, or the message about IDs being important might be able to shift to another level (stays here for now...pending).\n\n# IDs Are Still Important\n\n# Do This\n\nTry updating the ID name and then update the code to match. \n\n**Switch to Design Mode** and **edit the ID** to be more descriptive. You can edit it from either the Properties tab or the Events tab.\n\n**Switch to Code Mode** and check out the **dropdown ID menu**. Your new ID should be in the dropdown list!\n\n**Test it out** to make sure it works.\n" U3-Design Mode-Image: "# Adding Images\n\nTo practice using images in Design Mode we are going to **recreate the \"Chaser Game\"** from the last lesson.\n\n# Do This:\n\n- **Add an Image element** [][0]\n- **Choose your image** [][1]\n - **URLs** can be added directly into the \"picture\" field. \n - **Upload images** by clicking \"Choose\".\n - **Note:** You can always see all the files you've uploaded by clicking the gear at the top of the toolbox. [][2]\n- **Insert an event handler** for the image.\n- From here you can **work in Code Mode** to complete the remainder of your application. Recall that in the \"Chaser Game\" you just need an image that runs away from the mouse.\n- If you have time **use Design Mode** to quickly improve some of the visual components of your game." - U313 Two Buttons with Ids: "# Make a Prediction - Learning to Code Better, Faster\n\nResearch has shown that when you encounter a new piece of code you learn faster by simply **making a prediction about what will happen before you run the program**. It's not actually important if your prediction is correct, but the act of predicting allows you to construct a stronger mental model for how code works and then test your understanding when you run the code.\n\nGood programmers do this all the time. **They don't expect their code is correct the first time they write it.** Instead they get in the habit of running their code, checking their assumptions, and making changes as needed. Programming isn't a fixed set of steps. It's a creative and continuous cycle of writing, testing, and improving code.\n\n# Predict - Observe - Reflect\n\nThis program creates a button and **two event handlers** which listen for a click on that button. \n\n**Predict:** What will happen when the \"Forward\" button is clicked? Force yourself to make a prediction about what the turtle will do! **\"I don't know\" is not a prediction**. Think about the options and talk about it with a classmate: Will it..\n\n- move forward?\n- turn left?\n- turn left _and_ move forward?\n- do nothing?\n- move forward _and_ turn left?\n- cause an error?\n- something else? \n\n**Observe:** Once you've made a prediction, close these instructions and **run the program** to observe what happens.\n\n**Reflect:** Was your prediction correct? If not what about your mental model might need to change? Talk about it with a classmate and experiment with the code to make sure you understand what is happening." + U313 Two Buttons with Ids: "# Make a Prediction - Learning to Code Better, Faster\n\nResearch has shown that when you encounter a new piece of code you learn faster by simply **making a prediction about what will happen before you run the program**. It's not actually important if your prediction is correct, but the act of predicting allows you to construct a stronger mental model for how code works and then test your understanding when you run the code.\n\nGood programmers do this all the time. **They don't expect their code is correct the first time they write it.** Instead they get in the habit of running their code, checking their assumptions, and making changes as needed. Programming isn't a fixed set of steps. It's a creative and continuous cycle of writing, testing, and improving code.\n\n# Predict - Observe - Reflect\n\nThis program creates a button and **two event handlers** which listen for a click on that button. \n\n**Predict:** What will happen when the \"Forward\" button is clicked? Force yourself to make a prediction about what the turtle will do! **\"I don't know\" is not a prediction**. Think about the options and talk about it with a classmate: Will it..\n\n- move forward?\n- turn left?\n- turn left _and_ move forward?\n- do nothing?\n- move forward _and_ turn left?\n- cause an error?\n- something else? \n\n**Observe:** Once you've made a prediction, close these instructions and **run the program** to observe what happens.\n\n**Reflect:** Was your prediction correct? If not what about your mental model might need to change? Talk about it with a classmate and experiment with the code to make sure you understand what is happening." U313 drag Two Buttons: "# Buttons and Unique IDs\n\nYou may have noticed that the button command has two parameters: `button(id, text)`. The `text` is the text that actually shows up on the button display, and the `id` (we'll typically write **ID**) is a **unique identifier** for that element in the app.\n\nEach element that appears in the app must have a **unique ID**. In fact, if you try to run a program that has two buttons with same ID you will get a warning message in the console. Watch:\n\n\nNotice that even though the text on the buttons was different, the IDs were the same, which caused the error message to show up. To get rid of that error message you will have to change the ID of the button from the default `id` to something else.\n\n**Error messages happen to everyone and they are helpful!**: getting an error or warning message when you run your program is _not a big deal_. Programmers actually rely on error messages to tell them where and how to fix their code.\nSometimes error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers to an id (id) which already exists.` But a warning like this contains helpful information and clues such as the line the error occured on, or some word or command it didn't recognize. \n\n# Do This:\n\nThe goal here is to experience an error message in a program, study it, and fix it.\n\n- **Drag** two buttons into the workspace (same as shown above) with the default IDs.\n- **Run** the program to see the warning message in the console.\n- **Read** the warning message to see what it says.\n- **Change** the IDs of the buttons to make them unique. An ID must be specified in quotes. You can use double-quotes: `\"myId\"`, or single quotes: `'myId'`\n- **Re-run the program** to make sure you don't get the error.\n\nOnce you've got two buttons on the screen with different IDs and the program can run without generating the warning, move on to the next level." U313 eventsDetails: "# Buttons and Unique Ids\n\nYou may have noticed that the button command has two parameters: `button(id, text)`. The 'text' is the text that actually shows up on the button display, and the 'id' (which is shorthand for I.D.) is a **unique identifier** for that element in the app.\n\nEach element that appears in the app must have a **unique id**. In fact, if you try to run a program that has two buttons with same id you will get a warning message in the console. Watch:\n\n\nNotice that even though the text on the buttons was different, the ids were the same, which caused the error message to show up. To get rid of that error message you will have to change the default button ID of `\"id\"`.\n\n# Do This\n\nThe only goal here is to experience this kind of warning message. It's not a big deal if it happens to you. It's a very common thing to happen and the computer is trying to tell you how to fix your code.\n\n- **Drag** two buttons into the workspace (same as shown above)\n- **Run** the program with the default values to see the warning message in the console.\n- **Read** the warning message to see what it says.\n- **Change** the ids of the buttons to make them unique, and re-run the program to make sure you don't get the error.\n- **NOTE:** an id must be specified in quotes. You can use double-quotes: `\"myId\"`, or single quotes: `'myId'` " U3L01 Assessment1: Consider the algorithm you designed for today’s activity. Identify two instances where there may be multiple ways to interpret your instructions and suggest improvements that could be made to improve their clarity. @@ -35627,9 +35636,9 @@ en: U3L03 - draw rect function: "This is your code from the previous level. Did you know that you can write functions that call your own functions?\n\nTake the code that draws the rectangle and move into a new function called `drawRectangle()`. The first line of your program should be a single call to `drawRectangle()`. The rest of the code should just be function definitions. \n\nNOTE: your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions.\n\n[][0]" U3L03 - draw rect function_2018: "This is your code from the previous level. Did you know that you can write functions that call your own functions?\n\nTake the code that draws the rectangle and move into a new function called `drawRectangle()`. The first line of your program should be a single call to `drawRectangle()`. The rest of the code should just be function definitions. \n\nNOTE: your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions.\n\n[][0]" U3L03 - draw rect function_2019: "This is your code from the previous level. Did you know that you can write functions that call your own functions?\n\nTake the code that draws the rectangle and move into a new function called `drawRectangle()`. The first line of your program should be a single call to `drawRectangle()`. The rest of the code should just be function definitions. \n\nNOTE: your program will still do the same thing. We are just changing the way it is written to demonstrate that you can use functions you've already written as building blocks in new functions.\n\n[][0]" - U3L03 - draw step: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n- Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n- If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n- We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n- First let's **define** a function that _draws just one of these zig-zag steps._ We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n[][0]" - U3L03 - draw step_2018: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n- Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n- If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n- We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n- First let's **define** a function that _draws just one of these zig-zag steps._ We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n[][0]" - U3L03 - draw step_2019: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n- Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n- If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n- We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n- First let's **define** a function that _draws just one of these zig-zag steps._ We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n[][0]" + U3L03 - draw step: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n- Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n- If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n- We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n- First let's **define** a function that _draws just one of these zig-zag steps._ We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n[][0]" + U3L03 - draw step_2018: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n- Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n- If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n- We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n- First let's **define** a function that _draws just one of these zig-zag steps._ We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n[][0]" + U3L03 - draw step_2019: "We are going to walk you through a process that shows you the benefit of thinking about programming tasks in terms of writing functions.\n\n- Over the next 3 levels we are going to write a program that draws the figure shown at right which sort of looks like a jagged diamond shape. \n\n- If you look at this image you might recognize elements that repeat: this is a 4-sided figure, and each side is made up of some zig-zag steps.\n\n- We're going to break the programming down into useable parts and then use those parts as building blocks to make this more complex drawing.\n\n- First let's **define** a function that _draws just one of these zig-zag steps._ We've started you out with a definition of `right()` that you can use...\n\n# Do This:\n\n**Define** a function named `function drawStep()` which makes the turtle move forward and left as shown. \n\n**Note**: at the end the turtle should be facing the same direction it started.\n\n[][0]" U3L03 Define and use turnAround: "# Do This:\n\n**Define** a function called `turnAround` which turns the turtle around. Once you've defined the function **call** it to make sure it works as you expect and then move the turtle forward, as shown below. \n\n[][0]\n\n**Remember** typically, you call a function in lines of code _above_ the function definition - this might make you feel like you are working in reverse, since you first write the code to define the function and _then_ add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\n\n[][1]" U3L03 Define and use turnAround_2018: "# Do This:\n\n**Define** a function called `turnAround` which turns the turtle around. Once you've defined the function **call** it to make sure it works as you expect and then move the turtle forward, as shown below. \n\n[][0]\n\n**Remember** typically, you call a function in lines of code _above_ the function definition - this might make you feel like you are working in reverse, since you first write the code to define the function and _then_ add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\n\n[][1]" U3L03 Define and use turnAround_2019: "# Do This:\n\n**Define** a function called `turnAround` which turns the turtle around. Once you've defined the function **call** it to make sure it works as you expect and then move the turtle forward, as shown below. \n\n[][0]\n\n**Remember** typically, you call a function in lines of code _above_ the function definition - this might make you feel like you are working in reverse, since you first write the code to define the function and _then_ add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\n\n[][1]" @@ -35641,11 +35650,11 @@ en: U3L03 Free Response Wrap Up: In your own words, explain at least one reason why programming languages have functions. Include an example of something you did in this lesson that demonstrates the reason you describe. U3L03 Free Response Wrap Up_2018: In your own words, explain at least one reason why programming languages have functions. Include an example of something you did in this lesson that demonstrates the reason you describe. U3L03 Free Response Wrap Up_2019: In your own words, explain at least one reason why programming languages have functions. Include an example of something you did in this lesson that demonstrates the reason you describe. - U3L03 Three Steps: "# Do This:\n\n\n\nWe are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond.\nIf you look at the whole image we are trying to draw, you'll notice that each of 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange).\n\nRight now we'll write the code for one of those sides. So...\n\n**Define** a new function named `drawSide()` which makes three calls in a row to `drawStep()` followed by a `moveForward()` and `right()`. \n\n**Replace** the original function call to `drawStep()` with a call to your newly defined `drawSide()` function. \n\nThe diagrams below show the intended actions.\n\n[][0]\n[][1]" + U3L03 Three Steps: "# Do This:\n\n\n\nWe are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond.\nIf you look at the whole image we are trying to draw, you'll notice that each of 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange).\n\nRight now we'll write the code for one of those sides. So...\n\n**Define** a new function named `drawSide()` which makes three calls in a row to `drawStep()` followed by a `moveForward()` and `right()`. \n\n**Replace** the original function call to `drawStep()` with a call to your newly defined `drawSide()` function. \n\nThe diagrams below show the intended actions.\n\n[][0]\n[][1]" U3L03 Three Steps_2018: |- # Do This: - + We are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond. If you look at the whole image we are trying to draw, you'll notice that each of 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange). @@ -35674,7 +35683,7 @@ en: U3L03 Three Steps_2019: |- # Do This: - + We are going to continue to build up towards a diamond by **defining** a function that draws one side of the diamond. If you look at the whole image we are trying to draw, you'll notice that each of 4 sides is comprised of 3 calls to `drawStep()`, plus a few extra moves (shown in orange). @@ -37765,15 +37774,15 @@ en: U3L19 - write var and string with same name v2: "# Debugging Variables\n\nThere is a simple command called `write` in the UI Controls toolbox that is a fast and easy way to display text in the app itself. The way you use it is very similar to `console.log`. Let's debug another problem only using `write` instead of `console.log`. \n\nYou may have already run into this problem! But it's worth mentioning again. To display the value of a variable you _should not_ use quotes. Notice the difference between these two statements - the comments next to each line explains the differences:\n\n write(\"score\"); // will display the literal characters s-c-o-r-e\n write(score); // will retrieve the value of score and display it\n\n# Do This:\n\nTo solve these problems you **should only add or remove quotation marks**.\n\n- **Run the starter code**\n- **Locate and fix the problems**\n\n**GOAL:** Make the app display what's shown at right by only adding or removing quotation marks from the code given.\n\n[][0]" U3L19 - write var and string with same name: "# Debugging Variables\n\nThere is a simple command called `write` in the UI Controls toolbox that is a fast and easy way to display text in the app itself. The way you use it is very similar to `console.log`. Let's debug another problem only using `write` instead of `console.log`. \n\nYou may have already run into this problem! But it's worth mentioning again. To display the value of a variable you _should not_ use quotes. Notice the difference between these two statements - the comments next each line explains the differnece:\n\n write(\"score\"); // will display the literal characters s-c-o-r-e\n write(score); // will retrieve the value of score and display it\n\n# Do This\n\nTo solve these problems you **should only add or remove quotation marks**\n\n- **Run the starter code**\n- **Locate and Fix the problems**\n\n**GOAL:** Make the app display what's shown at right by only adding or removing quotation marks from the code given.\n\n[][0]" U3L2 Free Response Reflection: Respond to your teacher's prompt in the space below. - U3L2 Using Simple Commands (no tooltips): "**Directions:** Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. \n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n**Warm up 1:** Draw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." + U3L2 Using Simple Commands (no tooltips): "**Directions:** Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. \n\nWhat does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end.\n\n**Warm up 1:** Draw a 1 x 1 square to the front and left of the turtle as efficiently as possible. The program should stop with turtle in its original position, facing its original direction.\n\nOnce you think you have a solution, click the Finish button - it will appear once you run the program." U3L2 Using Simple Commands: |- - + Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. What does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end. - + # Do This: @@ -37781,13 +37790,13 @@ en: Once you think you have a solution, click the Finish button - it will appear once you run the program. U3L2 Using Simple Commands_2018: |- - + Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. What does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end. - + # Do This: @@ -37795,13 +37804,13 @@ en: Once you think you have a solution, click the Finish button - it will appear once you run the program. U3L2 Using Simple Commands_2019: |- - + Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. What does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end. - + # Do This: @@ -38289,7 +38298,7 @@ en: U3L2_TurtleSquare_right: |- # Do This: - + This time, draw a 1 x 1 square to the _front and right_ of the turtle as efficiently as possible. Notice that there is no command to turn right! You need to figure out how to draw this by only turning left and moving forward. The program should stop with turtle in its original position, facing its original direction. @@ -42630,7 +42639,7 @@ en: **Your database already includes a table called “mySongs”.** - - Open the Data Viewer for mySongs and note that the record for **“Eye of the Tiger” is missing information** for the artist and seconds columns.
[][1] + - Look in the data tab for mySongs and note that the record for **“Eye of the Tiger” is missing information** for the artist and seconds columns.
[][1] - **Run the starter code provided and take note of what prints to the console.** - **Drag out the `updateRecord` block.** - Set the table name to **“mySongs”**. @@ -42638,7 +42647,7 @@ en: - In the callback function, add a `console.log` statement to **print out the updated record’s title and artist.** - **Run the program again.** - Look at the output to the console. - - Refresh the Data Viewer and **verify that the record for “Eye of the Tiger” has been updated.** + - Click the data tab and **verify that the record for “Eye of the Tiger” has been updated.** U6 - updateRecord - Default Block_2019: |- # Updating Records @@ -42658,7 +42667,7 @@ en: **Your database already includes a table called “mySongs”.** - - Open the Data Viewer for mySongs and note that the record for **“Eye of the Tiger” is missing information** for the artist and seconds columns.
[][1] + - Look in the data tab for mySongs and note that the record for **“Eye of the Tiger” is missing information** for the artist and seconds columns.
[][1] - **Run the starter code provided and take note of what prints to the console.** - **Drag out the `updateRecord` block.** - Set the table name to **“mySongs”**. @@ -42666,7 +42675,7 @@ en: - In the callback function, add a `console.log` statement to **print out the updated record’s title and artist.** - **Run the program again.** - Look at the output to the console. - - Refresh the Data Viewer and **verify that the record for “Eye of the Tiger” has been updated.** + - Click the data tab and **verify that the record for “Eye of the Tiger” has been updated.** U6 - updateRecord - Update Nonexistent Record: |- # What If _updateRecord_ Fails? @@ -42749,6 +42758,16 @@ en: When the record ID doesn’t match any in the specified table, `updateRecord` can’t find a record to update, so it sets the `success` parameter in the callback function to `false` and finishes without changing any records. Be careful to always make sure the object you pass `updateRecord` has an ID that matches a record in the table. + U7 L05 Exit Ticket: |- + Evaluate if the following function is a good candidate to be placed in a library. Why or why not? + + function updateScore(player, points) + if(player == "player1"){ + player1Points = player1Points + points; + } else { + player2Points = player2Points + points; + } + } Underground Avoiding Lava: Lava is hiding beneath some of these blocks, which you'll need to cover up before moving forward. An `if` command will come in handy here. Add a `move forward` command in the correct place to mine these blocks. Underground Avoiding Lava_2018: Lava is hiding beneath some of these blocks, which you'll need to cover up before moving forward. An `if` command will come in handy here. Add a `move forward` command in the correct place to mine these blocks. Underground Avoiding Lava_2019: Lava is hiding beneath some of these blocks, which you'll need to cover up before moving forward. An `if` command will come in handy here. Add a `move forward` command in the correct place to mine these blocks. @@ -42973,6 +42992,12 @@ en: - Make one of your food sprites controllable by adding keypress events (example: press up to go up, down to go down). Virtual Pet Freeplay_simple: "Freeplay: What more can you make your giraffe do? \n\n- Can you add more special items for your giraffe? \n- Can you give her some friends? " Virtual Pet Predict: "**Make a prediction:** This is Geraldine, your new pet giraffe. What do you think will happen if you press run and then click on her?" + Virtual Pet Template_2019: |- + Now it's your turn to create your own virtual pet! Let's start by giving it a look you like. + + 1. Click the **Costumes** tab. + 2. Draw your own costume, or choose one from the library. + 3. In the code below, change the pet sprite's costume to your own. Visual Accessibility: |- # Visual Accessibility: Color Contrast @@ -43048,9 +43073,9 @@ en: 'Widget: Black and White Pixelation': "# Make your own image of any size\n\n[][0]\n[][1]\n[][2]\n[][3]\n[][4]\n[][5]\n[][6]\n\n**Directions:**\n\n- Encode an image of anything you like.\n- You might want to do some planning and sketching with graph paper first.\n- DO NOT simply make an abstract pattern, like a checkerboard. \n- Depict something, perhaps your name written out, your initials, an icon or logo of some sort.\n- Get creative! The image doesn't have to be a perfect square, it can be long and skinny.\n- Optional: for fun, send your image bits to a friend using the sending bits widget. _(note: this is just a link to the sending formatted text level from a couple of classes ago)_" 'Widget: Black and White Pixelation_2018': "# Make your own image of any size\n\n[][0]\n[][1]\n[][2]\n[][3]\n[][4]\n[][5]\n[][6]\n\n**Directions:**\n\n- Encode an image of anything you like.\n- You might want to do some planning and sketching with graph paper first.\n- DO NOT simply make an abstract pattern, like a checkerboard. \n- Depict something, perhaps your name written out, your initials, an icon or logo of some sort.\n- Get creative! The image doesn't have to be a perfect square, it can be long and skinny.\n- Optional: for fun, send your image bits to a friend using the sending bits widget. _(note: this is just a link to the sending formatted text level from a couple of classes ago)_" 'Widget: Black and White Pixelation_2019': "# Make your own image of any size\n\n[][0]\n[][1]\n[][2]\n[][3]\n[][4]\n[][5]\n[][6]\n\n**Directions:**\n\n- Encode an image of anything you like.\n- You might want to do some planning and sketching with graph paper first.\n- DO NOT simply make an abstract pattern, like a checkerboard. \n- Depict something, perhaps your name written out, your initials, an icon or logo of some sort.\n- Get creative! The image doesn't have to be a perfect square, it can be long and skinny.\n- Optional: for fun, send your image bits to a friend using the sending bits widget. _(note: this is just a link to the sending formatted text level from a couple of classes ago)_" - 'Widget: Color Pixelation': "# Personal Favicon\n\n**Requirements:**\n\n\n- The icon must be 16x16 pixels. \n- You must use the Pixelation Widget to encode the bits of color information.\n- The image must be encoded with at least 12 bits per pixel." - 'Widget: Color Pixelation_2018': "# Personal Favicon\n\n**Requirements:**\n\n\n- The icon must be 16x16 pixels. \n- You must use the Pixelation Widget to encode the bits of color information.\n- The image must be encoded with at least 12 bits per pixel." - 'Widget: Color Pixelation_2019': "# Personal Favicon\n\n**Requirements:**\n\n\n- The icon must be 16x16 pixels. \n- You must use the Pixelation Widget to encode the bits of color information.\n- The image must be encoded with at least 12 bits per pixel." + 'Widget: Color Pixelation': "# Personal Favicon\n\n**Requirements:**\n\n\n- The icon must be 16x16 pixels. \n- You must use the Pixelation Widget to encode the bits of color information.\n- The image must be encoded with at least 12 bits per pixel." + 'Widget: Color Pixelation_2018': "# Personal Favicon\n\n**Requirements:**\n\n\n- The icon must be 16x16 pixels. \n- You must use the Pixelation Widget to encode the bits of color information.\n- The image must be encoded with at least 12 bits per pixel." + 'Widget: Color Pixelation_2019': "# Personal Favicon\n\n**Requirements:**\n\n\n- The icon must be 16x16 pixels. \n- You must use the Pixelation Widget to encode the bits of color information.\n- The image must be encoded with at least 12 bits per pixel." 'Widget: Text Compression': Look for patterns (repeated words or phrases) in the text. Enter the patterns you see into the dictionary on the right. As you type entries into the dictionary, the symbol for the entry is inserted into the text in place of the pattern. 'Widget: Text Compression_2018': Look for patterns (repeated words or phrases) in the text. Enter the patterns you see into the dictionary on the right. As you type entries into the dictionary, the symbol for the entry is inserted into the text in place of the pattern. 'Widget: Text Compression_2019': Look for patterns (repeated words or phrases) in the text. Enter the patterns you see into the dictionary on the right. As you type entries into the dictionary, the symbol for the entry is inserted into the text in place of the pattern. @@ -43390,7 +43415,7 @@ en: - Create a new behavior and use it to make the ball roll. Your behavior should combine two different actions. behaviors 7: |- - Drive off into the sunset! + Drive off into the horizon! - Create a new behavior and use it to make the car move up and shrink. If you do it right, it could look like it is driving off into the horizon. behaviors free play: "**Free play:** Create your own outer space scene!" @@ -46175,6 +46200,7 @@ en: courseE_aboutme_6: "Awesome job! Your poster is just as cool as Rikki's! \n\nRikki: Almost as cool. Almost. \U0001F609\n\nKeep going! Here are a few improvements Rikki recommends. Try them out!\n\n1. Add a background! Choose a background that fits your poster.\n2. Add behaviors! Make each of your sprites react differently when clicked.\n3. Add more events! Use the other blocks in the `Events` toolbox category." courseE_aboutme_7: "**Free Play**: Rikki is kid using Sprite Lab to create an _interactive poster_ about herself that she can share on the web. \nShe has chosen this sprite to represent her! \nRikki has given you permission to check out her poster. You can even edit her code! \nPlay with Rikki's poster and code for a bit, then click **Finish**." courseE_aboutme_freeplay: "Awesome job! Your poster is just as cool as Rikki's! \n\nRikki: Almost as cool. Almost. \U0001F609\n\nKeep going! Here are a few things Rikki is going to add to her poster. Try them out!\n\n1. Add a background! Choose a background that fits your poster.\n2. Add behaviors! Make each of your sprites react differently when clicked.\n3. Add other kinds of events! Apply your creativity and coding skills and try events other than `click`." + courseE_aboutme_template: This is a template level for "About Me 2019". courseE_artist_concept1: "Recreate this image. \n\n- The hexagons have sides of 50 pixels\n- The hexagons are 100 pixels apart\n- The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." courseE_artist_concept1_2018: "Recreate this image. \n\n- The hexagons have sides of 50 pixels\n- The hexagons are 100 pixels apart\n- The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." courseE_artist_concept1_2019: "Recreate this image. \n\n- The hexagons have sides of 50 pixels\n- The hexagons are 100 pixels apart\n- The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." @@ -49951,13 +49977,13 @@ en: - How many apples did the hippo collect? - How much time did it take for all of the apples to be collected? subgoal U3 L4 introducing subgoal labels: |- - + Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. What does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end. - + # Do This: @@ -49965,13 +49991,13 @@ en: Once you think you have a solution, click the Finish button - it will appear once you run the program. subgoal U3L2 Using Simple Commands: |- - + Given only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write code that solves the problem as efficiently as possible using only the commands provided. What does “efficient” mean? In computer science it can actually mean several different things depending on what you’re talking about. Work on these challenges, try to solve them in a way that you think is best and we’ll ask about efficiency at the end. - + # Do This: @@ -49990,7 +50016,7 @@ en: The turtle should draw a square moving clockwise. Drag out ["move turtle" subgoal label][0] into the workspace. - subgoalU3L2_TurtleSquare_right: " \n\n# Do This:\n\nThis time, draw a 1 x 1 square to the _front and right_ of the turtle as efficiently as possible. Notice that there is no command to turn right! You need to figure out how to draw this by only turning left and moving forward. The program should stop with turtle in its original position, facing its original direction.\n\nWhen you're done click the Finish button to move onto the next problem." + subgoalU3L2_TurtleSquare_right: " \n\n# Do This:\n\nThis time, draw a 1 x 1 square to the _front and right_ of the turtle as efficiently as possible. Notice that there is no command to turn right! You need to figure out how to draw this by only turning left and moving forward. The program should stop with turtle in its original position, facing its original direction.\n\nWhen you're done click the Finish button to move onto the next problem." subgoals_U3_turtle_prediction_FR: |- ## Code Trace diff --git a/i18n/locales/source/dashboard/scripts.yml b/i18n/locales/source/dashboard/scripts.yml index c90cddc7c53b6..c6082852becc2 100644 --- a/i18n/locales/source/dashboard/scripts.yml +++ b/i18n/locales/source/dashboard/scripts.yml @@ -6985,6 +6985,10 @@ en: name: CSP mid survey 2018 stagin CSP mid survey 2018 staging: name: CSP mid survey 2018 staging + CSP post course survey 2019 staging: + name: CSP post course survey 2019 staging + CSD post course survey 2019 staging: + name: CSD post course survey 2019 staging title: All the surveys description_audience: '' description_short: Place to stage and test Code.org surveys @@ -9836,15 +9840,15 @@ en: description_student: 'Envelopes and variables have something in common: both can hold valuable things. Here you will learn what variables are and the awesome things they can do.' description_teacher: Variables are used as placeholders for values such as numbers or words. Variables allow for a lot of freedom in programming. Instead of having to type out a phrase many times or remember an obscure number, computer scientists can use variables to reference them. This lesson helps to explain what variables are and how we can use them in many different ways. The idea of variables isn't an easy concept to grasp, so we recommend allowing plenty of time for discussion at the end of the lesson. Variables as Constant in Artist: - name: Variables as Constant in Artist + name: Variables with Artist description_student: '' description_teacher: '' Variables that Change in Bee: - name: Variables that Change in Bee + name: Changing Variables with Bee description_student: '' description_teacher: '' Variables that Change in Artist: - name: Variables that Change in Artist + name: Changing Variables with Artist description_student: '' description_teacher: '' For Loop Fun: @@ -9852,15 +9856,15 @@ en: description_student: You're going to have loads of fun learning about `for` loops! description_teacher: 'We know that loops allow us to do things over and over again, but now we’re going to learn how to use loops that have extra structures built right in. These new structures will allow students to create code that is more powerful and dynamic. ' For Loops in Bee: - name: For Loops in Bee + name: For Loops with Bee description_student: Buzz buzz. In these puzzles you will be guiding a bee to nectar and honey using `for` loops! description_teacher: Featuring Bee, this lesson focuses on for loops and using an incrementing variable to solve more complicated puzzles. Students will begin by reviewing loops from previous lessons, then walked through using for loops to more effectively solve complicated problems. For Loops in Artist: - name: For Loops in Artist + name: For Loops with Artist description_student: Get ready to make your next masterpiece. Here you will be using `for` loops to make some jaw-dropping pictures. description_teacher: In this lesson, students continue to practice for loops, this time with Artist. Students will complete puzzles combining the ideas of variables, loops, and for loops to create complex designs. At the end, they will have a chance to create their own art in a freeplay level. Learning Sprites with Sprite Lab: - name: Learning Sprites with Sprite Lab + name: Swimming Fish with Sprite Lab description_student: '' description_teacher: '' Alien Dance Party with Sprite Lab: @@ -9891,26 +9895,24 @@ en: name: Present Your Project description_student: Time to show your work! Here you will be presenting your awesome project to your peers. description_teacher: Over the course of five lessons, students will be building up to building a project of their own design using either Play Lab or Artist as their programming environment. Finally, students will be able to present their finished work to their peers or share with their loved ones with a special link. The lesson guide overviewing all five stages of the process can be found in the beginning of the project process, [here](https://curriculum.code.org/csf/coursef/15/). - new stage: - name: new stage The Artist: name: The Artist Nested Loops in the Maze: - name: Nested Loops in the Maze + name: Nested Loops in Maze Sequencing in the Maze: name: Sequencing in the Maze Programming and Loops with the Artist: name: Programming and Loops with the Artist Events with Sprite Lab: - name: Events with Sprite Lab + name: Alien Dance Party with Sprite Lab Loops with the Artist: - name: Loops with the Artist + name: Drawing with Loops Sprite Lab Behaviors: name: Sprite Lab Behaviors Editing Behaviors: - name: Editing Behaviors + name: Behaviors in Sprite Lab Virtual Pet: - name: Virtual Pet + name: Virtual Pet with Sprite Lab Data from Sprite Lab: name: Data from Sprite Lab End of Course Project: @@ -9918,7 +9920,7 @@ en: Copyright and Creativity: name: Copyright and Creativity Internet: - name: Internet + name: The Internet Crowdsourcing: name: Crowdsourcing Digital Sharing: @@ -9942,7 +9944,7 @@ en: description_audience: 'Ages: 7-11' stages: 'Algorithms: Graph Paper Programming': - name: 'Algorithms: Graph Paper Programming' + name: Graph Paper Programming description_student: '' description_teacher: '' Introduction to Online Puzzles: @@ -9954,7 +9956,7 @@ en: description_student: '' description_teacher: '' Debugging in Collector: - name: Debugging in Collector + name: Debugging with Laurel description_student: '' description_teacher: '' Events in Bounce: @@ -9966,11 +9968,11 @@ en: description_student: '' description_teacher: '' Loops in Artist: - name: Loops in Artist + name: Drawing Shapes with Loops description_student: '' description_teacher: '' Nested Loops in Bee: - name: Nested Loops in Bee + name: Nested Loops in Maze description_student: '' description_teacher: '' Nested Loops in Artist: @@ -9994,11 +9996,11 @@ en: description_student: '' description_teacher: '' Conditionals in Bee: - name: Conditionals in Bee + name: If/Else with Bee description_student: '' description_teacher: '' Conditionals & Loops in Harvester: - name: Conditionals & Loops in Harvester + name: Harvesting with Conditionals description_student: '' description_teacher: '' Digital Citizenship: @@ -10010,7 +10012,7 @@ en: description_student: '' description_teacher: '' 'Unplugged: Binary': - name: 'Unplugged: Binary' + name: Binary Images description_student: '' description_teacher: '' Artist Binary: @@ -10068,7 +10070,7 @@ en: description_student: '' description_teacher: '' Conditionals: - name: Conditionals + name: Conditionals with the Farmer description_student: You will get to tell the computer what to do under certain conditions in this fun and challenging series. description_teacher: This lesson introduces students to `while` loops and `if / else` statements. _While loops_ are loops that continue to repeat commands as long as a condition is true. While loops are used when the programmer doesn't know the exact number of times the commands need to be repeated, but the programmer does know what condition needs to be true in order for the loop to continue looping. `If / Else` statements offer flexibility in programming by running entire sections of code only if something is true, otherwise it runs something else. Private and Personal Information: @@ -10083,7 +10085,7 @@ en: description_student: Feel the force as you build your own Star Wars game in this lesson. description_teacher: In this lesson, students will practice using events to build a game that they can share online. Featuring R2-D2 and other Star Wars characters, students will be guided through events, then given space to create their own game. 'Functions: Songwriting': - name: 'Functions: Songwriting' + name: Songwriting description_student: Even rockstars need programming skills. This lesson will teach you about functions using lyrics from songs. description_teacher: One of the most magnificent structures in the computer science world is the function. Functions (sometimes called procedures) are mini programs that you can use over and over inside of your bigger program. This lesson will help students intuitively understand why combining chunks of code into functions can be such a helpful practice. Functions in Minecraft: @@ -10091,7 +10093,7 @@ en: description_student: '' description_teacher: '' Functions in Harvester: - name: Functions in Harvester + name: Functions with Harvester description_student: '' description_teacher: '' Copyright and Creativity: @@ -10099,7 +10101,7 @@ en: description_student: '' description_teacher: '' Functions in Artist: - name: Functions in Artist + name: Functions with Artist description_student: Make complex drawings more easily with functions! description_teacher: Students will be introduced to using functions on Code.org. Magnificent images will be created and modified with functions in Artist. For more complicated patterns, students will learn about nesting functions by calling one function from inside another. Determine the Concept: @@ -10107,7 +10109,7 @@ en: description_student: "We aren't giving away any secrets! \nThis lesson could use any of the skills you've learned so far." description_teacher: This lesson brings together concepts from the previous lessons and gives students a chance to think critically about how they would solve each problem, but without telling them which concept to apply. Students will review basic algorithms, debugging, `repeat` loops, conditionals, `while` loops, and functions. Learning Sprites with Sprite Lab: - name: Learning Sprites with Sprite Lab + name: Swimming Fish with Sprite Lab description_student: '' description_teacher: '' Alien Dance Party with Sprite Lab: @@ -10143,25 +10145,25 @@ en: description_student: This lesson will teach you about crowdsourcing, the process of building a project with a team. description_teacher: In computer science, we face some big, daunting problems. Challenges such as finding large prime numbers or sequencing DNA are almost impossible to do as an individual. Adding the power of others makes these tasks manageable. This lesson will show your students how helpful teamwork can be in the industry of computer science. Nested Loops in Bee: - name: Nested Loops in Bee + name: Nested Loops in Maze Nested Loops in Artist: - name: Nested Loops in Artist + name: Fancy Shapes using Nested Loops Nested Loops in Frozen: - name: Nested Loops in Frozen + name: Nested Loops with Frozen Sequencing in the Maze: name: Sequencing in the Maze Programming and Loops with the Artist: - name: Programming and Loops with the Artist + name: Drawing with Loops End of Course Project: name: End of Course Project Conditionals in Minecraft: name: Conditionals in Minecraft About Me: - name: About Me + name: About Me with Sprite Lab Aquatic Conditionals in Minecraft: name: Aquatic Conditionals in Minecraft Access Ability: - name: Access Ability + name: Designing for Accessibility Digital Sharing: name: Digital Sharing Simon Says: @@ -10460,12 +10462,8 @@ en: description_short: Learn the basics of computer science and create your own art, stories, and games. description_audience: 'Ages: 6-10' stages: - Building a Foundation: - name: Building a Foundation - description_student: '' - description_teacher: '' Programming in Maze: - name: Programming in Maze + name: Programming with Angry Birds description_student: '' description_teacher: '' Debugging in Maze: @@ -10477,11 +10475,11 @@ en: description_student: '' description_teacher: '' Programming in Collector: - name: Programming in Collector + name: Collecting Treasure with Laurel description_student: '' description_teacher: '' Programming in Artist: - name: Programming in Artist + name: Creating Art with Code description_student: '' description_teacher: '' 'Loops: Getting Loopy': @@ -10497,11 +10495,11 @@ en: description_student: '' description_teacher: '' Loops in Harvester: - name: Loops in Harvester + name: Harvesting Crops with Loops description_student: '' description_teacher: '' 'Events: The Big Event': - name: 'Events: The Big Event' + name: The Big Event description_student: '' description_teacher: '' Build a Flappy Game: @@ -10513,27 +10511,25 @@ en: description_student: '' description_teacher: '' Events in Play Lab: - name: Events in Play Lab + name: Chase Game with Events description_student: '' description_teacher: '' Looking Ahead: - name: Looking Ahead + name: Looking Ahead with Minecraft description_student: '' description_teacher: '' Binary Bracelets: name: Binary Bracelets description_student: '' description_teacher: '' - 'End of Course Project: Play Lab': - name: 'End of Course Project: Play Lab' Create a Design with Loops: name: Create a Design with Loops 'End of Course Project: Create a Play Lab Game': - name: 'End of Course Project: Create a Play Lab Game' + name: End of Course Project 'Programming: My Robotic Friends': - name: 'Programming: My Robotic Friends' + name: My Robotic Friends Jr. 'Loops: My Loopy Robotic Friends': - name: 'Loops: My Loopy Robotic Friends' + name: My Loopy Robotic Friends Jr. Graphing Data: name: Graphing Data Powerful Passwords: @@ -10566,24 +10562,12 @@ en: description_short: An introduction to computer science for pre-readers. description_audience: 'Ages: 4-7' stages: - 'Debugging: Unspotted Bugs': - name: 'Debugging: Unspotted Bugs' - description_student: '' - description_teacher: 'This lesson will guide students through the steps of debugging. Students will learn the mantra: "What happened? What was supposed to happen? What does that tell you?"' - 'Persistence & Frustration: Stevie and the Big Project': - name: 'Persistence & Frustration: Stevie and the Big Project' - description_student: '' - description_teacher: '' - 'Real-life Algorithms: Plant a Seed': - name: 'Real-life Algorithms: Plant a Seed' - description_student: '' - description_teacher: "In this lesson, students will relate the concept of algorithms back to everyday, real-life activities by planting an actual seed. The goal here is to start building the skills to translate real-world situations to online scenarios and vice versa.\r\n" Sequencing in Maze: name: Sequencing in Maze description_student: '' description_teacher: '' 'Programming: Happy Maps': - name: 'Programming: Happy Maps' + name: Happy Maps description_student: '' description_teacher: The bridge from algorithms to programming can be a short one if students understand the difference between planning out a sequence and encoding that sequence into the appropriate language. This activity will help students gain experience reading and writing in shorthand code. Programming in Maze: @@ -10599,15 +10583,11 @@ en: description_student: '' description_teacher: In collaboration with [r common-sense-media], this lesson helps students learn that many websites ask for information that is private and discusses how to responsibly handle such requests. Students also find out that they can go to exciting places online, but they need to follow certain rules to remain safe. 'Loops: Happy Loops': - name: 'Loops: Happy Loops' + name: Happy Loops description_student: '' description_teacher: Loops are a very helpful and powerful tool in programming. To understand how helpful loops can be, students will need to be driven to want an easier way to solve mundane problems. - Loops in Harvester: - name: Loops in Harvester - description_student: '' - description_teacher: '' Loops in Collector: - name: Loops in Collector + name: Loops with Laurel description_student: '' description_teacher: Building on the concept of repeating instructions from "Happy Loops," this stage will have students using loops to collect treasure more efficiently on Code.org. Loops in Artist: @@ -10615,11 +10595,11 @@ en: description_student: '' description_teacher: Returning to loops, students learn to draw images by looping simple sequences of instructions. In the previous plugged lesson, loops were used to traverse a maze and collect treasure. Here, loops are creating patterns. At the end of this stage, students will be given the opportunity to create their own images using loops. 'Events: The Big Event': - name: 'Events: The Big Event' + name: The Big Event Jr. description_student: '' description_teacher: Events are a great way to add variety to a pre-written algorithm. Sometimes you want your program to be able to respond to the user exactly when the user wants it to. That is what events are for. Events in Play Lab: - name: Events in Play Lab + name: On the Move with Events description_student: '' description_teacher: In this online activity, students will have the opportunity to learn how to use events in Play Lab and to apply all of the coding skills they've learned to create an animated game. It's time to get creative and make a story in the Play Lab! Ocean Scene with Loops: @@ -10627,9 +10607,9 @@ en: Learn to Drag and Drop: name: Learn to Drag and Drop Loops in Ice Age: - name: Loops in Ice Age + name: Loops with Scrat Programming in Ice Age: - name: Programming in Ice Age + name: Programming with Scrat Programming with Rey and BB-8: name: Programming with Rey and BB-8 Sequencing with Scrat: @@ -10677,33 +10657,33 @@ en: description_student: '' description_teacher: '' Loops in Collector: - name: Loops in Collector + name: Loops with Laurel description_student: '' description_teacher: '' Loops in Artist: - name: Loops in Artist + name: Drawing Gardnes with Loops description_student: '' description_teacher: '' 'Events: The Big Event': - name: 'Events: The Big Event' + name: The Big Event Jr. description_student: '' description_teacher: '' Events in Play Lab: - name: Events in Play Lab + name: A Royal Battle with Events description_student: '' description_teacher: '' 'Loops: Getting Loopy': - name: 'Loops: Getting Loopy' + name: Getting Loopy The Right App: name: The Right App Loops in Harvester: - name: Loops in Harvester + name: Loops with Harvester Programming in Maze: - name: Programming in Maze + name: Programming with Angry Birds Programming in Harvester: - name: Programming in Harvester + name: Programming with Harvester Sequencing in Maze: - name: Sequencing in Maze + name: Sequencing with Angry Birds pre-express-2019: title: Pre-reader Express (2019) description: Learn the basics of computer science and internet safety. At the end of the course, create your very own game or story you can share. @@ -12107,6 +12087,8 @@ en: name: Unit 4 Assessment Functions with Parameters and Return Explore: name: Functions with Parameters and Return Explore + Libraries: + name: Libraries title: 'Unit 7: Functions and Libraries' description_audience: '' description_short: '' @@ -12243,3 +12225,21 @@ en: description_audience: '' description_short: '' description: '' + pluralsight: + stages: + Pluralsight LevelGroup: + name: Pluralsight LevelGroup + title: Get access to Pluralsight One + description_audience: '' + description_short: '' + description: '' + express-2018-vn: + stages: + Graph Paper Programming: + name: Graph Paper Programming + Programming in Maze: + name: Programming in Maze + title: CSF Express 2018 For Vietnam + description_audience: '' + description_short: '' + description: '' diff --git a/i18n/locales/source/dashboard/short_instructions.yml b/i18n/locales/source/dashboard/short_instructions.yml index 672fb17807a15..85978b6a2accf 100644 --- a/i18n/locales/source/dashboard/short_instructions.yml +++ b/i18n/locales/source/dashboard/short_instructions.yml @@ -2,6 +2,7 @@ en: data: short_instructions: + "(joshl) Dance Party 1-validated_2019": 'What do you think will happen when you click on the alien? ' 2-3 Artist 1 new: Hi, I'm an artist. You can write code to make me draw almost anything. Use a few blocks to make me draw over the grey lines in the picture. (Each line is 100 pixels long) 2-3 Artist 11: 'Give the stop sign a border by making an octagon with 100 pixels sides. ' 2-3 Artist 12: |- @@ -1801,7 +1802,7 @@ en: Dance Party 1-validated_2019: 'What do you think will happen when you click on the alien? ' Dance Party 1-validated_simple: 'What do you think will happen when you click on the alien? ' Dance Party 2: Change the behavior inside the `___ begins ___` block to make the alien start spinning around. - Dance Party 2_2019: Replace the behavior block in the `sprite begins` block to a different one that will make the alien start spinning around! + Dance Party 2_2019: Replace the behavior block in the `sprite begins` block to a different one that will make the alien start spinning! Dance Party 2_simple: Change the behavior inside the `___ begins ___` block to make the alien start spinning around. Dance Party 3 - Validated: 'Create a new sprite called `alien2`, then make it do a different dance move when it''s clicked. ' Dance Party 3 Ram: Make the sprite do something different when you press the up arrow. @@ -1810,7 +1811,7 @@ en: Dance Party 3_simple: 'Create a new sprite called `alien2`, then make it do a different dance move when it''s clicked. ' Dance Party 4 Validated: 'Create a third sprite called `alien3` and get all of your aliens to stand in a line. ' Dance Party 4: 'Create a third sprite called `alien3` and get all of your aliens to stand in a line. ' - Dance Party 4_2019: 'Create a third sprite that looks like a yellow alien, and get all of your aliens to stand in a line. ' + Dance Party 4_2019: Create a third sprite that looks like a yellow alien, make it do a dance when clicked, and set all of your aliens to stand in a horizontal line. Dance Party 4_simple: 'Create a third sprite called `alien3` and get all of your aliens to stand in a line. ' Dance Party 5 - Validated: Add code to change the color of each alien when it gets clicked. Dance Party 5: Add code to change the color of each alien when it gets clicked. @@ -1830,6 +1831,8 @@ en: Dance Party Predict: 'What do you think will happen when you click on the alien? ' Dance Party Predict_2019: 'What do you think will happen when you click on the alien? ' Dance Party Predict_simple: 'What do you think will happen when you click on the alien? ' + Dance Party Template 1_2019: Replace the behavior block in the `sprite begins` block to a different one that will make the alien start spinning around! + Dance Party Template 2_2019: Template Dance_Events_Example_Video: Use events to make your dance party interactive! Dance_Party_01: Drag the `make a new` block into the workspace, and connect it inside the `setup` block. Dance_Party_01_low: Drag the `make a new` block into the workspace, and connect it inside the `setup` block. @@ -3514,6 +3517,7 @@ en: Virtual Pet Freeplay: 'Freeplay: What more can you make your giraffe do? ' Virtual Pet Freeplay_2019: "**Free Play:** What more can you make your pet do? Try anything you like!" Virtual Pet Freeplay_simple: 'Freeplay: What more can you make your giraffe do? ' + Virtual Pet Template_2019: Create your own virtual pet! Click the **Costumes** tab to create or select a new costume for your virtual pet. In the code below, change the pet sprite's costume to your own. WhileAdventure: Our adventurer wants to collect coins. Can you help her grab as many as she can using only one remove 1 block? 'Widget: Black and White Pixelation': Now make your own image! We've started you off with a 10x10 canvas but you can make it whatever size you want. Happy pixeling! 'Widget: Black and White Pixelation_2018': Now make your own image! We've started you off with a 10x10 canvas but you can make it whatever size you want. Happy pixeling! @@ -3574,7 +3578,7 @@ en: behaviors 5: Move the astronaut diagonally. behaviors 5a: Make the ball roll. behaviors 6: Make the ball roll. - behaviors 7: Drive off into the sunset! + behaviors 7: Drive off into the horizon! behaviors clone me 2: Clone this level and make your own blocks! behaviors clone me Ram: Clone this level and make your own blocks! behaviors clone me joshl: Clone this level and make your own blocks! @@ -5233,6 +5237,7 @@ en: courseE_aboutme_6: Awesome job! Keep going! Try adding more features to your poster to make it even better. Try adding a background, behaviors, and other kinds of events! courseE_aboutme_7: Play with Rikki's poster and code for a bit, then click **Finish**. courseE_aboutme_freeplay: Awesome job! Keep going! Try adding more features to your poster to make it even better. Try adding a background, behaviors, and other kinds of events! + courseE_aboutme_template: Use the **Costumes** tab to create or select a new costume for your sprite! courseE_artist_concept1: 'Recreate this image. ' courseE_artist_concept1_2018: 'Recreate this image. ' courseE_artist_concept1_2019: 'Recreate this image. ' From 4ea9076b75a21445add80d8c0fda031aea6538c3 Mon Sep 17 00:00:00 2001 From: Continuous Integration Date: Mon, 29 Apr 2019 19:03:06 +0000 Subject: [PATCH 09/18] pegasus i18n sync --- i18n/locales/source/pegasus/mobile.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/locales/source/pegasus/mobile.yml b/i18n/locales/source/pegasus/mobile.yml index 5868760c08fbb..e4122e2fe9063 100644 --- a/i18n/locales/source/pegasus/mobile.yml +++ b/i18n/locales/source/pegasus/mobile.yml @@ -842,7 +842,7 @@ carousel_heading_languages: "Partner tutorials in other programming languages" carousel_heading_beyond_languages: "Learn other programming languages" carousel_heading_apps_games: "Make your own apps or games" - carousel_heading_university: "University courses online" + carousel_heading_university: "Online courses and schools" carousel_heading_webpages: "Learn to make web pages" carousel_heading_robots: "Learn to program with robots and devices" carousel_heading_ide: "Platforms popular among teachers" From 50d4d3e3f53a69b5d0b2de29e3a666775ce201e6 Mon Sep 17 00:00:00 2001 From: Continuous Integration Date: Mon, 29 Apr 2019 19:03:09 +0000 Subject: [PATCH 10/18] apps i18n sync --- i18n/locales/source/blockly-mooc/common.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/locales/source/blockly-mooc/common.json b/i18n/locales/source/blockly-mooc/common.json index 79394f766bff9..3698ce8d485ac 100644 --- a/i18n/locales/source/blockly-mooc/common.json +++ b/i18n/locales/source/blockly-mooc/common.json @@ -1087,7 +1087,7 @@ "projectsViewAll": "View all projects", "projectsViewProjectGallery": "View projects", "projects": "Projects", - "projectsSubHeading": "Over {project_count} million projects created", + "projectsSubHeading": "{project_count} projects created", "print": "Print", "privacyPolicy": "Privacy Policy", "projectWarning": "Note: You are on a level that is part of a longer project. Changes made on this level will also appear in other levels in the project.", From 449fe1c620160dcfb83a0fc69c0a0af5915d32c1 Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Mon, 29 Apr 2019 12:49:49 -0700 Subject: [PATCH 11/18] move fake timestamps into sectionAssessmentsRedux --- .../sectionAssessments/assessmentsTestHelpers.js | 16 ++++++---------- .../sectionAssessmentsRedux.js | 12 ++++++++---- .../sectionAssessmentsReduxTest.js | 4 ++-- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js b/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js index 2df2c340fa4e7..3f7c4a28c09b2 100644 --- a/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js +++ b/apps/src/templates/sectionAssessments/assessmentsTestHelpers.js @@ -1,12 +1,8 @@ import i18n from '@cdo/locale'; - -/* In order for the sorting of the submission timestamp column to work correctly in the SubmissionStatusAssessmentsTable, the submissionTimeStamp field must be a Date. So, we pass in arbitrary Dates in the past to handle when the assessment is in progress or not yet started. */ -export const inProgressFakeTimestamp = new Date( - '1990-01-01T20:52:05.000+00:00' -); -export const notStartedFakeTimestamp = new Date( - '1980-01-01T20:52:05.000+00:00' -); +import { + inProgressFakeTimestamp, + notStartedFakeTimestamp +} from '@cdo/apps/templates/sectionAssessments/sectionAssessmentsRedux'; export const testDataTimestamps = { newest: new Date('2019-04-09T20:52:05.000+00:00'), @@ -15,8 +11,8 @@ export const testDataTimestamps = { old: new Date('2018-12-09T20:52:05.000+00:00'), older: new Date('2018-10-09T20:52:05.000+00:00'), oldest: new Date('2018-10-07T20:52:05.000+00:00'), - notStarted: new Date('1980-01-01T20:52:05.000+00:00'), - inProgress: new Date('1990-01-01T20:52:05.000+00:00') + notStarted: notStartedFakeTimestamp, + inProgress: inProgressFakeTimestamp }; // Data for students' assessments multiple choice table diff --git a/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js b/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js index bd1fb69b3f70d..1ad07d7f102bf 100644 --- a/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js +++ b/apps/src/templates/sectionAssessments/sectionAssessmentsRedux.js @@ -4,10 +4,6 @@ import { getSelectedScriptName } from '@cdo/apps/redux/scriptSelectionRedux'; import experiments from '@cdo/apps/util/experiments'; -import { - inProgressFakeTimestamp, - notStartedFakeTimestamp -} from '@cdo/apps/templates/sectionAssessments/assessmentsTestHelpers'; export const ALL_STUDENT_FILTER = 0; @@ -60,6 +56,14 @@ const ANSWER_LETTERS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']; export const ASSESSMENT_FEEDBACK_OPTION_ID = 0; +/* In order for the sorting of the submission timestamp column to work correctly in the SubmissionStatusAssessmentsTable, the submissionTimeStamp field must be a Date. So, we pass in arbitrary Dates in the past to handle when the assessment is in progress or not yet started. */ +export const inProgressFakeTimestamp = new Date( + '1990-01-01T20:52:05.000+00:00' +); +export const notStartedFakeTimestamp = new Date( + '1980-01-01T20:52:05.000+00:00' +); + // Action type constants const SET_ASSESSMENT_RESPONSES = 'sectionAssessments/SET_ASSESSMENT_RESPONSES'; const SET_ASSESSMENTS_QUESTIONS = diff --git a/apps/test/unit/templates/sectionAssessments/sectionAssessmentsReduxTest.js b/apps/test/unit/templates/sectionAssessments/sectionAssessmentsReduxTest.js index bd190f1cf5830..0fefebf240369 100644 --- a/apps/test/unit/templates/sectionAssessments/sectionAssessmentsReduxTest.js +++ b/apps/test/unit/templates/sectionAssessments/sectionAssessmentsReduxTest.js @@ -28,12 +28,12 @@ import sectionAssessments, { setFeedback, doesCurrentCourseUseFeedback, getExportableFeedbackData, - isCurrentScriptCSD + isCurrentScriptCSD, + notStartedFakeTimestamp } from '@cdo/apps/templates/sectionAssessments/sectionAssessmentsRedux'; import {setSection} from '@cdo/apps/redux/sectionDataRedux'; import {setScriptId} from '@cdo/apps/redux/scriptSelectionRedux'; import experiments from '@cdo/apps/util/experiments'; -import {notStartedFakeTimestamp} from '@cdo/apps/templates/sectionAssessments/assessmentsTestHelpers'; describe('sectionAssessmentsRedux', () => { const initialState = sectionAssessments(undefined, {}); From c68b49621924d56c472f3cfe7a6b174f0dd1b2b9 Mon Sep 17 00:00:00 2001 From: Elijah Hamovitz Date: Mon, 29 Apr 2019 13:08:41 -0700 Subject: [PATCH 12/18] always link to studio url from Project Card, even if it's beinmg rendered by pegasus --- apps/src/templates/projects/ProjectCard.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/src/templates/projects/ProjectCard.jsx b/apps/src/templates/projects/ProjectCard.jsx index 58206a1f9d281..ae2f06f0d5f96 100644 --- a/apps/src/templates/projects/ProjectCard.jsx +++ b/apps/src/templates/projects/ProjectCard.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import color from '../../util/color'; import i18n from '@cdo/locale'; +import {studio} from '@cdo/apps/lib/util/urlHelpers'; import $ from 'jquery'; const PROJECT_DEFAULT_IMAGE = '/blockly/media/projects/project_default.png'; @@ -120,7 +121,7 @@ export default class ProjectCard extends React.Component {
From 0e31b50cdb962d32234aed071dcb43477665a5eb Mon Sep 17 00:00:00 2001 From: Will Jordan Date: Mon, 29 Apr 2019 13:35:01 -0700 Subject: [PATCH 13/18] UI test browser config: add 'w3c' tags to Firefox + Safari Followup to #28084. --- dashboard/test/ui/browsers.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/dashboard/test/ui/browsers.json b/dashboard/test/ui/browsers.json index 7f803873de86b..66ad72c18b974 100644 --- a/dashboard/test/ui/browsers.json +++ b/dashboard/test/ui/browsers.json @@ -13,7 +13,8 @@ "name": "Safari", "browserName": "Safari", "platform": "macOS 10.14", - "version": "12.0" + "version": "12.0", + "w3c": true }, { "name": "IE11", @@ -25,7 +26,8 @@ "name": "Firefox", "browserName": "firefox", "version": "latest", - "platform": "Windows 10" + "platform": "Windows 10", + "w3c": true }, { "name": "iPhone", From 465421eee0934f0254a5b31e4bb4fe90215202aa Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Mon, 29 Apr 2019 14:59:44 -0700 Subject: [PATCH 14/18] add deprecated note to unplugged levels in levelbuilder --- dashboard/app/views/levels/new.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/app/views/levels/new.html.haml b/dashboard/app/views/levels/new.html.haml index 07af7c8a759ec..a05ad911b247c 100644 --- a/dashboard/app/views/levels/new.html.haml +++ b/dashboard/app/views/levels/new.html.haml @@ -25,7 +25,7 @@ %h2 Content %ul %li= link_to 'Build a Standalone Video Level', new_level_path(type: 'StandaloneVideo') - %li= link_to 'Build an Unplugged Level', new_level_path(type: 'Unplugged') + %li= link_to 'Build an Unplugged Level (deprecated)', new_level_path(type: 'Unplugged') %h2 DSL-Defined %ul From 147e6923bee5ea033a9997a90930b85103124c26 Mon Sep 17 00:00:00 2001 From: Clare Constantine Date: Mon, 29 Apr 2019 16:16:31 -0700 Subject: [PATCH 15/18] pr feedback --- .../components/workshop_enrollment_school_info.jsx | 4 ++-- dashboard/app/models/pd/enrollment.rb | 9 +++++++++ .../api/v1/pd/workshop_enrollment_serializer.rb | 9 +++------ 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/apps/src/code-studio/pd/workshop_dashboard/components/workshop_enrollment_school_info.jsx b/apps/src/code-studio/pd/workshop_dashboard/components/workshop_enrollment_school_info.jsx index 09a0638061aa5..5dc329c2679aa 100644 --- a/apps/src/code-studio/pd/workshop_dashboard/components/workshop_enrollment_school_info.jsx +++ b/apps/src/code-studio/pd/workshop_dashboard/components/workshop_enrollment_school_info.jsx @@ -103,8 +103,8 @@ export class WorkshopEnrollmentSchoolInfo extends React.Component { } scholarshipInfo(enrollment) { - if (enrollment.new_facilitator) { - return No (New Facilitator); + if (enrollment.scholarship_ineligible_reason) { + return {enrollment.scholarship_ineligible_reason}; } if ( diff --git a/dashboard/app/models/pd/enrollment.rb b/dashboard/app/models/pd/enrollment.rb index e476ea219f14a..067c87e395975 100644 --- a/dashboard/app/models/pd/enrollment.rb +++ b/dashboard/app/models/pd/enrollment.rb @@ -35,6 +35,7 @@ class Pd::Enrollment < ActiveRecord::Base include Pd::SharedWorkshopConstants include Pd::WorkshopSurveyConstants include SerializedProperties + include Pd::Application::ActiveApplicationModels acts_as_paranoid # Use deleted_at column instead of deleting rows. @@ -269,6 +270,14 @@ def scholarship_status end end + # Returns true if this enrollment is for a novice or apprentice facilitator (accepted this year) + # attending a local summer workshop as a participant to observe the facilitation techniques + def newly_accepted_facilitator? + workshop.local_summer? && + workshop.summer_workshop_school_year == APPLICATION_CURRENT_YEAR && + FACILITATOR_APPLICATION_CLASS.where(user_id: user_id).first&.status == 'accepted' + end + # Removes the name and email information stored within this Pd::Enrollment. def clear_data write_attribute :name, nil diff --git a/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb b/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb index e9920047531fa..9ee9596c87f1c 100644 --- a/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb +++ b/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb @@ -1,10 +1,9 @@ class Api::V1::Pd::WorkshopEnrollmentSerializer < ActiveModel::Serializer - include Pd::Application::ActiveApplicationModels attributes :id, :first_name, :last_name, :email, :district_name, :school, :role, :grades_teaching, :attended_csf_intro_workshop, :csf_course_experience, :csf_courses_planned, :csf_has_physical_curriculum_guide, :user_id, :attended, :pre_workshop_survey, :previous_courses, :replace_existing, :attendances, - :scholarship_status, :new_facilitator + :scholarship_status, :scholarship_ineligible_reason def user_id user = object.resolve_user @@ -35,9 +34,7 @@ def attendances object.attendances.count end - def new_facilitator - object.workshop.local_summer? && - object.workshop.summer_workshop_school_year == APPLICATION_CURRENT_YEAR && - FACILITATOR_APPLICATION_CLASS.where(user_id: object.user_id).first&.status == 'accepted' + def scholarship_ineligible_reason + object.newly_accepted_facilitator? ? "No (New Facilitator)" : nil end end From dc0e3da7169335872c20607f964d44b39e13b3fa Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Mon, 29 Apr 2019 16:16:42 -0700 Subject: [PATCH 16/18] only call updateHiddenScript if assigning a script, but not a course --- apps/src/templates/courseOverview/AssignToSection.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/src/templates/courseOverview/AssignToSection.js b/apps/src/templates/courseOverview/AssignToSection.js index 56d91643ac75b..4b030f710183b 100644 --- a/apps/src/templates/courseOverview/AssignToSection.js +++ b/apps/src/templates/courseOverview/AssignToSection.js @@ -69,7 +69,9 @@ class AssignToSection extends Component { }) }) .done(result => { - updateHiddenScript(section.id, scriptId, false); + if (scriptId) { + updateHiddenScript(section.id, scriptId, false); + } this.setState({ sectionIndexToAssign: null }); From ccc611ca4972a240072c3289ae428da7afbebf9d Mon Sep 17 00:00:00 2001 From: Clare Constantine Date: Mon, 29 Apr 2019 16:26:15 -0700 Subject: [PATCH 17/18] update test, create constant --- dashboard/app/models/pd/enrollment_constants.rb | 5 +++++ .../api/v1/pd/workshop_enrollment_serializer.rb | 2 +- .../api/v1/pd/workshop_enrollment_serializer_test.rb | 10 ++++++---- 3 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 dashboard/app/models/pd/enrollment_constants.rb diff --git a/dashboard/app/models/pd/enrollment_constants.rb b/dashboard/app/models/pd/enrollment_constants.rb new file mode 100644 index 0000000000000..d766242e3ca37 --- /dev/null +++ b/dashboard/app/models/pd/enrollment_constants.rb @@ -0,0 +1,5 @@ +module Pd + module EnrollmentConstants + NO_NEW_FACILITATOR = "No (New Facilitator)" + end +end diff --git a/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb b/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb index 9ee9596c87f1c..b549901527240 100644 --- a/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb +++ b/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb @@ -35,6 +35,6 @@ def attendances end def scholarship_ineligible_reason - object.newly_accepted_facilitator? ? "No (New Facilitator)" : nil + object.newly_accepted_facilitator? ? Pd::EnrollmentConstants::NO_NEW_FACILITATOR : nil end end diff --git a/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb b/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb index e10eea8c69a8d..13b7851fdcf8c 100644 --- a/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb +++ b/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb @@ -2,6 +2,8 @@ class Api::V1::Pd::WorkshopEnrollmentSerializerTest < ::ActionController::TestCase include Pd::Application::ActiveApplicationModels + include Pd::EnrollmentConstants + test 'serialized workshop enrollment has expected attributes' do enrollment = create :pd_enrollment expected_attributes = [ @@ -9,7 +11,7 @@ class Api::V1::Pd::WorkshopEnrollmentSerializerTest < ::ActionController::TestCa :grades_teaching, :attended_csf_intro_workshop, :csf_course_experience, :csf_courses_planned, :csf_has_physical_curriculum_guide, :user_id, :attended, :pre_workshop_survey, :previous_courses, :replace_existing, :attendances, - :scholarship_status, :new_facilitator + :scholarship_status, :scholarship_ineligible_reason ] serialized = ::Api::V1::Pd::WorkshopEnrollmentSerializer.new(enrollment).attributes @@ -25,17 +27,17 @@ class Api::V1::Pd::WorkshopEnrollmentSerializerTest < ::ActionController::TestCa assert_equal enrollment.attendances.count, serialized[:attendances] end - test 'new_facilitator' do + test 'scholarship_ineligible_reason' do summer_workshop = create :pd_workshop, :local_summer_workshop_upcoming enrollment = create :pd_enrollment, :from_user, workshop: summer_workshop serialized = ::Api::V1::Pd::WorkshopEnrollmentSerializer.new(summer_workshop.enrollments.first).attributes - refute serialized[:new_facilitator] + assert_nil serialized[:scholarship_ineligible_reason] fac_app = create FACILITATOR_APPLICATION_FACTORY, user: enrollment.user fac_app.update(status: 'accepted') serialized = ::Api::V1::Pd::WorkshopEnrollmentSerializer.new(summer_workshop.enrollments.first).attributes - assert serialized[:new_facilitator] + assert_equal NO_NEW_FACILITATOR, serialized[:scholarship_ineligible_reason] end end From 327d38c35e82c672df98c9f2a9672f8de44494d3 Mon Sep 17 00:00:00 2001 From: Clare Constantine Date: Mon, 29 Apr 2019 17:20:09 -0700 Subject: [PATCH 18/18] rename constant --- dashboard/app/models/pd/enrollment_constants.rb | 2 +- .../app/serializers/api/v1/pd/workshop_enrollment_serializer.rb | 2 +- .../api/v1/pd/workshop_enrollment_serializer_test.rb | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dashboard/app/models/pd/enrollment_constants.rb b/dashboard/app/models/pd/enrollment_constants.rb index d766242e3ca37..973149599410e 100644 --- a/dashboard/app/models/pd/enrollment_constants.rb +++ b/dashboard/app/models/pd/enrollment_constants.rb @@ -1,5 +1,5 @@ module Pd module EnrollmentConstants - NO_NEW_FACILITATOR = "No (New Facilitator)" + SCHOLARSHIP_INELIGIBLE_NEW_FACILITATOR = "No (New Facilitator)" end end diff --git a/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb b/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb index b549901527240..93ec0289bb443 100644 --- a/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb +++ b/dashboard/app/serializers/api/v1/pd/workshop_enrollment_serializer.rb @@ -35,6 +35,6 @@ def attendances end def scholarship_ineligible_reason - object.newly_accepted_facilitator? ? Pd::EnrollmentConstants::NO_NEW_FACILITATOR : nil + object.newly_accepted_facilitator? ? Pd::EnrollmentConstants::SCHOLARSHIP_INELIGIBLE_NEW_FACILITATOR : nil end end diff --git a/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb b/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb index 13b7851fdcf8c..6fb73e255e813 100644 --- a/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb +++ b/dashboard/test/serializers/api/v1/pd/workshop_enrollment_serializer_test.rb @@ -38,6 +38,6 @@ class Api::V1::Pd::WorkshopEnrollmentSerializerTest < ::ActionController::TestCa fac_app.update(status: 'accepted') serialized = ::Api::V1::Pd::WorkshopEnrollmentSerializer.new(summer_workshop.enrollments.first).attributes - assert_equal NO_NEW_FACILITATOR, serialized[:scholarship_ineligible_reason] + assert_equal SCHOLARSHIP_INELIGIBLE_NEW_FACILITATOR, serialized[:scholarship_ineligible_reason] end end