작성일 설명 담당자

2010. 11. 10 디자인가이드최초 작성 박혜진2010. 11. 11 슬라이드 4 추가 – support box 띄우기 화면 레이아웃 추가

문서의 2 번 4 번 슬라이드 내용 중복으로 한 페이지로 합침

문서 개정이력

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

목차

세계화 기능 적용 샘플 콘텐츠

보편적 학습 설계 원리에 기반하여 디지털교과서의 학습을 지원하는 기능을 추가 개발하여 샘플 콘텐츠를 제공합니다 .

1. support box 띄우기2. 학습 도움 레벨 설정하기3. 힌트 및 주요 학습 포인트4. TTS 기능5. 유형별 퀴즈 ( 점수 기록 )6. 문제풀이 후 보충 / 심화 연계7. 의견 적기 및 학습 조력자의 의견 제시8. 용어 사전 기능9. 이미지 설명

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

Support box 띄우기

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Somebody Loves You, Mr. Hatch

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the postman brought Mr. Hatch a box of

chocolates with a card. It said, “Somebody loves you.”

Mr. Hatch was so happy. He danced and laughed. He

thought, “Maybe I can meet my secret admirer.” So he

put on a colorful tie. He took the box of chocolates to his

factory and shared them.

Goal

제목과 Lesson 명은 상단에 자리잡고

타이틀 위치 잡을 것 .

본문 텍스트는 테이블을 하나로 잡아서 전체 내용이 한번에 드래그 될 수 있도록 함 .

이미지는 사각형 모서리 정리

버튼 1 디자인 사용

버튼 클릭하면 support box 열림 .다시 버튼을 클릭하면 support box 닫힘 .( 터치펜을 사용할 경우 펜을 오른쪽으로 닫으면 레이어가 닫히도록 코딩할 수 있으면 기능 넣어주세요 .)

Goal 버튼 제목은 별도 xml 에서 변경할 수 있도록 함 .

Check Point

버튼이 두 개가 들어갔을 때 레이어로 다른 버튼을 덮어버리고 , 버튼을 닫으면 다시 다른 버튼이 보인다 .

본문 텍스트 가로 780px 텍스트가 전체 마우스로 드래그 될 수 있도록 하나의 짜 주세요 .

support_title_on.png 199x64support_title_over.png 199x64

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

학습 목표 제시

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

1. 이웃과 사랑을 나누며 살아가는 감동적인 글을 읽고 이해할 수 있다 .

2. 이야기의 요약 글을 이해할 수 있다 .

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the postman

brought Mr. Hatch a box of

chocolates with a card. It said,

“Somebody loves you.” Mr.

Hatch was so happy. He

danced and laughed. He

thought, “Maybe I can meet

my secret admirer.” So he put

on a colorful tie. He took the

box of chocolates to his fac-

tory and shared them.

Goal

오른쪽에 레이어로 support box 가 뜰 수 있도록 위치 잡음 .

( 약 270x620)

본문 텍스트는 팝업 레이어에 밀려서 가로 사이즈 조정됨 .

마우스에 불이 들어온 것처럼 활성화 표시

support box 크기를 xml 에서 조정할 수 있도록 함 .

레이어를 닫으면 이전 페이지로 돌아감 . ( 본문 텍스트는 다시 가로 사이즈가 늘어남 )

Somebody Loves You, Mr. Hatch

돋음 12px #2d2d2d

텍스트 테이블 가로 260

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

학습 도움 레벨 설정하기

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Goal버튼 : Check point

1,2,3 각각 버튼으로 처리On/over/click

버튼이 두 개가 들어갔을 때 레이어로 다른 버튼을 덮어버리고 , 버튼을 닫으면 다시 다른 버튼이 보인다 .

총 3 레벨로 설정하여 레벨을 설정하고 [ 확인 ] 버튼을 클릭하면 해당 레벨 정보가 로컬 저장파일에 저장 ( 저장 API 사용 ) 되어 콘텐츠 제작시 지정한 수준의 콘텐츠가 기본 내용으로 보여진다 . 레벨은 학습자 스스로 다른 레벨을 자유롭게 이동할 수 있도록 설계한다 .

Check Point

최대 수준 보통 수준 최소 수준

1 2 3

확인

학습을 진행하면서 학습 도움을 받을 수준을 결정하세요 . 학습을 진행하면서 수준은 언제든지 변경하실 수 있습니다 .

학습 도움 레벨을 선택하세요 . Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the postman

brought Mr. Hatch a box of

chocolates with a card. It said,

“Somebody loves you.” Mr.

Hatch was so happy. He

danced and laughed. He

thought, “Maybe I can meet

my secret admirer.” So he put

on a colorful tie. He took the

box of chocolates to his fac-

tory and shared them.

Somebody Loves You, Mr. Hatch

전체 사이즈 : 1000x686 고정

H: 28pxH: 40px

Tahoma 24px #ffffffTahoma 18px #ffffff

H: 44px Arial 20px bold

#050505

본문Tahoma 16px #050505문단의 문장 첫 글자 들여쓰기

H: 60px

w: 56px

box: size: 300x560bg color : # F3F8FCbold color : # 9BD2DE

