본문 바로가기
AI교육/앱인벤터

7-1. 앱인벤터 - 덧셈 연습 업그레이드 앱 만들기

by 조크리 2020. 10. 12.
반응형

 

 

 

 

지난 덧셈 연습 앱을 업그레이드해서

이번에는 난이도가 있는 덧셈 연습 앱을 만들어 보겠습니다. 

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

 

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

1. 앱 화면과 기능 구상하기 어릴때 열심히 풀던 눈높이 수학 문제지 기억나시나요? 이번 시간에는 덧셈 문제를 연습하는 앱을 만들어보겠습니다. 앱의 기능은 아래와 같습니다. 10개의 덧셈 문

creatorjo.tistory.com

 


 

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

 

 

덧셈 연습 업그레이드 앱에 들어가면

 

10개의 덧셈 문제가 나오고

사용자는 10개의 덧셈 문제를 풀게 됩니다. 

 

점수가 90점 이상이면 Level 2로 이동하게 됩니다. 

그렇지 않으면 현 단계에서 10문제를 다시 계산하게끔 합니다.

 

앱을 업그레이드 하면서

Level 마다 문제의 난이도를 설정하였습니다.  

 

덧셈 문제를 낼 때는 num1과 num2를 설정해야하는 데

이 때 num1과 num2의 범위를 단계마다 다르게 설정해 준 것이죠. 

 

예를 들어

 

1단계는 1 ~ 10까지의 숫자끼리의 덧셈

2단계는 1 ~ 20까지의 숫자끼리의 덧셈

 

이런식으로 숫자의 범위를 설정해줄겁니다. 

 

사용자가 10문제를 모두 풀고 확인하기를 누르면

본인의 점수를 확인할 수 있고

 

Level 업을 할지, 현재 Level 에서 다시 문제를 풀지는

앱이 알려줍니다.  

 

 

 

2. 앱 화면 만들기

 

그럼 이제 앱 화면을 만들어 보겠습니다. 
앱 화면은 이전 글에서 만들었던 덧셈 계산 앱과 같습니다. 
기능 위주의 앱이라 UI가 아주 마음에 들진 않지만수평배치나 수직배치 이용 및 컴포넌트의 크기 조절 부분도 꽤 까다롭기 때문에연습할 때는 간단히 배치만 해보는 것도 좋습니다.

 

 

 

3. 코딩하기

 

 

그럼 이제 코딩을 해볼까요?

 

일단 변수와 함수를 선언해줍니다. 

여기서 숫자1과 숫자2가 

기존 버전과 다르게 설정된 것을 확인할 수 있죠. 

 

방법은 간단합니다. 

 

숫자1(num1)이 원래 1~10 이었다면

끝 숫자에는 Level 을 넣어주고 여기에 ×10을 해주는 것입니다. 

만약 Level 1이라면 1 ×10 이 되니 1~10이 되겠죠. 

만약 Level 2라면 2 ×10 이 되니 1~20이 됩니다. 

만약 Level 3이라면 3×10 이 되니 1~30이 됩니다. 

 

이렇게 레벨이 올라감에 따라 숫자의 범위가 달라지게 됩니다. 

 

숫자2도 숫자1과 마찬가지입니다. 

 

 

변수와 함수 만들기가 끝나면

스크린이 실행되었을 때를 코딩해줍니다. 

 

 

다음 문제를 클릭했을 때도 코딩해줍니다. 

 

 

마지막으로 확인하기를 클릭했을 때를 코딩해줍니다. 

 

 

4. 테스트하기

 

 

잘 작동하는지 한 번 확인해보겠습니다.

 

 

성공성공~!!!

 

 

 

 

 

 

반응형