4-18. 주-객관식 문제 출제하기

제4장 예제를 이용한 애니메이션 만들기

4-18. 주-객관식 문제 출제하기

1. 안내

간단한 액션 스크립트로 객관식과 주관식의 형성평가 문제를 만들어봅니다.

여기에서 다루고 있는 방법만이 형성평가 제작의 절대적인 방법은 아니라는 점을 미리 말씀드립니다. 보다 깊은 액션에 대한 이해가 뒷받침되면 훨씬 더 멋진 형성평가를 제작할 수 있을 것입니다.

2. 완성된 작품과 예제 파일 다운로드

예제 파일

6cha_ex1.fla

3. 객관식 형성평가 만들기

가. 보기 번호 복제하기

(1) 예제 파일에는 보기 1, 2, 3 그래픽 심볼만 만들어 두었습니다.

내부에 표시되는 숫자만 다르므로, 보기 4, 5를 추가하려면 다음과 같은 방법이 편리합니다.

(2) 라이브러리에서 ‘보기3’ 심볼에서 마우스 오른쪽 단추를 누릅니다.

그림과 같이 메뉴가 나타납니다.

메뉴 중에서 [복제]를 선택합니다.



 

(3) [복제]를 실행하면 다음과 같은 대화상자가 나옵니다.

‘보기3 복사’를 ‘보기4’로 고치고 [확인] 단추를 누릅니다.



(4) 라이브러리에서 ‘보기4’를 선택하고 ‘미리보기’를 더블클릭하면 심볼 수정 화면으로 들어가게 됩니다.

숫자 ‘3’을 ‘4’로 고칩니다.

(5) 이와 같은 방법으로 ‘보기5’도 만들어보십시오.

 

나. 문제와 보기 배치하기

적당한 문제와 보기를 타이핑하여 스테이지에 배치하십시오.

글자의 크기 및 보기의 유형에 따라 한 스테이지에 1문항 혹은 2문항 이상을 만들 수도 있을 것입니다.

단 문제와 보기의 오른쪽에 정답과 오답 메시지가 출력될 수 있도록 적당한 공간을 비워두십시오.



 

다. 정답과 오답 메시지 만들기

선택한 번호가 정답이면 정답 메시지 ‘맞았습니다’가, 오답이면 오답 메시지 ‘다시 생각해보세요.’가 출력되도록 해봅시다.




(1) 먼저 정답 메시지를 만들어보겠습니다.

Ctrl + F8 키를 눌러 새 심볼을 하나 만듭니다.

심볼 이름은 ‘정답’으로, [유형]은 ‘무비클립’으로 해주고, [확인] 단추를 누릅니다.






(2) 무비클립 편집창에서 1 프레임은 비워두고, 2프레임을 클릭하고 F6키를 눌러 키프레임을 넣어줍니다. 이렇게 하는 이유는 마우스를 ‘보기’ 위에 올리면 2프레임으로 이동하고, 보기에서 벗어나면 아무 것도 없는 1프레임으로 가게 하기 위해서입니다.




(3) 2프레임이 선택된 상태에서 스테이지에 ‘맞았습니다’를 입력합니다. 더불어 약간의 장식도 해줍니다.






(4) 음향이 나오도록 하기 위하여 라이브러리에 있는 음향 중 ‘tata.wav’를 선택해서 2프레임의 스테이지에 가져다 놓습니다.








(6) 1프레임을 선택하고 자동으로 재생되지 않도록 하기 위해 액션 스크립트 창을 열고 ‘stop()’ 액션을 넣어줍니다.




(7) 라이브러리에서 ‘정답’을 선택한 후 마우스 오른쪽 단추를 눌러 [복제]를 실행하여, 이름을 ‘오답’으로 바꾼 후 [확인] 단추를 누릅니다.




(8) ‘오답’ 심볼을 편집합니다.

배경색을 달리하고, 글자를 ‘다시 생각해보세요’로 변경합니다.






(9) 음향을 바꾸기 위해 2프레임을 클릭하여 선택합니다. 그리고 [속성] 창의 [사운드] 펼침 목록을 눌러 ‘ringout.wav’를 선택합니다.






