두뇌 화면에 두 번째 버튼 추가 - 블록 기반

이제 학생들은 뇌의 화면을 하나의 큰 버튼처럼 다루는 경험을 쌓았으므로, 화면을 두 개의 버튼으로 바꿀 수 있습니다. 이 활동에서는 학생들에게 중첩된 [If then else] 블록을 사용하여 조건문을 보다 효과적으로 관리하고 그렇게 하는 기본 논리를 소개할 것입니다. 학생들은 먼저 화면을 눌러 로봇을 좌우로 돌리는 프로젝트를 만드는 과정을 안내받습니다. 하지만 로봇을 왼쪽으로 돌렸던 버튼이 오른쪽으로 돌도록, 그리고 그 반대로 버튼을 바꾸라는 요청을 받습니다.

이 활동에서 사용되는 [If then]및[If then else] 블록이나 기타 블록에 대한 자세한 내용은 VEXcode V5 내의 도움말 정보를 참조하세요. 이 내장된 도움말 도구에 대한 자세한 내용을 보려면 여기를 클릭하세요.

이 활동에서 학생들이 할 일은 다음과 같습니다.

• StopOrDrive프로젝트와 픽셀 단위로 나타낸 뇌 화면의 레이아웃을 검토합니다.

• 프로그래밍 추론에 대한 지침을 받으면서 새로운LeftOrRight프로젝트를 빌드합니다.

• 화면의 버튼이 반대로 작동하도록 프로젝트를 수정합니다.

• 학습 확장: 화면을 두 개의 버튼으로 나누어 누르면 로봇이 좌우로 회전합니다.

이 섹션의 교수 전략에 대한 제안을 보려면 '해야 할 일 또는 하지 말아야 할 일 진행 가이드'의 전달 컬럼을 검토하세요! (Google 문서 / .docx / .pdf)

화면 중앙의 x 값은 화면 너비의 절반(픽셀)과 같습니다. 따라서 중심점의 x값은 240입니다. 학생들은 화면을 왼쪽이나 오른쪽으로 눌렀는지에 대한 조건을 프로그래밍하기 위해 이 숫자가 필요합니다. 따라서 모든 값이 올바른지 꼭 확인하세요.

앞으로 Rethink 섹션의 사용자 인터페이스 챌린지에서는 학생들에게 지금까지 배운 내용을 적용하여 화면에 4개의 버튼을 만들어야 합니다. 그러기 위해서는 x값과 y값이 모두 필요합니다.

이 지침에서는 필요에 따라 학생들이 VEXcode V5 내의 튜토리얼을 사용하도록 안내합니다. 추가 지원이 필요한 경우VEX 라이브러리의 보충 도움말 문서를 참조하세요.

프로젝트의 골격(제어 블록만 해당)에는 중첩 블록이 포함됩니다. [Forever] 루프 내부의 [If then else] 블록과 [If then else] 블록 내부의 [If then else] 블록이 포함됩니다. 이 방법은 필요 이상으로 복잡해 보일 수 있는데, 대신 순차적인 [If then] 블록을 사용할 수 있기 때문입니다. 하지만 연속적인 [If then] 블록을 사용하는 것은 좋은 프로그래밍 방식이 아닙니다.

왼쪽의 거부된 프로젝트는 LeftOrRight 프로젝트의 순차적 조건부 버전입니다. 화면을 누르고 x값이 240보다 작으면 클로봇이 왼쪽으로 회전합니다. 화면을 누르고 x값이 240보다 크면 클로봇이 오른쪽으로 회전합니다. 이 프로젝트의 문제점은 두 가지 조건이 모두 참일 위험이 있다는 것입니다. 순차적인 [If then] 블록을 사용할 때마다 프로젝트 내에서 버그가 발생할 위험이 있습니다. 왜냐하면 참인 조건문이 두 개 이상 있을 수 있기 때문입니다. 버그로 인해 예측이 불가능합니다.

가운데에는 LeftOrRight 프로젝트의 골격이 있고, 오른쪽에는 조건문과 Drivetrain 블록이 삽입된 프로젝트가 나와 있습니다. 이 버전의 프로젝트에서는 논리가 약간 다릅니다. 화면을 누르면 x 값이 240보다 작거나(좌회전) 240보다 작지 않습니다(우회전). 거기에는 또 다른 조건문이 필요하지 않습니다. 화면을 누르면 240보다 작거나 그렇지 않습니다. 우리가 관심을 가져야 할 버튼은 두 개뿐입니다. 오른쪽 프로젝트는 아직 완료되지 않았습니다.

학생들은 프로젝트에 대한 이 두 가지 접근 방식의 차이점을 이해해야 합니다. 기본 논리의 차이점을 이해하는 것은 프로그래머를 개발하는 데 큰 도움이 될 것입니다.