close.png13x106

support title.png197x62

돋음 14px# 1066CF

돋음 12px# 131313

level.png48x49

level_click.png48x49

돋음 12px# 131313

btn_ok.png97x43

btn_ok_click.png97x43

Arial 14px#ffffff

Verdana 14px #ffffff

body_img.png332x322

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

학습 도움 레벨 설정하기

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Somebody Loves You, Mr. HatchGoalCheck Point

Level 1 2 3

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the postman

brought Mr. Hatch a box of

chocolates with a card. It

said, “Somebody loves you.”

Mr. Hatch was so happy. He

danced and laughed. He

thought, “Maybe I can meet

my secret admirer.” So he

put on a colorful tie. He took

the box of chocolates to his

factory and shared them.

New words

Focus on form

Outline the story

New words 를 클릭하면 아래쪽으로 내용이 나오고 다시 클릭하면 내용이 들어간다 .

다음 학습 주제 (Focus on form) 은 이전 학습 주제 (New words) 를 클릭하면 보여진다 .

레벨 설정 버튼 1,2,3 중 하나를 선택할 수 있음 . ( 중복 선택 안 됨 )디폴트 값 = 1

팝업 레이어에 사이즈를 조정할 수 있도록 함 .( 팝업 사이즈 , 버튼 제목 , 내용 텍스트를 xml 로 뺄 것을 검토 )

folder.png 28x23

Level boxsize : 116x20bg color :#7FB2D0text : Verdana 12px #ffffff

Arial 12px #050505 arrow_down.png

level_s_1.png 19x20 level_s_click_1.pnglevel_s_2.png 19x20 level_s_click_2.pnglevel_s_3.png 19x20 level_s_click_3.png

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

학습 도움 레벨 설정하기

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Somebody Loves You, Mr. HatchGoalCheck Point

Level 1 2 3

somebody 누군가thin 마른 , 얇은alone 혼자서all day 하루 종일factory 공장postman 우편 집배원a box of ~ 한 상자secret 비밀의admirer 팬 , 숭배자put on ~ 를 입다 , 신다colorful 화려한tie 넥타이share 나누다

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the post-

man brought Mr. Hatch a

box of chocolates with a

card. It said, “Somebody

loves you.” Mr. Hatch was so

happy. He danced and

laughed. He thought, “Maybe

I can meet my secret ad-

mirer.” So he put on a col-

orful tie. He took the box of

chocolates to his factory and

shared them.

New words 에서는 영어 단어리스트가 먼저 보여지고 화살표를 클릭하면 한글 해석이 보여진다 . ( 단어마다 모두 동일함 )

본문에서는 new words 에 해당하는 단어의 색깔이 달라지고 밑줄 표시가 되어 진다 .

클릭하면 용어사전으로 링크한다 .

필요하면 레이어에 스크롤이 생긴다 .

아래 하단 화면이 열리면 , 화살표는 위쪽으로 변경

닫힘 버튼을 누르지 않고 Focus on form 버튼을 클릭했을 때에도 위쪽의 내용이 닫히고 아래쪽의 내용이 열린다 .

New words

Focus on form

Outline the story

영어 Arial 12px # 1066CF bold한글 돋움 12px #2d2d2d

arrow_up.png

arrow_down.png

btn_arrow.png

단어장에 있는 단어 색깔 표시 # 1066CF

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

support box 띄우기

Focus on form 을 선택하면 new words 의 내용이 닫히고 Focus on form 의 내용이 열림 .

본문에 밑줄 색깔 표시

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Step2 Enjoy the story.

New words

Focus on form

과거시제 : 과거의 동작 , 상태 , 습관을 나타냄 . be 동사나 일반 동사의 과거형 사용 .

ex. he went to the library yesterday. ( 과거형은 인칭에 따라 변하지 않음 )

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the postman

brought Mr. Hatch a box of

chocolates with a card. It

said, “Somebody loves you.”

Mr. Hatch was so happy. He

danced and laughed. He

thought, “Maybe I can meet

my secret admirer.” So he

put on a colorful tie. He took

the box of chocolates to his

factory and shared them.

Outline the story

Level 1 2 3

Check Point

돋움 12px #1066CF bold돋움 12px #1066CF돋움 12px #2d2d2d2

밑줄 # FE665F

Show

box #A4C7DB[Hide] 를 토글로 박스로 만들어 주세요 .클릭했을 때 옆에 밑줄이 보입니다 .

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

support box 띄우기

Outline the story 를 클릭하면 본문에 장식글로 설명글이 나타난다 .

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Step2 Enjoy the story.

New words

Focus on form

Outline the story

글의 구조를 파악하며 다시 한 번 읽어 봅시다 .

중심 표현의 하이라이트 표시를 보면서 전체 내용을 다시 한 번 파악해 보세요 .

글의 개요를 파악해 봅시다 .

사건 1

Mr. Hitch 의 외모 , 성격( 서론 )

사건 1

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the postman

brought Mr. Hatch a box of

chocolates with a card. It

said, “Somebody loves you.”

Mr. Hatch was so happy. He

danced and laughed. He