(10) 이렇게 해서 정답과 오답 무비클립을 완성하였습니다.




(11) 완성된 ‘정답’, ‘오답’ 무비클립을 드래그하여 스테이지의 오른쪽 가운데 여백에 가져다 놓습니다.



이 두 개의 무비클립은 1프레임이 비어있기 때문에 위의 그림처럼 작은 동그라미로 표시됩니다.




(12) ‘정답’ 무비클립을 선택하고, [속성]에서 인스턴스 이름을 ‘msg_o’로 줍니다.

‘오답’ 무비클립을 선택하고, [속성]에서 인스턴스 이름을 ‘msg_x’로 줍니다.



 

라. 정답, 오답 버튼 만들기

(1) 보기 중 먼저 정답에 해당되는 액션 스크립트를 만들어보겠습니다.

레이어 하나를 추가하고 레이어 이름을 ‘정오답 버튼’으로 바꿉니다.

layer 1은 ‘문제’로 변경합니다.

그리고 ‘문제’ 레이어는 편집이 되지 않도록 자물통을 채웁니다.




(2) 보기의 동그라미 크기와 같은 크기로 동그라미를 그립니다.

동그라미를 선택한 후 F8키를 눌러 심볼로 변환합니다.

이름은 ‘정답단추’로 주겠습니다.



[확인] 버튼을 누릅니다.




(3) 동그라미를 더블클릭해서 버튼 편집 모드로 들어갑니다.




(4) F6키를 눌러 [오버] 프레임에 키프레임을 넣어줍니다. 페인트통 도구를 이용하여 색상을 채우되 알파(투명도)를 30~40% 정도로 해줍니다.






(5) Hit 프레임을 선택하고 F6키를 눌러 키프레임을 넣어줍니다.




(6) Up 프레임을 선택하고, 스테이지의 동그라미를 지워줍니다. Up 프레임에 아무런 개체가 들어 있지 않으면 보기에도 ‘정답단추’의 흔적이 보이지 않게 됩니다.

정리하면 마우스 이벤트가 일어나지 않은 상태 즉, Up일 때는 보기에 정답단추와 관련된 흔적이 보이지 않게 되고, Over 등 그 외의 이벤트가 일어나면 반투명한 색상이 보기 위에 나타나게 되는 것입니다.




(7) 라이브러리에서 ‘정답단추’를 선택하고, [복제]를 실행해서 ‘오답단추’를 만듭니다.

 

마. 정·오답 매기기

(1) 먼저 ‘정답단추’를 선택하고, 액션 스크립트 창을 엽니다.




(2) 다음과 같이 액션을 넣습니다.(직접 입력 모드에서 타이핑하십시오)

on (release) { // 마우스를 누르면

_root.msg_o.gotoAndstop(2); // msg_o 인스턴스를 불러내어 2프레임으로 가서 멈춘다. 2 프레임에는 ‘맞았습니다’라는 메시지가 들어 있음.

}

on (rollOut) { // 마우스가 정답단추 영역을 벗어나면

_root.msg_o.gotoAndstop(1); // msg_o 인스턴스의 1프레임으로 가서 멈춘다. 여기에는 아무 것도 없음.

}

 

(3) 이번에는 라이브러리에서 ‘오답단추’를 선택하여, 틀린 답의 보기 위에 가져다 놓습니다.

그리고 다음과 같은 액션 스크립트를 만듭니다.

※ 정답단추의 액션스크립트를 복사해서 사용하면 편리합니다.

on (release) {

_root.msg_x.gotoAndstop(2);

}

on (rollOut) {

_root.msg_x.gotoAndstop(1);

}

정답단추와 다른 점은 인스턴스 이름 뿐입니다.






(4) 나머지 오답은 오답단추를 복제(Ctrl + D)해서 사용하면 됩니다.

※ 보기 번호 5개를 버튼 심볼로 처리하지 않은 이유는 바로 이 부분에서 이해가 될 것입니다. 각각을 버튼으로 처리하면 각각의 버튼에 정답 및 오답 스크립트를 넣어주어야 하기 때문에 번거롭기 때문입니다.

