5주차 : 구구단을 하자!

 

 

 

 

 

Procedure(프로시저)
-같은 작업을 여러번 반복할 때 호출할 수 있는 것

 

 

 

TextToSpeech(TTS)
:글자를 음성으로 읽어주는 기능

랜덤숫자 만들기
-(1)에서 (100)까지의 랜덤 숫자 만들기
*우리는 (2)에서 (20)까지의 랜덤 숫자를 만들 예정

Layout(레이아웃)
-수평정렬
-수직정렬

수평선 만들기
-Height를 1 pixels로 변경 (화면 높이의 1pixels를 차지하도록)
-Width를 90%로 변경 (화면 너비의 90%를 차지하도록)
-Text 삭제 (수평선이기 때문에)
-BackgroundColor 변경 (잘 보이기 위함)

 

 

*배운 내용 직접 실행해보기
1) 구글 로그인 & 앱 인벤터 실행

2) projects - start new project 이름 설정하고 시작하기
이름 지정: Dig005_gugudan1

3) 디자인하기
3-1) Screen components 디자인하기
●image 1개: 수식기호를 담은 이미지
●Label 1개 : 간격 추가
●HorizontalArrangement(수평정렬 레이아웃)에 담은 Label 1개 : 문제 표시
●Label 1개 : 수평선
● HorizontalArrangement(수평정렬 레이아웃)에 담은 Label 2개와 image 1개 : 문제 표시
● HorizontalArrangement(수평정렬 레이아웃)에 담은 Textbox와 Button : 답 작성, 제출 버튼
●Label 1개 : 수평선
●VerticalArrangement(수직정렬 레이아웃)에 담은 Label6,7 : 채점과 점수 표시
●Notifier1개
●TextToSpeech1개

3-2) screen 디자인
-수평정렬
-BackgroundColor 변경: 오렌지색
-Theme를 Device Default로 변경 (타이틀바 변경)
-Title 변경: 구구단을 하자!
-icon 변경

3-3) image1 디자인
●image1
- 이미지 삽입
-이미지 크기 조절(Height,Width를 맞게 조절)

image1 디자인
3-4) HorizontalArrangement(수평정렬 레이아웃)에 담은 Label1 디자인
●HorizontalArrangement
- Width를 90%로 변경 (화면 너비에 90%를 차지하도록)
●Label 1
- FontBold 체크 (굵은 글씨로 표시하도록)
-FontSize 18로 변경
-Text 변경 : ￭ 문제 :
(￭ 기호는 한글에서 복사붙여넣기로 할 수 있음)

HorizontalArrangement(수평정렬 레이아웃)에 담은 Label 디자인
3-5) Label2 디자인하기 (수평선 만들기)
●Label2
-BackgroundColor 변경 : 회색(잘 보이기 위함)
-Height를 1 pixels로 변경 (화면 높이의 1pixels를 차지하도록)
-Width를 90%로 변경 (화면 너비의 90%를 차지하도록)
-Text 삭제 (수평선이기 때문에)

3-6) HorizontalArrangement(수평정렬 레이아웃)에 담은 Label3,4와 이미지 디자인
●HorizontalArrangement2
- Width를 80%로 변경 (화면 너비에 80%를 차지하도록)
-AlignVertical을 center로 변경(글씨가 가운데 나타나도록)

HorizontalArrangement2 디자인
●Label3
-FontSize 30으로 변경
-Text 삭제
-TextColor 변경: 파란색
-TextAlignment을 Center로 변경
-Width를 Fill parent로 변경 (Label3,4가 같은 크기를 차지하도록)

Label3
●image2
-이미지 삽입
-이미지 크기 조절(Height,Width를 맞게 조절)

image2
●Label4
-FontSize 30으로 변경
-Text 삭제
-TextColor 변경: 파란색
-TextAlignment을 Center로 변경
-Width를 Fill parent로 변경 (Label3,4가 같은 크기를 차지하도록)

Label4
3-7) HorizontalArrangement(수평정렬 레이아웃)에 담은 Textbox와 Button 디자인
●HorizontalArrangement3
- Width를 80%로 변경 (화면 너비에 80%를 차지하도록)
-AlignVertical을 center로 변경(글씨가 가운데 나타나도록)

HorizontalArrangement3
●Textbox1
-FontSize 30으로 변경
-Width를 Fill parent로 변경
-Hint에 답이라고 작성하기
-NumbersOnly에 체크
-TextAlignment을 Center로 변경

TextBox1
●Button1
- FontBold 체크 (굵은 글씨로 표시하도록)
-FontSize 18으로 변경로 변경
-Width를 Fill parent로 변경
-Text 변경: 제출

 

3-8) Label5 디자인(수평선 만들기)

 

3-9) VerticalArrangement(수직정렬 레이아웃)에 담은 Label6,7 디자인
●VerticalArrangement1
- Width를 80%로 변경 (화면 너비에 80%를 차지하도록)

 

●Label6
-FontBold 체크
-FontSize 18으로 변경
-Text 변경: ￭ 채점 :
-TextColor 변경: 빨간색
●Label7
-FontBold 체크
-FontSize 18으로 변경
-Text 변경: ￭ 점수 :
-TextColor 변경: 파란색

 

3-10) image1과Label1 간격 넓히기
-넓히고 싶은 공간에 Label을 추가해 Text를 지우고 Height를 1pixels로 변경

3-11) Notifier, TextToSpeech 추가

 

(+)Components 이름 변경하기

 

4) 코딩(Coding)하기
●변수 작성

●시작하면 퀴즈 내기 (NewQuiz 프로시저)

 

 

●NewQuiz 프로시저
-숫자 2개를 랜덤으로 만들어 표시하고
-문제 번호를 출력
-점수를 표시
-답변란을 빈칸으로 만든다

●버튼이 클릭되면
-답이 없으면 끝
-제출한 답과 정답을 비교하여
-맞으면,
-정답입니다. 출력하고 TTS로 알림
-Score를10점 추가
-틀리면,
-틀렸습니다. 출력하고 TTS로 알림
-Count에 1을 추가
count가 10 이상이면,
-Noti를 불러온다.
-그렇지 않으면, NewQuiz를 불러온다.

●Noti
;선택할 수 있는 다이어로그를 불러온다
-title:문제풀이 끝!
-100점 만점에 (global score 값)입니다. 다시 하겠습니까?
-버튼1:예
-버튼2:아니오

●예를 클릭하면
-count를 1로
-score를 0으로
-lblCheck를 ￭ 채점 : 로 초기화 한다.
-NewQuiz를 불러온다.
그렇지 않으면
-앱을 종료한다.

최종코딩

최종 코딩
5) 실행하기
5-1) Build에 들어가 Android App(.apk)를 선택함.
5-2) Emulator-NoxPlayer 실행하기

 

답을 맞았을 경우

 

답을 틀렸을 경우