테스트하는 동안 학생들은 Clawbot 뒤에서 사용자 인터페이스를 사용하면 반대로 작동하는 것처럼 보인다는 것을 알아야 합니다. 사용자 관점에서 볼 때, 클로봇은 사용자가 누르는 쪽에서 멀어집니다. 이는 최적의 사용자 경험이 아닙니다.

학생들은 엔지니어링 노트북에 이를 기록하면서 프로젝트에 대한 이러한 변경 사항을 계획, 테스트하고 개선해야 합니다. 개별 엔지니어링 노트북 평가 기준에 대해 다음 링크 중 하나를 클릭하세요(Google Doc / .docx / .pdf), 또는 팀 노트북에 대해 다음 링크 중 하나를 클릭하세요(Google Doc / .docx / .pdf). 학생들에게 작업을 시작하기 전에 점수 계산 방법을 설명하는 것을 잊지 마세요.

위에 제기된 문제를 해결하는 데는 두 가지 방법이 있습니다. 첫 번째 방법은 설명서에 적힌 방법입니다. LeftOrRight 프로젝트를 검토하고 사용자가 Clawbot 뒤에서 버튼을 누를 때 사용자가 화면 왼쪽을 누르면 로봇이 오른쪽으로 회전하도록 수정합니다. 그렇지 않으면 클로봇은 왼쪽으로 돈다.

다른 해결책은 Operator 블록을 전환하여 x 값이 240보다 클 때 Clawbot이 왼쪽으로 회전하도록 하는 것입니다.

x 값이 240(화면 왼쪽)보다 작을 때 조건문을 프로그래밍할 때는 좌표 평면의 좌표를 사용해야 했습니다. 두뇌 화면에 시각적 버튼을 그리려면 좌표도 사용해야 합니다.
V5 로봇 두뇌 화면의 좌표가 표시된 2단계로 돌아갑니다.

Q:화면 오른쪽 가장자리의 x 값은 무엇입니까?
A:x 값은 왼쪽 가장자리의 0에서 오른쪽 가장자리의 480까지 증가합니다.

Q:따라서 x 값의 범위는 480(0~480)입니다. y 값의 범위는 무엇입니까?
A:y 값의 범위는 240(0~240)입니다.

Q:이 좌표 평면의 원점(0, 0)은 어디에 있습니까?
A:원점은 왼쪽 위입니다.

Q:y 값이 0일 때 화면 맨 위에 있습니다. 이게 왜 특이한 걸까요?
A:일반적으로 y값은 위로 갈수록 증가하지만, V5 화면에서는 아래로 갈수록 y값이 증가합니다. 하지만 화면 왼쪽 상단의 원점(0, 0)에서 멀어질수록 y 값이 증가하는 것으로 생각할 수 있습니다.

Rethink 섹션의 사용자 인터페이스 챌린지에서 학생들은 Clawbot의 발톱과 팔을 제어하기 위해 화면에 4개의 버튼을 만드는 프로젝트를 개발해야 합니다. 이 과제에서는 화면에 네 개의 버튼이 표시되도록 요청합니다. 이전 페이지와 마찬가지로 이 학습 확장은 해당 과제에 대비하는 데 도움이 됩니다. 과제에는 프로그래밍할 버튼이 4개 있지만 이 과제에는 2개만 있기 때문입니다.

학생들이 프로그램에 이벤트를 추가하여 프로젝트가 실행될 때 화면에 보이는 버튼 2개가 나타나도록 합니다. 학생들에게 이벤트 및 모양 블록, 특히 [사각형 그리기] 블록에 대한 정보를 알아보려면 VEXcode V5의 도움말 기능을 사용하라고 제안합니다. [사각형 그리기] 블록에서 픽셀 수를 기준으로 뇌의 화면이 좌표계로 어떻게 구성되는지 살펴보도록 학생들에게 지시합니다. 해당 블록 내에서 매개변수를 설정하려면 이를 이해해야 합니다. 또한, 이벤트를 방송하는 방법을 이해해야 합니다. 이 경우 이벤트는 버튼을 그리는 것입니다.

학생들은 엔지니어링 노트북에 이를 문서화하는 동시에 프로젝트에 대한 이러한 변경 사항을 계획, 테스트하고 개선해야 합니다. 개별 엔지니어링 노트북 평가 기준의 경우 다음 링크 중 하나를 클릭하세요(Google 문서 / .docx / .pdf), 또는 팀 노트북의 경우 다음 링크 중 하나를 클릭하세요(Google 문서 / .docx / .pdf).

다음은 예시 솔루션입니다.

더욱 전문적이고 사실적인 경험을 위해 학생들에게 두 가지 색상 선택에 대한 피드백을 요청해 보세요.
선택한 색상이 인터페이스를 사용하고 싶게 만드는가, 아니면 사용자 입장에서 어떤 색상을 선호할까?
훌륭한 사용자 인터페이스를 개발하는 과정의 일부는 사용자 경험, 심지어 미적 선호도에 대한 데이터를 수집하는 것입니다.