articulate360 스토리라인360으로 어떻게 만들까요? 계산기를 만들어 봅시다.

사칙연산이 가능한 계산기를 만들어 봅시다.

 

계산기를 만드는 것은 변수를 아주 잘 이해하여야하기 때문에, 아주 자세히 풀어서 설명해 보도록 하겠습니다.

먼저 사칙연산 계산기를 만들기 위해서 <231×3=?>을 계산하는 계산기의 작동 순서를 생각해 보겠습니다.

 

1. 230이라는 숫자를 표시하기 위해, 처음 숫자‘2’를 클릭한다. ‘3’을 클릭 한다. ‘1’을 클릭한다.

2.연산기호‘×’를 클릭한다.

3.숫자‘3’을 클릭한다.

4.결과값을 보기 위해서 ‘=’을 클릭한다.

5. ‘Clear’버튼을 클릭하여 화면을 ‘0’으로 만든다.

 

articulate360 스토리라인360으로 어떻게 만들까요?

 

작동순서에 맞추어 스토리라인에서 보여 질 대략적 기능들을 생각해 보겠습 니다.

 

1. 230이라는 숫자를 입력할 때, ‘2’를 클릭하면 일의 자리 숫자 ‘2’이지만 ‘23’을 입력하면 십의 자리 숫자‘2’와 일의 자리 숫자‘3’이 더해진 모양 입니다. 여기에 ‘1’을 클릭하면 백의 자리 숫자 ‘2’와 십의 자리 숫자 ‘3’, 일의 자리 숫자 ‘1’이 더해진 숫자가 됩니다. 이것을 버튼을 클릭하는 순서로 생각해 보면, 첫 번째 버튼을 클릭하면 일의 자리 숫자가 표시되고, 두 번째 버튼을 클릭하면 첫 번째 버튼의 숫자 에 10이 곱해지고 두 번째 버튼의 숫자는 그 숫자에 더해지는 것이라고 생 각할 수 있습니다. (예)2×10+3) 같은 방법으로 세 번째 버튼을 클릭하면 먼 저 클릭된 숫자에 10을 곱하고, 세 번째 버튼의 숫자를 더하면 결과가 올바 르게 표시되는 것입니다. (예)23×10+1=231) 그러므로 트리거는 숫자버튼을 클릭할 때 마다 현재 화면에 표시된 값에 10을 곱하고, 지금 입력한 숫자는 더하도록 만들어 주면 되겠습니다.

 

2. 연산기호는 ‘+,-,×,÷’가 있으므로 클릭한 버튼의 연산만을 수행하도록 만들어 주어야 하겠습니다. 그리고 화면에 보이는 숫자(처음 입력한 숫자)를 저장(First Number(제가 임의로 만든 변수이름입니다.)변수 로 지정)하고, 두 번째 숫자를 입력하기 위해서 화면에 보이는 숫자를 ‘0’으로 만들어 줍니다.

 

3. 두 번째 숫자 ‘3’을 클릭하면 화면에 보여집니다.

 

4. 결과값을 보기 위해서 ‘=’를 클릭하면, 화면에 보이는 두 번째 숫자를 저 장(Second Number변수로 지정)하고, 첫 번째 숫자(First Number변수)에 두 번째 숫자(Second Number변수)를 연산하여야 합니다. 단, 연산은 활성 화된 연산기호만을 수행합니다. 그리고 화면에는 연산된 첫 번째 숫자 즉, First Number변수가 보여져야 합니다. 그리고 계산이 모두 끝났으므로, Second Number 변수는 ‘0’으로 만들고, 앞에서 활성화된 연산기호는 모 두 비활성화 시켜야 합니다.

 

5. ‘Clear’버튼을 클릭하면 화면에 보이는 값을 ‘0’으로 만들어 준다. 그럼 여기까지를 같이 만들어 봅시다.

 

① 계산기 사진을 불러 온 후, 클릭되어 지는 숫자와 사칙연산 등에 핫스팟 을 씌웁니다.

② 타임라인에서 각 핫스팟의 이름을 구분하기 편리하도록 ‘0,1,2,3…더하 기, 곱하기…Clear’등으로 수정하여 줍니다

 

 

숫자를 클릭할 때 화면에 보여야 하므로 ScreenValue라는 넘버변수를 만들 어 줍니다.

① 변수 버튼 클릭

② 변수 추가 버튼을 클릭

③ Name: ScreenNumber, Type: Number, Value: 0