thought, “Maybe I can meet

my secret admirer.” So he

put on a colorful tie. He took

the box of chocolates to his

factory and shared them.

Level 1 2 3

Check Point

Show

Show

돋움 12px #2d2d2d2형광펜 색칠 : # FFFD5Eoutline_1.png 115x118 좌표 : x11 y138outline_2.png 110x165 좌표 : x11 y279outline_3.png 115x200 좌표 : x302 y460

Show

Show

글의 개요를 파악해 봅시다 .

box #A4C7DB[Hide] 를 토글로 박스로 만들어 주세요 .클릭했을 때 옆에 밑줄이 보입니다 .

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

학습 도움 레벨 설정하기

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Somebody Loves You, Mr. HatchGoalCheck Point

Level 1 2 3

One Saturday the postman

brought Mr. Hatch a box of

chocolates with a card. It

said, “Somebody loves you.”

Mr. Hatch was so happy. He

danced and laughed. He

thought, “Maybe I can meet

my secret admirer.” So he

put on a colorful tie. He took

the box of chocolates to his

factory and shared them.

New words 를 클릭하면 아래쪽으로 내용이 나오고 다시 클릭하면 내용이 들어간다 .

다음 학습 주제 (Focus on form) 은 이전 학습 주제 (New words) 를 클릭하면 보여진다 .

레벨 설정 버튼 1,2,3 중 하나를 선택할 수 있음 . ( 중복 선택 안 됨 )디폴트 값 = 1

팝업 레이어에 사이즈를 조정할 수 있도록 함 .( 팝업 사이즈 , 버튼 제목 , 내용 텍스트를 xml 로 뺄 것을 검토 )

접속사 and 로 연결된 대등한 구조이다 .

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

[ 주어 +bring+A ( 사람 )+B( 사물 )]=[ 주어 +bring=B( 사물 )+to+A( 사람 ] ; A 에게 B 를 가져오다

여기에서 It 은 카드를 가리키며 , said 는 카드에 적혀 있었다는 의미이다 .

누군가 한 말이나 생각을 직접 인용할 애 So 는 ‘그래서’라는 의미의 접속사이다 .

돋움 12px #2d2d2d돋움 12px #1066CF

btn_link.png 16x17밑줄 color #FC9027

level_s_click_2.png 19x20

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

학습 도움 레벨 설정하기

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Somebody Loves You, Mr. HatchGoalCheck Point

Level 1 2 3

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the postman

brought Mr. Hatch a box of

chocolates with a card. It

said, “Somebody loves you.”

Mr. Hatch was so happy. He

danced and laughed. He

thought, “Maybe I can meet

my secret admirer.” So he

put on a colorful tie. He took

the box of chocolates to his

factory and shared them.

New words 를 클릭하면 아래쪽으로 내용이 나오고 다시 클릭하면 내용이 들어간다 .

다음 학습 주제 (Focus on form) 은 이전 학습 주제 (New words) 를 클릭하면 보여진다 .

레벨 설정 버튼 1,2,3 중 하나를 선택할 수 있음 . ( 중복 선택 안 됨 )디폴트 값 = 1

팝업 레이어에 사이즈를 조정할 수 있도록 함 .( 팝업 사이즈 , 버튼 제목 , 내용 텍스트를 xml 로 뺄 것을 검토 )

일반 동사의 과거형

동사원형 +-ed work worked

e 로 끝나는 경우에는 “ -d” 만 붙인다 .

like liked

자음 +y 인 경우에는 자음 + -ied로 쓴다 .study studied

단모음 + 단자음 자음추가 +-edstop stopped불규칙 동사go went, eat ate

돋움 14px bold #050505돋움 12px bold #FC9027돋움 12px #2d2d2d

level_s_click_3.png 19x20

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

학습 목표 제시

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Step2 Enjoy the story.

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the postman brought Mr. Hatch a box of

chocolates with a card. It said, “Somebody loves you.”

Mr. Hatch was so happy. He danced and laughed. He

thought, “Maybe I can meet my secret admirer.” So he

put on a colorful tie. He took the box of chocolates to his

factory and shared them.

What’s impor-tant?

제목 Scaffolding 기능 샘플콘텐츠 제작

유형 화면번호

기능 개발

디자인 가이드

비고

학습 목표 제시

Read & Do Lesson 9 Somebody Loves You, Mr. Hatch

Step2 Enjoy the story.

Mr. Hatch was tall and thin, and he did not smile. He lived alone and had no friends. He worked all day in an factory. After work, he ate alone, took an shower, and went to bed.

One Saturday the postman

brought Mr. Hatch a box of

chocolates with a card. It said,

“Somebody loves you.” Mr.

Hatch was so happy. He

danced and laughed. He

thought, “Maybe I can meet

my secret admirer.” So he put

on a colorful tie. He took the

box of chocolates to his fac-

tory and shared them.

What’s impor-tant?

When I’m reading, I look at the title of the section to give me ideas about what might be im-portant in the reading. I some-times highlight the important ideas to help me remember them.

Arial 12px #2d2d2d

play.png 28x27stop.png 29x27

play_click.png 28x27play_click.png 29x27