화면을 아래로 스크롤한 캡처이다. 빨간 번호 3은 위 캡처에서 보이지 않던 구성요소이다.
코드 안의 회색 줄은 원문 영어 주석이고, 파란 줄은 그 영어 주석의 번역이며, 연분홍 줄은 코드가 하는 일의 설명이다.
| 번호 | 이름 | 종류 | CL 코드 원문, 번역, 설명 |
|---|
| 1 | graph | 그래프 | # Creates a number that matches the amount of time passed
# since the button has been pressed.
▷ 버튼을 누른 뒤 지난 시간과 같은 숫자를 만든다.
number("t_0"): button.timeSincePress()
▶ 그래프의 변수 t_0은 행동 버튼 button을 누른 뒤 지난 시간(button.timeSincePress())으로 한다.
number("이름")은 그래핑 계산기 안의 변수 값을 정한다. timeSincePress()는 버튼을 누른 뒤 지난 시간(초)을 알려 주며, 재설정 링크를 누르거나 같은 화면의 구성요소를 선택하거나 편집하면 0으로 돌아가고 기본으로 10초까지 센다.
# Creates numbers that reflect the numeric values in
# each of the two cells in the column. If no value is entered
# firstDefinedValue will output 1 for the numbers L and W.
▷ 그 열의 두 셀에 있는 숫자 값을 반영하는 숫자들을 만든다. 값이 입력되지 않으면 firstDefinedValue가 숫자 L과 W에 대해 1을 내놓는다.
number("L"): firstDefinedValue(table.cellNumericValue(1,1),1)
▶ 그래프의 변수 L은 표 table의 1행 1열 셀의 숫자 값이 정의되어 있으면 그 값, 아니면 1(firstDefinedValue(table.cellNumericValue(1,1),1))로 한다.
firstDefinedValue(…)는 같은 종류의 인자를 여러 개 받아 처음으로 정의된(유효한) 값을 돌려주고, cellNumericValue(행, 열)은 그 셀을 계산한 숫자 값을 가져온다. 학생이 "2 + 2"를 입력하면 4를 돌려준다.
number("W"): firstDefinedValue(table.cellNumericValue(1,2),1)
▶ 그래프의 변수 W는 표 table의 1행 2열 셀의 숫자 값이 정의되어 있으면 그 값, 아니면 1(firstDefinedValue(table.cellNumericValue(1,2),1))로 한다.
# This code indicates that there is no student work done
# in this component. Marking it as "true" allows the teacher
# dashboard to show a check instead of a dot.
▷ 이 코드는 이 구성요소에서 학생이 한 작업이 없다는 것을 나타낸다. "true"로 표시하면 교사 대시보드에 점 대신 체크 표시가 나타난다.
readOnly: true
▶ 그래프의 읽기 전용 여부(readOnly)는 true로 한다.
readOnly는 참이면 화면의 정답 판정에서 이 구성요소를 무시하고, 모든 구성요소의 readOnly가 참이면 대시보드 요약에 대시(-)를 표시한다.
|
| 2 | table | 표 | # This sink will mark this screen as correct on the
# teacher dashboard if the conditions that follow are met.
▷ 이 sink는 뒤따르는 조건이 맞으면 교사 대시보드에서 이 화면을 정답으로 표시한다.
correct:
(this.cellNumericValue(1,1) = 8 and this.cellNumericValue(1,2) = 3) or
(this.cellNumericValue(1,2) = 8 and this.cellNumericValue(1,1) = 3)
▶ 표의 정답 조건(correct)은 이 표의 1행 1열 셀의 숫자 값이 8이고 1행 2열 셀의 숫자 값이 3이거나, 1행 2열 셀의 숫자 값이 8이고 1행 1열 셀의 숫자 값이 3인 경우로 한다.
correct는 참이면 교사 대시보드 요약에 회색 체크를 표시한다. this는 이 구성요소(표)이고, 괄호 안의 =는 두 값이 같은지 비교하며, and는 둘 다 참이어야 참이고, or는 둘 중 하나라도 참이면 참이다. 길이와 너비를 8과 3으로, 순서와 상관없이 입력하면 정답이다.
|
| 3 | button | 행동 버튼 | # Resets the button when the point is moved.
▷ 점을 움직이면 버튼을 재설정한다.
resetOnChange: "${graph.number("x_1")}${graph.number("y_1")}"
▶ 행동 버튼의 변경 시 자동 재설정(resetOnChange)은 그래프 graph의 변수 x_1의 값과 변수 y_1의 값을 이어 붙인 글자 "${graph.number("x_1")}${graph.number("y_1")}"로 한다.
resetOnChange는 글자 값을 받아 그 값이 바뀌면 구성요소를 재설정한다. ${ }는 글자 안에 변수의 값을 끼워 넣는 표기이고, 그 안의 "x_1", "y_1"은 number(...)에 넘기는 변수 이름이다.
# Disables the button once it's been pressed and until it is reset.
▷ 버튼을 한 번 누르면 재설정될 때까지 버튼을 비활성화한다.
disabled: this.timeSincePress() > 0
▶ 행동 버튼의 비활성화 조건(disabled)은 이 버튼을 누른 뒤 지난 시간이 0보다 큰지 비교한 결과(this.timeSincePress() > 0)로 한다.
disabled는 참이면 버튼을 회색으로 만들고 누를 수 없게 한다.
# Adds a link to reset the button after the animation has completed
# The empty string for the "otherwise" condition is an indicator that
# the reset link will not be shown when the "otherwise" condition is in use.
▷ 애니메이션이 끝난 뒤 버튼을 재설정하는 링크를 추가한다. "otherwise" 조건에서 빈 글자를 쓴 것은 "otherwise" 조건일 때 재설정 링크가 보이지 않는다는 표시이다.
resetLabel: when graph.number("a_{nimComplete}") = 1 "Reset" otherwise ""
▶ 행동 버튼의 재설정 라벨(resetLabel)은 그래프 graph의 변수 a_{nimComplete}가 1이면 "Reset"(재설정), 그렇지 않으면 빈 글자로 한다.
resetLabel은 재설정 링크에 표시할 글자를 정하고, when은 조건을 차례로 확인해 처음 맞는 값을 쓴다.
|
