1 / 48

문서 개정이력

문서 개정이력. 앞장은 스토리보드 , 다음장은 화면샷으로 배치되어 있습니다 . 색깔이나 .. 폰트 정의가 되어 있지 않은 것들은 … 앞에서 나왔것으로 스타일을 주면 됩니다 . 한글은 돋음 , 영문은 Arial. textbook_001 과 textbook_002 는 이전에 보내드렸습니다 . textbook003.html ( 화면번호 3_1~3_8) textbook004.html ( 화면번호 4_1~4_4) textbook004_1.html ( 화면번호 4_5~4_7)

solada
Download Presentation

문서 개정이력

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 문서 개정이력 앞장은 스토리보드, 다음장은화면샷으로 배치되어 있습니다. 색깔이나..폰트 정의가 되어 있지 않은 것들은…앞에서 나왔것으로 스타일을 주면 됩니다. 한글은 돋음, 영문은 Arial

  2. textbook_001과 textbook_002는 이전에 보내드렸습니다. textbook003.html (화면번호 3_1~3_8) textbook004.html (화면번호 4_1~4_4) textbook004_1.html (화면번호 4_5~4_7) textbook004_2.html (화면번호 4_8) textook005.html (화면번호 5_1~5_3) answer.html (화면번호 answerbox_1~answerbox_3) dictionary.html (화면번호 dictionary)

  3. 문제 1 프로세스 본문 Check Box 3-2 Check 레이어 펼치기 3-1 본문보기 3-4답안클릭 3-3 힌트 펼치기/닫기 3-3 힌트 보기/닫기 3-4정답확인 3-4정답피드백 3-5 오답피드백 3-4 무답피드백 3-6 본문 문제풀이 안내 3-7문제풀기 3-7정답확인 3-7 정답피드백 3-8 오답피드백 3-7 무답피드백

  4. 3page Let’s check – 문제풀이의 도움기능 3_1 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 셀렉트 박스에들어갈 텍스트 1) ------ lonely happy 2) ------- sad happy 1. What is Mr. Hatch feeling? Check Mr. Hatch lived a life. One day, the postman brought him a box of chocolates with a card. It said, "Somebody loves you." Mr. Hatch was very . ------ ------ 셀렉트 박스 : 텍스트를 선택하면 해당 텍스트가 보인다.

  5. Tahoma 16px #2d2d2d 3_1 bgcolor=#F7F6F3 box size : 942x50 x684 y220 Tahoma 16px #2d2d2d 3_img.png 295x255 x86 y400

  6. 3_2 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 라디오 버튼 버튼 제작 [Show] [Hide] : 토글 [Done] 1. What is Mr. Hatch feeling? Check Mr. Hatch lived a life. One day, the postman brought him a box of chocolates with a card. It said, "Somebody loves you." Mr. Hatch was very . ------ Foreshadowing 이야기가 어떤 식으로 전개될지 미리 예측해 보세요. 해치씨에게 앞으로 어떤 일이 일어날까요?  Something wonderful will happen.  Something very sad will happen.  Something awful will happen. 힌트를 보고 싶으면 ‘Show’ 버튼을 누르세요. ------ Show Done Check 버튼을 클릭하면 해당 레이어가 열린다. 레이어가 열리면서 본문이 아래로 내려오고 이미지가 약간 줄어들거나 옆으로 이동한다. Check box에서는 라디오 스타일 버튼으로 처리.

  7. 3_2 Arial 12px #2d2d2d 돋움 12px #2d2d2d Show 버튼 62x27 bgcolor = #A4C7DB brcolor=#0C92EF font color= #0C92EF font size : Arial 12px 토글버튼bgcolor=#6CBAE6

  8. 3_3 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 1. What is Mr. Hatch feeling? Check Mr. Hatch lived a life. One day, the postman brought him a box of chocolates with a card. It said, "Somebody loves you." Mr. Hatch was very . ------ Foreshadowing 이야기가 어떤 식으로 전개될지 미리 예측해 보세요. 해치씨에게 앞으로 어떤 일이 일어날까요?  Something wonderful will happen.  Something very sad will happen.  Something awful will happen. 힌트를 보고 싶으면 ‘Show’ 버튼을 누르세요. ------ Hide Done [Show] 버튼을 클릭하면 텍스트에 노란색으로 하이라이트 표시가 된다. 하이라이트 처리할 텍스트 xml에 규정 “, the postman brought him a box of chocolates” , “Somebody loves you.” [Hide]를 다시 클릭하면 노란색 하이라이트가 없어진다.

  9. 3_3 노란색 배경 컬러 #FFF322

  10. 3_4 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 1. What is Mr. Hatch feeling? Check Mr. Hatch lived a life. One day, the postman brought him a box of chocolates with a card. It said, "Somebody loves you." Mr. Hatch was very . ------ Foreshadowing 이야기가 어떤 식으로 전개될지 미리 예측해 보세요. 해치씨에게 앞으로 어떤 일이 일어날까요?  Something wonderful will happen.  Something very sad will happen.  Something awful will happen. 힌트를 보고 싶으면 ‘Show’ 버튼을 누르세요. ------ Hide Done Good work 가 Hatch 씨는 친구가 없는 외로운 사람입니다. 그런데 어느날 ‘somebody loves you’ 가 적힌 편지를 Hatch가 받았습니다. 지금까지는 Hatch씨의 감정은 lonely 였다면, 앞으로 surprised, happy한 감정을 느낄 일이 벌어질 것 같습니다. X [Done]을 클릭했을 때 정답을 체크하여 맞았을 때에 띄워주는 화면 맞았을 때 뜨는 내용을 xml에 적어서 편집할 수 있도록 함. 정답 : 1) lonely 2) happy

  11. 3_4 box color #C7C2BB box br color #9D9893

  12. 3_5 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 1. What is Mr. Hatch feeling? Check Mr. Hatch lived a life. One day, the postman brought him a box of chocolates with a card. It said, "Somebody loves you." Mr. Hatch was very . ------ Foreshadowing 이야기가 어떤 식으로 전개될지 미리 예측해 보세요. 해치씨에게 앞으로 어떤 일이 일어날까요?  Something wonderful will happen.  Something very sad will happen.  Something awful will happen. 힌트를 보고 싶으면 ‘Show’ 버튼을 누르세요. ------ Hide Done Try again! 힌트 문장을 잘 보고 앞으로 어떤 일이 벌어질 지 상상해 보세요. X [Done]을 클릭했을 때 정답을 체크하여 틀렸을 때 띄워주는 화면 틀렸을 때 뜨는 내용을 xml에 적어서 편집할 수 있도록 함.

  13. 3_5 box color #C7C2BB box br color #9D9893

  14. 3_6 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 1. What is Mr. Hatch feeling? Check Mr. Hatch lived a life. One day, the postman brought him a box of chocolates with a card. It said, "Somebody loves you." Mr. Hatch was very . ------ Foreshadowing 이야기가 어떤 식으로 전개될지 미리 예측해 보세요. 해치씨에게 앞으로 어떤 일이 일어날까요?  Something wonderful will happen.  Something very sad will happen.  Something awful will happen. 힌트를 보고 싶으면 ‘Show’ 버튼을 누르세요. ------ Hide Done Think and choose 본문에서 두 개의 단어 중 알맞은 단어를 선택한 후 Done 버튼을 클릭하세요. 먼저 본문의 문제를 풀어보세요. [Done]을 클릭하여 맞았을 때에는 하단으로 Think and choose 내용이 보인다. 본문의 단어를 클릭하지 않고 [Done]버튼을 클릭하면 경고창을 띄워준다. (5초 후 자동 사라짐.) Done

  15. 3_6 먼저 본문의 문제를 풀어보세요. box bg color = #CFEBB2 br color= #888A87

  16. 3_7 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 1. What is Mr. Hatch feeling? Check Mr. Hatch lived a life. One day, the postman brought him a box of chocolates with a card. It said, "Somebody loves you." Mr. Hatch was very . lonely Foreshadowing 이야기가 어떤 식으로 전개될지 미리 예측해 보세요. 해치씨에게 앞으로 어떤 일이 일어날까요?  Something wonderful will happen.  Something very sad will happen.  Something awful will happen. 힌트를 보고 싶으면 ‘Show’ 버튼을 누르세요. happy Good work 지금까지는 Hatch씨의 감정이 lonely였다면, 앞으로 surprised, happy한 감정을 느낄 일이 벌어질 것 같습니다. X Hide Done Think and choose 본문에서 두 개의 단어중 알맞은 단어를 선택한 후 Done 버튼을 클릭하세요. [Done]을 클릭했을 때 정답일 경우 Good work 팝업창이 뜬다. Done

  17. 3_7 box color #C7C2BB box br color #9D9893

  18. 3_8 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 1. What is Mr. Hatch feeling? Check Mr. Hatch lived a life. One day, the postman brought him a box of chocolates with a card. It said, "Somebody loves you." Mr. Hatch was very . lonely Check Your Work Hatch씨는 친구가 없는 외로운 사람입니다. 그런데 어느날 ‘누군가가 당신을 사랑한다’는 편지와 함께 초콜렛을 받으면 어떤 일이 일어날까요. 뭔가 멋진 일이 일어나지 않을까요. Your answer X Foreshadowing 이야기가 어떤 식으로 전개될지 미리 예측해 보세요. 해치씨에게 앞으로 어떤 일이 일어날까요?  Something wonderful will happen.  Something very sad will happen.  Something awful will happen. 힌트를 보고 싶으면 ‘Show’ 버튼을 누르세요. sad Mr. Hatch lived a lonely. life and no friends. One day, the postman brought him a box of chocolates with a. It said, "Somebody loves you." Mr. Hatch was very sad. Hide Done Think and choose 본문에서 두 개의 단어중 알맞은 단어를 선택한 후 Done 버튼을 클릭하세요. Try Again [Done]을 클릭했을 때 오답일 경우 Check Your Work 팝업이 뜨고, 설명글이 들어간 후, Your answer 칸에는 문제가 다시 나오고, 맞은 답안에는 초록색을, 틀린 답안에는 빨간색 하이라이트를 준다. [Try Again] 버튼을 클릭하면 팝업창이 닫힌다. (X와 똑같은 기능) Done

  19. 3_8 bg color=#9AEC63 bg color=#F47048

  20. 문제 2 프로세스 본문 Check Box 4-2 Check 레이어 펼치기 4-1 본문보기 4-3문제풀기 4-3정답확인 4-3정답피드백 4-4 오답피드백 4-3무답피드백 4-5 심화문제 4-8 보충 설명화면 4-5 정답확인 4-6 정답피드백 4-7 오답피드백 4-5 무답피드백

  21. 4_1 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 2. 다음 문장을 과거시제로 고칠 때 빈 칸에 알맞은 말을 쓰세요. Check I clean my room every day. I my room every day.

  22. 4_1 4p_img 316x254

  23. 4_2 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 2. 다음 문장을 과거시제로 고칠 때 빈 칸에 알맞은 말을 쓰세요. Check I clean my room every day. 과거의 동작, 상태, 습관을 나타낼 때 과거 시제를 쓰며 과거동사는 인칭에 따라 바뀌지 않는다. clean의 과거동사는? 본문의 빈 칸에 알맞은 말을 쓰고 정답을 확인하세요. I my room every day. Done 먼저 본문의 문제를 풀어보세요. 본문의 단어를 입력하지 않고 [Done]버튼을 클릭하면 경고창을 띄워준다. (5초 후 자동 사라짐.)

  24. 4_2

  25. 4_3 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 2. 다음 문장을 과거시제로 고칠 때 빈 칸에 알맞은 말을 쓰세요. Check I clean my room every day. 과거의 동작, 상태, 습관을 나타낼 때 과거 시제를 쓰며 과거동사는 인칭에 따라 바뀌지 않는다. clean의 과거동사는? 본문의 빈 칸에 알맞은 말을 쓰고 정답을 확인하세요. Good work 잘했어요. 보통 일반 동사의 과거형은 동사원형+ed입니다. e로 끝나는 경우에는 그냥 d만 추가하면 됩니다. 그럼 한번 해 볼까요? X I my room every day. Done Show [Done]을 클랙해서 정답일 경우에는 Good work 피드백을 준다. 정답 : cleaned [Show] 버튼을 클릭하면 본문의 문제가 2-1로 넘어가고 새로운 팝업 내용이 나온다.

  26. 4_3

  27. 4_4 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 2. 다음 문장을 과거시제로 고칠 때 빈 칸에 알맞은 말을 쓰세요. Check I clean my room every day. 과거의 동작, 상태, 습관을 나타낼 때 과거 시제를 쓰며 과거동사는 인칭에 따라 바뀌지 않는다. clean의 과거동사는? 본문의 빈 칸에 알맞은 말을 쓰고 정답을 확인하세요. Check your work! X I my room every day. I cleand my room every day. 동사의 과거형에 유의하세요. 보통 일반동사의 과거형은동사원형+ed입니다. 다시 한 번 풀어보세요. Done Try Again [Done]을 클랙해서 오답일 경우에는 Check your work! 피드백을 준다. 답안을 다시 써 주고, 빈 칸에 쓴 말은 빨간색으로 하이라이트 처리 한다. 해설은 xml로 관리 [Try Again] 버튼을 클릭하면 close된다.

  28. 4_4

  29. 4_5 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 2-1. 다음 문장을 과거시제로 고칠 때 빈 칸에 알맞은 말을 쓰세요. Check I like black shoes very much. ‘e’로 끝나는 일반동사의 가거형에 관한 문제입니다. 본문의 빈 칸에 알맞은 말을 쓰고 정답을 확인하세요. I black shoes very much. Done 먼저 본문의 문제를 풀어보세요. [Show]을 클릭하면 2-1 심화 문제가 나온다. 정답 : liked 본문의 단어를 입력하지 않고 [Done]버튼을 클릭하면 경고창을 띄워준다. (5초 후 자동 사라짐.)

  30. 4_5

  31. 4_6 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 2-1. 다음 문장을 과거시제로 고칠 때 빈 칸에 알맞은 말을 쓰세요. Check I like black shoes very much. ‘e’로 끝나는 일반동사의 가거형에 관한 문제입니다. 본문의 빈 칸에 알맞은 말을 쓰고 정답을 확인하세요. Good work 잘 했어요. e로 끝나는 경우에는 그냥 d만 추가하면 됩니다. X I black shoes very much. Done Show [Show]을 클릭하면 2-1 심화 문제가 나온다. 정답 : liked 본문의 단어를 입력하지 않고 [Done]버튼을 클릭하면 경고창을 띄워준다. (5초 후 자동 사라짐.)

  32. 4_6

  33. 4_7 Let’ s Check Lesson 9 Somebody Loves You, Mr. Hatch 2-1. 다음 문장을 과거시제로 고칠 때 빈 칸에 알맞은 말을 쓰세요. Check I like black shoes very much. ‘e’로 끝나는 일반동사의 과거형에 관한 문제입니다. 본문의 빈 칸에 알맞은 말을 쓰고 정답을 확인하세요. Check your work! X I black shoes very much. I likd black shoes very much. 동사의 과거형에 유의하세요. e로 끝나는 경우에는 그냥 'd'만 추가하면 됩니다. Done Done Try Again [Done]을 클릭해서 오답일 경우에는 Check your work! 피드백을 준다. 답안을 다시 써 주고, 빈 칸에 쓴 말은 빨간색으로 하이라이트 처리 한다. 해설은 xml로 관리 [Try Again] 버튼을 클릭하면 close된다.

  34. 4_7

  35. 4_8 Grammar Review Lesson 9 Somebody Loves You, Mr. Hatch 과거시제 He went to the library yesterday. (과거의 동작) He took a shower. (과거의 동작) He was so happy. (과거의 상태) 과거의 동작, 상태, 습관을 나타낼 때 과거시제를 쓰며 be동사나 일반동사의 고거형으로 나타낸다. 일반동사의 과거형은 인칭에 따라 바뀌지 않는다. 일반동사의 과거형은『동사+-ed』를 기본으로 하지만, 불규칙한 형태로 변하는 동사도 많다. 그냥 본문 html로 구성한다.

  36. 4_8 bg color # 93C3D7 size 1000x40 돋음 18px #2d2d2d 한글 돋음 16px #2d2d2d 영문 Arial 16px #ffffff , 하이라이트 #FFF322 box 484x237 라운드 # 6398D4 돋음 14px #2d2d2d 줄간격18px 돋음 14px # 6398D4 Arial 14px #2d2d2d #F9150A table color #6398D4 grammar_img.png 433x599

  37. support box 띄우기 5-1 Read& Do Lesson 9 Somebody Loves You, Mr. Hatch Answer : 각 4개의 버튼 이미지 제작 (On/off) Get started! : 버튼 제작 Step1 Think and talk. Q. 여러분은 언제 행복하다고 느끼나요? Answer: Get started! Q. 제목과 그림을 보고 이야기에 어떤 낱말이 나올지 생각해 보세요. Answer: Get started! 인풋박스는 모두 answerbox.html으로 링크 녹음기 아이콘은 별도 플랫폼 API호출 Get started!를 클릭하면 오른쪽에 support box가 뜸

  38. 5-1 Arial 14px bold # 4184A0 answer_icon1.png 25x25 answer_icon1_click.png 25x25 answer_icon2.png 25x25 answer_icon2_click.png 25x25 answer_icon3.png 25x25 answer_icon3_click.png 25x25 answer_icon4.png 25x25 answer_icon4_click.png 25x25 answer_title.png 577x61 x156 y155 돋움 16px bold #2d2d2d Arial14px bold #2d2d2d box 410x30 # F2ECD3 readanddo_img1.png 405x352 readanddo_img2.png 228x178

  39. support box 띄우기 5-2 Read& Do Lesson 9 Somebody Loves You, Mr. Hatch Answer : 각 4개의 버튼 이미지 제작 (On/off) Get started! : 버튼 제작 Step1 Think and talk. Q. 여러분은 언제 행복하다고 느끼나요? Get Started! Answer: Get started! 민호 나는 음식을 먹을 때가 가장 행복해. 고기를 좋아하지만, 요즘은 건강을 생각해서 야채도 먹으려고 해. Jane 나는 사람들 앞에서 노래를 부를 때가 제일 행복해. 나의 노래를 들으면서 많은 사람들이 감동을 받았으면 좋겠어. 수정 나는 책을 읽을 때가 제일 행복해. 책은 항상 나의 자신을 겸손하게 만들고 부족한 지식을 채워주지. 우리는 언제 행복을 느끼는지 생각을 해 봅시다. 아래 친구들의 의견을 보고 Answer박스에 자신의 의견을 표현하세요. Q. 제목과 그림을 보고 이야기에 어떤 낱말이 나올지 생각해 보세요. Answer: Get started! 민호 Jane 수정 X 나는 책을 읽을 때가 제일 행복해. 책은 항상 나의 자신을 겸손하게 만들고 부족한 지식을 채워주지. Get started 박스가 뜨고 친구들 캐릭터 3명이 등장. 캐릭터 이름은 바꿀 수 있도록 한다. 각 캐릭터의 멘트는xml로 관리 캐릭터와 이름을 클릭하면 하단에 박스와 멘트가 함께 나온다. (탭키)

  40. 5-2 box 62x27 font color # 1066CF bg color #A4C7DB br color # 0C92EF X box 270x135 라운드 bg color #DBE9F2 font 돋움 12px #656565 줄간격18px friend1.png 85x100 friend2.png 85x100 friend3.png 85x100

  41. support box 띄우기 answerbox_1 Answer: 웹편집 소스 넣기 입력한 내용이 나옵니다. Save Cancel 입력한 데이터가 있을 경우에는 입력한 내용이 화면에 보여집니다. 탭으로 하여 한 페이지로 만듭니다. 스크롤이 생길 수 있습니다. 녹음기 아이콘은 빠집니다. 플랫폼 녹음 api로 녹음기를 호출합니다. 기존에 입력한 데이터가 있으면 화면에 보여줍니다.

  42. answer_icon1_click.png answerbox_1 전체 팝업 사이즈 600x400 여기 텍스트 편집 오픈소스를 넣어주세요.

  43. support box 띄우기 answerbox_2 answer_icon2_click.png 캔버스 소스 넣기 black : #000000 Red : #ff0000 blue : #0000ff green : #008000 1pt 3pt 6pt red yellow blue green 기존에 입력한 데이터가 있으면 화면에 보여줍니다. 입력박스 바깥쪽으로 스크롤바가 생깁니다. 그림그리기 기능 (기본/클릭) : 클릭하면 아래로 셀렉트 박스가 나와서 색깔 및 굵기를 선택할 수 있다. 텍스트 입력툴: 클릭하면 펜기능이 없어지고, 텍스트 박스를 삽입할 수 있다. 원그리기툴: 원그리기를 클릭하고 본문을 클릭하면 원이 생기고, 마우스로 드래그하여 크기를 조절할 수 있다. 펜 색깔 및 굵기를 선택한 후 원을 선택하면 원의 색깔과 굵기가 따라서 변한다. 사각형그리기툴: 원그리기와 동일, 사각형이 생김 지우개툴: 지우개를 클릭하면 가장 나중에 그린것이 없어짐. 클릭하면 순서대로 사라짐

  44. support box 띄우기 answerbox_3 내컴퓨터 이미지 넣기 입력한 데이터가 있을 경우에는 입력한 내용이 화면에 보여집니다. 탭으로 하여 한 페이지로 만듭니다. 스크롤이 생길 수 있습니다. 로컬의 이미지를 저장합니다. (경로를 저장하여 화면에 보여줍니다.)

  45. answerbox_3 Edit 버튼을 클릭하면 수정할 수 있는 화면이 나옵니다.

  46. support box 띄우기 dictionary Read& Do Lesson 9 Somebody Loves You, Mr. Hatch 단어사전 New words 에서는 영어 단어리스트가 먼저 보여지고 화살표를 클릭하면 한글 해석이 보여진다. (단어마다 모두 동일함) 본문에서는 new words에 해당하는 단어의 색깔이 달라지고 밑줄 표시가 되어 진다. 클릭하면 용어사전으로 링크한다. 필요하면 레이어에 스크롤이 생긴다. Step2 Enjoy the story. somebody thin alone all day factory postman somebody 누군가 What’s important? 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.  New words 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 secretadmirer.” So he put on a colorfultie. He took the box of chocolates to his factory and shared them. somebody 누군가 thin 마른, 얇은 alone 혼자서 all day 하루 종일 factory 공장 postman 우편 집배원 a box of ~ 한 상자 secret 비밀의 admirer 팬, 숭배자 put on ~를 입다, 신다 colorful 화려한 tie 넥타이 share 나누다 Focus on form  본문에 용어 사전 링크 New words에 수록된 단어를 본문에서 색깔 표시를 해 준다.

  47. dictionary 600x460 돋음 15px #ffffff #127DC2 600x34 Arial 15px #2d2d2d bold 클릭하면 밑줄 Arial 14px #2d2d2d bold 한글 돋음 12ps # 2d2d2d Arial 12px #2d2d2d 클릭하면 밑줄

  48. 단어장 및 Answer box 띄우는 방법

More Related