※ 예제의 ‘다음’ 버튼은 연결되어 있지 않습니다. 추가로 문제를 더 만들려면 주화면에서 프레임을 추가해 문제를 제작하고, 이 버튼으로 연결해주면 될 것입니다.

 

4. 주관식 형성평가 만들기

(예제 파일 : 6cha_ex2.fla) 

6cha_ex2.fla

가. 주관식 문항의 평가 원리

주관식 평가는 프로그램 사용자가 직접 키보드로 입력할 수 있는 텍스트 박스를 만들어주어야 하고, 이를 통해 입력되는 답이 미리 제시해놓은 정답과 견주어 일치해야 정답이 되는 것입니다.

그러나 띄어쓰기나 맞춤법 등이 제시된 정답과 정확히 일치해야 정답으로 처리되는 문제가 있을 수 있습니다. 물론 예상되는 정답으로 봐줄 수 있는 입력 답을 if 문을 이용하여 추가할 수 있습니다.

예제 웹페이지에서 6cha_ex2.fla 파일을 다운로드한 후 불러오기를 하십시오.




나. 입력 박스 만들기

(1) ‘문제 1’은 예제 파일에 이미 입력해두었습니다.

문제의 아래쪽에 정답을 입력할 수 있는 상자부터 만들어보겠습니다.

텍스트 입력 도구를 선택하고 정답을 입력할 텍스트 박스를 드래그하여 만들어줍니다.

이 텍스트 박스는 반드시 [속성]에서 [입력텍스트]로 지정해주어야 합니다.






(2) 이 텍스트 박스에 대한 변수를 줍니다(여기서는 'dap').






(3) 입력 상자를 보이게 하기 위하여 [테두리 보이기]로 합니다.






(4) 입력되는 글자의 속성을 적당히 설정해줍니다(글꼴, 크기, 진하게 등의 속성 등)



여기서 정해주는 글자 속성은 사용자가 입력할 때 나타나게 됩니다.




(5) 라이브러리에서 ‘정답확인’ 단추를 입력 상자 옆에다 놓습니다.

(6) ‘정답 확인’ 단추에 다음과 같이 액션을 넣어줍니다.

on (release, keyPress "<Enter>") { // 마우스로 누르거나 Enter키를 치면

gotoAndStop("1번확인"); // 1번 확인 라벨이 붙은 프레임으로 가서 멈춘다.

}






(7) 타임라인의 1프레임을 선택하고 자동으로 재생되지 않도록 stop(); 액션을 넣어주고(이미 들어 있음), dap 변수의 값을 초기화시키는 액션을 추가합니다. 이 때 [스크립트 도우미]를 해제해야 액션을 쉽게 추가할 수 있습니다.

stop(); // 재생되지 않도록 한다.

dap=""; // dap 변수 초기화




다. 정답 확인 화면 만들기

(1) 10프레임에서 F6을 눌러 키프레임을 넣어줍니다.




(2) 프레임 라벨을 ‘1번확인’으로 붙여줍니다.






(3) 정답 입력박스를 선택하여 텍스트 속성을 [동적 텍스트]로, 변수를 ‘dap_2’로 변경해줍니다. 이유는 앞에서 입력한 정답을 출력하기 위해서입니다.




(4) 아래에 텍스트 박스를 하나 더 그려주고, 속성은 [동적 텍스트]로, [변수]는 ‘answer’로 설정해줍니다. 그리고 텍스트 상자의 테두리선을 숨깁니다.




(5) ‘정답확인’ 단추를 지워버리고, 대신 라이브러리에서 ‘다시풀기’와 ‘다음문제’ 버튼을 가져와 적당한 자리에 위치시킵니다.

정리하면 다음 그림과 같습니다.



 

라. 정답 확인 액션 스크립트

(1) ‘1번확인’ 키프레임을 선택하고, 액션 스크립트 창을 엽니다.

다음과 같이 스크립트를 작성합니다. 직접 입력 모드에서 하십시오.

 

