이번에는 리스트 속 리스트를 활용하여
간단한 퀴즈 앱을 만들어겠습니다.
퀴즈앱의 이름은 '철학의 왕!' 입니다. ㅎㅎ
이 퀴즈앱은 철학자들의 명언을 보고 이 명언을 말한 철학자의 이름을
맞히는 앱으로 이를 응용하여 속담 맞추기, 넌센스 퀴즈 앱 등을 만들 수 있습니다.
1. 앱 화면 및 기능 구상하기
'철학의 달인' 앱은
철학자의 명언 문제를 보고 그 명언을 말한 철학자의 이름을 맞추는 간단한 퀴즈 앱입니다.
기능을 살펴보겠습니다.
'시작' 버튼을 누르면 문제번호와 철학자의 명언이 나옵니다.
답 입력 칸에 해당 명언을 말한 철학자의 이름을 적고 '입력' 버튼을 누릅니다.
정답이면 '정답입니다.' 라고 나오고 정답이 아니면 '다시 생각해보세요.' 라는 문구가 나옵니다.
다음 문제로 넘어가려면 '다음' 버튼을 누릅니다.
총 7개의 문제를 다 풀고 '다음' 버튼을 누르면
최종 점수가 나옵니다.
2. 앱 화면 만들기
디자인은 심플하게!
그림이 짤려 보이지만 실제로 앱을 작동시키면 제대로 나옵니다.크기만 잘 세팅해놓으면 됩니다.
3. 코딩하기
3-1. 퀴즈 리스트 만들기
지난번 글에서 썼던 것처럼
리스트 안에 리스트를 만들어서 각 문제를 리스트 형태로 만들어 줍니다.
(앱인벤터에 딕셔너리 기능이 추가되어 이제 딕셔너리로 만들어도 될듯합니다!)
3-2. 문제 번호와 점수 변수 만들기
문제 번호와 점수는
변수로 만들어 줍니다.
3-3. 퀴즈 출제 함수 만들기
문제 번호는 퀴즈와 index값으로 하고
실제 문제는 quiz리스트에서 index번째 위치에 있는 항목 중
다시 1번 위치에 있는 항목을 가져옵니다.
리스트 안의 리스트이기 때문에 quiz리스트 속 1번 리스트 속 1번 항목을 가져오는 것이죠.
3-4. 시작 버튼 코딩
'시작' 버튼을 누르면 퀴즈문제가 출제되도록 해보겠습니다.
시작 버튼을 누르면 문제 번호(index)는 1이 되고, 점수(score)는 0이 됩니다.
답 입력 박스와 입력 버튼은 보이고, 최종 정답 개수와 문구는 보이지 않게 합니다.
그리고 퀴즈 문제 함수를 호출합니다.
3-5. 입력 버튼 코딩
다음으로 '입력'버튼을 눌렀을 경우를 코딩해보겠습니다.
사용자가 정답을 입력한 뒤 '입력' 버튼을 누르면 정답이 맞는지 아닌지 판단을 해야하겠죠.
만약 답입력 박스에 적힌 텍스트가
quiz리스트 안의 1번 리스트 안의 2번 위치에 있는 답 항목을 포함하고 있다면
점수(score)에 1점을 추가합니다.
그리고 '정답' 이라고 알려줍니다.
만약 정답이 아니라면 점수는 추가하지 않고, '다시 생각해봐요!' 라고 안내문구를 띄웁니다.
3-6. 다음 버튼 코딩
마지막 '다음' 버튼을 클릭했을 때를 코딩해보겠습니다.
다음 버튼이 좀 복잡합니다.
일단 다음 버튼을 눌렀다면 정답여부와 답입력박스 텍스트는 지워줍니다.
그리고 만약에 문제 번호가 quiz리스트보다 작다면
index에 1를 더해준 뒤 퀴즈출제 함수를 호출하면 되겠죠.
즉 문제는 7개가 있기 때문에 문제 번호(index)가 7보다 작다면 다음 문제를 계속 보여주는 것입니다.
근데 만약에 7개가 다 끝나서 index가 8이 되었다면
문제 번호가 있는 부분에는 '문제 끝' 이라는 문구를 띄워주고
실제 문제, 답입력박스, 입력버튼 등은 다 안보이게 해야합니다.
그리고 최종 정답 개수와 문구만 보이게 합니다.
이 때에도 만약에 사용자가 퀴즈를 6개 이상 맞추었다면
최종점수를 보여주고 '철학의 달인이시군요.' 라고 문구를 띄웁니다.
만약 사용자가 6개 미만으로 퀴즈를 맞추었다면
최종점수를 보여주고 '철학은 우리 삶 속에 있어요.' 라는 문구를 띄워줍니다.
사용자가 '시작' 버튼을 누른다면 퀴즈는 다시 시작됩니다.
물론 index는 다시 1번, 점수(score)는 다시 0점이 되겠죠!
3-7. 최종 블록
위의 블록들을 모은 최종 블록입니다.
복잡해보이지만
기능별로 분해해서 코딩하다보면
금방 전체 코드가 완성 된답니다.
4. 테스트하기
마지막!테스트하기 입니다.테스트를 보며 철학의 달인 퀴즈를 한 번 풀어보세요!
'AI교육 > 앱인벤터' 카테고리의 다른 글
18. 앱인벤터 - 수평 배치, 스크린 색 지정 기능 활용하기 (0) | 2022.08.23 |
---|---|
17. 앱인벤터 - 이미지, 레이블을 활용한 오늘의 기분 앱 제작 (0) | 2022.08.22 |
15. 앱인벤터 - 리스트 안의 리스트, 세계 나라의 정보 리스트 만들기 (0) | 2020.11.19 |
14. 앱인벤터 리스트(list) 사용하기 - 학생명부 만들기 (0) | 2020.11.18 |
13. 앱인벤터 방향 센서 이용하기(롤, 피치, 방위각) (0) | 2020.10.27 |