7. 앱인벤터 덧셈 연습 앱 만들기(수학 문제 풀기 앱)

 

 

 

 

1. 앱 화면과 기능 구상하기

 

 

어릴때 열심히 풀던 

눈높이 수학 문제지 기억나시나요?

 

이번 시간에는

덧셈 문제를 연습하는 앱을 만들어보겠습니다. 

 

앱의 기능은 아래와 같습니다.

 

10개의 덧셈 문제가 랜덤으로 출제 되고

10개의 문제를 다 푼 뒤 점수가 90점 이상일 때는 매우 우수

80점 이상일 때는 우수

그 미만일 때는 다시 풀기를 하는

덧셈 천재를 만드는 덧셈 풀기 앱이라 할 수 있죠. 

 

그럼 이제 앱의 화면을 간단히 그려보겠습니다. 

 

우선 앱의 제목이 위쪽에 나와야합니다.

다음 문제를 누르면 다음문제로 넘어가고 문제의 번호가 보여야합니다.

그리고 □ + □ 문제는 랜덤으로 숫자가 나와야하며 

□정답 칸은 사용자가 정답을 입력하는 칸 입니다. 

 

10문제를 다 풀면 점수 확인을 누르고 옆 칸에 점수가 나타납니다.

 

 

 

 

 

 

2. 앱 화면 만들기

 

 

간단히 스케치를 해봤다면

앱의 화면을 앱 인벤터에 나타내보겠습니다. 

 

디자이너 뷰어에서의 핵심은 '레이아웃' 입니다.

레이아웃과 각 요소들의 넓이와 높이값을 잘 조정하면

내가 원하는 디자인을 만들 수 있죠. 

 

덧셈천재 앱 이름은 따로 만들어서 그림 형태로 넣어보았습니다. 

**그림을 업로드 할 때 그림의 이름은 꼭 영어 또는 숫자여야하니 이 점은 유의해서 그림을 업로드 하세요!

 

 

 

 

 

3. 코딩하기

 

디자인이 끝났다면 블록 탭으로 이동해서 코딩을 해봅시다.

 

이번에는 2개의 함수를 만들었습니다. 

함수는 처음부터 만들 필요는 없고 코딩을 하다가 반복되는 패턴이 보일 때 만들면 됩니다.

함수 만들기가 익숙하지 않으신 분들은 아래 글과 블록을 보며 따라 만들어 보세요. 

 

첫 번째 함수는 '문제' 라는 이름의 함수입니다. 

'문제' 함수는 문제의 번호를 1씩 증가시키는 것과 더불어 랜덤으로 숫자1과 숫자2가 생성되게 합니다.

 

두 번째 함수는 '점수창 안내' 라는 함수이며 파라미터는 '점수'입니다.

최종 점수에 따라 원하는 텍스트를 나타내도록 코딩해주었습니다. 

 

스크린이 초기화되면 '문제' 함수를 호출하고

다음 문제 버튼을 눌렀을 때 만약 답을 맞췄다면 점수가 10점 추가됩니다.

또 문제가 10문제 미만이라면 다시 '문제' 함수를 호출합니다. 

 

점수 확인 버튼을 눌렀을 때는 '점수창 안내' 함수를 호출하고

이 때 파라미터는 '점수' 변수가 됩니다. 

 

 

 

 

 

4. 테스트하기

 

 

코딩까지 완료되었다면 테스트를 해봅니다.

에뮬레이터를 사용해 테스트해보겠습니다.

 

다음 문제를 눌러서 랜덤으로 숫자가 잘 나오는지,

문제의 번호가 바뀌는지 확인하고

점수 확인을 눌러서 총 점수에 맞는 문구가 나오는지 확인해봅니다.

 

 

 

 

 

 

 

5. 업그레이드

 

 

기본 앱 만들기가 완료되었다면

좀 더 업그레이드해서  '덧셈 천재'에 레벨을 추가해 보겠습니다.

 

레벨을 추가하려면 '단계'라는 변수를 만들어주어야 합니다.

 

전체 코드는 아래를 참고해보세요~!

 

 

 

코딩이 끝났으니 잘 작동하는지 확인해보겠습니다. 

 

덧셈 천재 로고 밑에 LEVEL이 보이죠!

10문제까지 풀고 80점 이상이면 LEVEL 2로 갈 수 있습니다. 

 

 

 

6. n~m 까지의 숫자의 합을 알려주는 앱

 

 

비슷한 원리로 만든 덧셈천재 시그마를 만들어 보았습니다. 

덧셈천재 시그마 앱은

n부터 m까지 사용자가 입력한 두 수 사이의 값을 더해주는 앱입니다. 

 

 

 

 

덧셈 계산 연습을 할 수 있는덧셈 천재 앱은

함수, 변수, 조건문 등

다양한 프로그래밍 원리가 들어가 있기 때문에 시간이 좀 걸렸습니다.

 

다음에는 앱 인벤터의 다양한 센서, 지도 등의 기능을 이용한 앱을 만드는 내용을 

정리해보겠습니다.