dap_2=dap; // dap_2 변수에 앞서 입력된 dap의 값을 대입시킨다.

// 이하의 스크립트는 아래에서 설명합니다.

if(dap_2=="독도" || dap_2=="독 도") answer="맞추었습니다!";

else{

answer="다시 생각해보세요!!";

}

 

if 문을 사용하여 예상 가능한 정답을 설정해줍니다. 이 경우는 띄어쓰기를 할 가능성이 있으므로 ‘독도’ 혹은 ‘독 도’로 입력을 해도 정답으로 처리하도록 한 것입니다. ||는 or(혹은)라는 의미입니다.

이 조건에 맞으면 answer 변수에 ‘맞추었습니다!’를 대입하여 출력되게 하고, 이 조건에 맞지 않으면(else) ‘다시 생각해보세요!!’가 출력되도록 한 것입니다.

 

(2) ‘다시풀기’ 단추를 선택하고 액션 스크립트 창에 다음과 같이 스크립트를 작성합니다.

 

on(release){ // 마우스를 클릭하면

gotoAndStop(1); // 1번 프레임으로 가서 멈춘다.

}

 

(3) ‘다음 문제’ 단추를 선택하고 액션 스크립트를 다음과 같이 작성합니다.

 

on (release) {

gotoAndStop("2번문제");

}

 

물론 이 경우 20 프레임 쯤에 다음 문제를 작성하고, 그 프레임의 라벨이 ‘2번문제’라고 붙여져 있어야 할 것입니다.

 

(4) 완성된 예제를 보시고 그것을 참고하여 다음 문제도 만들어보십시오.

 

5. 무비 파일 연결하기

객관식 형성평가와 주관식 형성평가 등 2개의 파일을 만들어 보았습니다. 이와 같이 두 개 이상의 플래시 무비 파일이 있을 때 이를 서로 연결하는 방법이 없을까요?

물론 있습니다. 이 경우 사용할 수 있는 액션이 loadMovie입니다.

두 번째 주관식 평가 파일에서 첫 번째 객관식 평가 파일을 연결하는 방법부터 알아보겠습니다.




(1) 아래 그림과 같이 ‘무비연결버튼’이라는 이름의 레이어를 하나 추가합니다. 그리고 이 레이어에 라이브러리에 만들어둔 ‘이전’ 단추를 적당한 곳에 위치시킵니다.






(2) ‘이전’ 단추를 선택하고, 액션 창을 엽니다. 스크립트 도우미를 이용하는 편이 편리하므로 이를 활성화 합니다.




(3) [전역함수 > 브라우저/네트워크]에 있는 loadMovie를 더블클릭해서 적용합니다. 그리고 그림과 같이 [URL(U);] 항목에 연결할 파일 이름과 확장명을 적어줍니다.(6cha_ex1.swf)






(4) [위치(L);] 항목은 [레벨 > 0]을 선택합니다.(기본값임)

※ 레벨에 대한 이해

loadMovie 액션은 외부 무비 파일을 현재의 무비에 가져오는 명령어로 레벨이라는 일종의 레이어 개념을 가지고 있습니다.

즉, 레벨값이 0이면 현재 레이어에, 1 혹은 그 이상의 값이면 상위 레이어에 위치하게 됩니다. 따라서 이 개념을 잘 이해하고 활용하면 현재 보이는 무비 위에 다른 무비를 겹쳐서 보이게 할 수 있습니다.

겹쳐진 무비를 쫓아내는 액션이 unloadMovie입니다.

(5) 이 무비를 저장하고 Ctrl + Enter키를 눌러서 플래시 무비 파일을 만든 다음, 객관식 형성평가 파일 즉, 6cha_ex1.fla를 불러옵니다. 그리고 ‘다음’ 버튼에 다음과 같은 액션을 만들어주면 객관식과 주관식 파일이 서로 연결되게 될 것입니다.

on(release){

loadmovieNum("6cha_ex2.swf", 0);

}

6. 저장하고 테스트해보기

작업한 결과를 저장하고, Ctrl + Enter키를 눌러 무비 테스트를 해보십시오.