.env.product
@@ -1,8 +1,8 @@ VUE_APP_ENV = 'product' VUE_APP_API_URL = "https://jsek.bnuic.com" VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/' VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/toddlerGameImplementation' # VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/' # VUE_APP_PUBLIC_PATH = 'http://182.92.203.7:3007/books/book/botany' VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation" VUE_APP_BOOK_ID = 'toddlerGameImplementation' # VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/' # VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/kindergartenActivitiesDesignGuidance' VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/' VUE_APP_PUBLIC_PATH = 'http://182.92.203.7:3007/books/book/kindergartenActivitiesDesignGuidance' VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/kindergartenActivitiesDesignGuidance" VUE_APP_BOOK_ID = 'kindergartenActivitiesDesignGuidance' src/App.vue
@@ -4,28 +4,53 @@ <lifeCare v-if="activeBook.name == 'lifeCare'"></lifeCare> <embedded v-if="activeBook.name == 'embedded'"></embedded> <english v-if="activeBook.name == 'english'"></english> <sportsAndHealth v-if="activeBook.name == 'sportsAndHealth'"></sportsAndHealth> <sportsAndHealth v-if="activeBook.name == 'sportsAndHealth'" ></sportsAndHealth> <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance> <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama> <mathBook v-if="activeBook.name == 'mathBook'"></mathBook> <botany v-if="activeBook.name == 'botany'"></botany> <civilAviation v-if="activeBook.name == 'civilAviation'"></civilAviation> <civilServices v-if="activeBook.name == 'civilServices'"></civilServices> <meetingPlanners v-if="activeBook.name == 'meetingPlanners'"></meetingPlanners> <aviationBasicSkills v-if="activeBook.name == 'aviationBasicSkills'"></aviationBasicSkills> <meetingPlanners v-if="activeBook.name == 'meetingPlanners'" ></meetingPlanners> <aviationBasicSkills v-if="activeBook.name == 'aviationBasicSkills'" ></aviationBasicSkills> <aviationSafety v-if="activeBook.name == 'aviationSafety'"></aviationSafety> <aviationEtiquette v-if="activeBook.name == 'aviationEtiquette'"></aviationEtiquette> <preschoolGameGuidance v-if="activeBook.name == 'preschoolGameGuidance'"></preschoolGameGuidance> <kindergartenLanguageActivity v-if="activeBook.name == 'kindergartenLanguageActivity'"></kindergartenLanguageActivity> <kindergartenActivitiesDesignGuidance v-if="activeBook.name == 'kindergartenActivitiesDesignGuidance'"></kindergartenActivitiesDesignGuidance> <childcareInstitutionsManagement v-if="activeBook.name == 'childcareInstitutionsManagement'"> <aviationEtiquette v-if="activeBook.name == 'aviationEtiquette'" ></aviationEtiquette> <preschoolGameGuidance v-if="activeBook.name == 'preschoolGameGuidance'" ></preschoolGameGuidance> <kindergartenLanguageActivity v-if="activeBook.name == 'kindergartenLanguageActivity'" ></kindergartenLanguageActivity> <kindergartenActivitiesDesignGuidance v-if="activeBook.name == 'kindergartenActivitiesDesignGuidance'" ></kindergartenActivitiesDesignGuidance> <childcareInstitutionsManagement v-if="activeBook.name == 'childcareInstitutionsManagement'" > </childcareInstitutionsManagement> <toddlerGameImplementation v-if="activeBook.name == 'toddlerGameImplementation'"></toddlerGameImplementation> <aurturingAndEducationAged0to3 v-if="activeBook.name == 'aurturingAndEducationAged0to3'"> <toddlerGameImplementation v-if="activeBook.name == 'toddlerGameImplementation'" ></toddlerGameImplementation> <aurturingAndEducationAged0to3 v-if="activeBook.name == 'aurturingAndEducationAged0to3'" > </aurturingAndEducationAged0to3> <preschoolEvaluation v-if="activeBook.name == 'preschoolEvaluation'"> </preschoolEvaluation> <preschoolBasicKnowledge v-if="activeBook.name == 'preschoolBasicKnowledge'"></preschoolBasicKnowledge> <preschoolBasicKnowledge v-if="activeBook.name == 'preschoolBasicKnowledge'" ></preschoolBasicKnowledge> <behaviorObserveAndGuid v-if="activeBook.name == 'behaviorObserveAndGuid'" ></behaviorObserveAndGuid> </div> </template> <script> @@ -64,17 +89,28 @@ civilAviation: () => import("./books/civilAviation/view/index.vue"), civilServices: () => import("./books/civilServices/view/index.vue"), meetingPlanners: () => import("./books/meetingPlanners/view/index.vue"), aviationBasicSkills: () => import("./books/aviationBasicSkills/view/index.vue"), aviationBasicSkills: () => import("./books/aviationBasicSkills/view/index.vue"), aviationSafety: ()=> import("./books/aviationSafety/view/index.vue"), aviationEtiquette: ()=> import("./books/aviationEtiquette/view/index.vue"), preschoolGameGuidance: ()=> import("./books/preschoolGameGuidance/view/index.vue"), kindergartenLanguageActivity: ()=> import("./books/kindergartenLanguageActivity/view/index.vue"), kindergartenActivitiesDesignGuidance: () => import("./books/kindergartenActivitiesDesignGuidance/view/index.vue"), childcareInstitutionsManagement: () => import("./books/childcareInstitutionsManagement/view/index.vue"), toddlerGameImplementation: () => import("./books/toddlerGameImplementation/view/index.vue"), aurturingAndEducationAged0to3: () => import("./books/aurturingAndEducationAged0to3/view/index.vue"), preschoolEvaluation: () => import("./books/preschoolEvaluation/view/index.vue"), preschoolBasicKnowledge: ()=> import("./books/preschoolBasicKnowledge/view/index.vue"), preschoolGameGuidance: () => import("./books/preschoolGameGuidance/view/index.vue"), kindergartenLanguageActivity: () => import("./books/kindergartenLanguageActivity/view/index.vue"), kindergartenActivitiesDesignGuidance: () => import("./books/kindergartenActivitiesDesignGuidance/view/index.vue"), childcareInstitutionsManagement: () => import("./books/childcareInstitutionsManagement/view/index.vue"), toddlerGameImplementation: () => import("./books/toddlerGameImplementation/view/index.vue"), aurturingAndEducationAged0to3: () => import("./books/aurturingAndEducationAged0to3/view/index.vue"), preschoolEvaluation: () => import("./books/preschoolEvaluation/view/index.vue"), preschoolBasicKnowledge: () => import("./books/preschoolBasicKnowledge/view/index.vue"), behaviorObserveAndGuid: () => import("./books/behaviorObserveAndGuid/view/index.vue"), }, data() { return { @@ -121,13 +157,15 @@ // toddlerGameImplementation // 婴幼儿游戏活动实施 // preschoolGameGuidance // 学前游戏指导 // kindergartenLanguageActivity // 幼儿园语言教育与活动指导 // kindergartenActivitiesDesignGuidance // 幼儿园活动设计指导 // aurturingAndEducationAged0to3 // 0~3岁婴幼儿抚育与教育 // preschoolEvaluation // 学前教育评价 // behaviorObserveAndGuid // 婴幼儿行为观察与指导 this.activeBook = await this.config.getBookConfig( process.env.VUE_APP_RESOURCE_CTX + (process.env.VUE_APP_ENV == "product" ? process.env.VUE_APP_BOOK_ID : "preschoolEvaluation") : "behaviorObserveAndGuid") ); // this.activeBook = await this.config.getBookConfig( src/books/behaviorObserveAndGuid/css/default.less
New file @@ -0,0 +1,950 @@ .temp-bookInnerContentSports { width: 100%; height: 100%; overflow: auto; .page-main { width: 100%; height: 100%; overflow: auto; .public-behaviorObserveAndGuid { font-family: '宋体'; max-width: 816px; min-width: 375px; margin: 0 auto; border-color: #f49a4c; height: 100%; font-size: 18px; .page-box { box-sizing: border-box; min-height: 1150px; margin-bottom: 20px; box-shadow: 0 3px 6px 1px #00000029; background-color: #fff; position: relative; } .notIndent { text-indent: 0 !important; } .chapter { position: relative; .page-header-box { width: 70px; position: absolute; .evenBox { width: 100%; display: flex; flex-direction: column; align-items: flex-end; .vertical { width: 30px; background: #7acab4; text-align: center; } } } .videoBox { width: 100%; border: 1px solid #7acab4; display: flex; flex-direction: column; align-items: center; justify-content: center; .videoTitle { width: 100%; height: 50px; border-bottom: 1px solid #7acab4; display: flex; justify-content: flex-start; align-items: center; color: #7acab4; .iconBox { width: 100px; height: 50px; display: flex; justify-content: center; align-items: center; border-right: 1px solid #7acab4; cursor: pointer; svg { margin-right: 5px; } } .title { padding-left: 20px; } } .videoItem { width: 100%; padding: 2px; box-sizing: border-box; video { width: 100%; } } } .pdfBox { width: 100%; height: 50px; border: 1px solid #7acab4; display: flex; align-items: center; justify-content: flex-start; margin: 10px 0; color: #7acab4; .iconBox { width: 100px; height: 50px; display: flex; justify-content: center; align-items: center; border-right: 1px solid #7acab4; } .title { padding-left: 20px; cursor: pointer; &:hover { text-decoration: underline; } } } .bk-xyx { textarea { width: 100%; max-width: 630px; border: 1px solid #7acab4; border-radius: 5px; font-size: 16px; font-family: '宋体'; line-height: 30px; padding: 10px; box-sizing: border-box; } textarea:focus { outline: none; border-color: #000; } } img { max-width: 100%; } .customImg { display: flex; justify-content: space-around; align-items: center; } /* 页面背景色*/ body.bodybg-color { background-color: #77582c; } /* 垂直居中*/ div.bodystyle { font-family: '宋体'; font-size: 18px; text-align: justify; padding: 10% 12%; box-sizing: border-box; line-height: 30px; } /*章标居左*/ .sub-Title-l { text-align: left; font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; margin: auto auto 1em auto; font-size: 1.1em; text-indent: 0em; color: #888888; } /*章标居右*/ .sub-Title-r { text-align: left; font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; margin: auto auto -0.5em auto; font-size: 1.1em; text-indent: 0em; color: #888888; } /*<h1>篇章页居左一级标题*/ h1.firstTitle-l { font-size: 1.6em; line-height: 1.2em; text-indent: 0em; text-align: left; color: #77582c; margin: 0.3em auto 5em auto; } /*篇章页副标题居左*/ .subHead-l { text-align: left; line-height: 1.2em; font-size: 1.1em; text-align: left; color: #6b6441; margin: -2.5em auto 2.5em auto; } /*<h1>篇章页居右一级标题*/ h1.firstTitle-r { font-size: 1.6em; line-height: 1.2em; text-indent: 0em; text-align: left; color: #77582c; margin: 0.3em auto 1.8em auto; } /*篇章页副标题居右*/ .subHead-r { font-size: 1.1em; line-height: 1.2em; text-align: left; color: #6b6441; margin: -2.5em auto 2.5em auto; } /*章文内容*/ .quotation-1 { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1em; line-height: 1.1em; margin: 1em auto; text-indent: 2em; color: #5A5A5A; } /*<h1>一级标题*/ h1.firstTitle { font-size: 1.5em; line-height: 1.2em; text-indent: 0em; text-align: left; margin: 25% auto 2em auto; color: #77582c; } /*<h1>带副标一级标题*/ h1.firstTitle-3 { font-size: 1.5em; line-height: 1.2em; text-indent: 0em; text-align: left; margin: 25% auto 0em auto; color: #77582c; } /*<h1>带章标一级标题*/ h1.firstTitle-2 { font-size: 1.5em; line-height: 1.2em; text-indent: 0em; text-align: left; margin: 0em auto 2em auto; color: #77582c; } /*<h1>带章标及副标一级标题*/ h1.firstTitle-1 { font-size: 1.5em; line-height: 1.2em; text-indent: 0em; text-align: left; margin: 0em auto 0em auto; color: #77582c; } /*<h2>二级标题*/ h2.secondTitle { font-size: 1.35em; line-height: 1.3em; text-indent: 0em; color: #77582c; margin: 25% auto 2em auto; } /*<h2>带章标二级标题*/ h2.secondTitle-2 { width: 500px; font-size: 1.35em; line-height: 1.3em; padding: 5px; border-radius: 20px; text-indent: 0em; color: #77582c; margin: 3em 0 2em 0; background-color: #7acab4; color: #fff; text-align: center; } /*<h2>带副标二级标题*/ h2.secondTitle-3 { font-size: 1.35em; line-height: 1.3em; text-indent: 0em; color: #77582c; margin: 25% auto 0em auto; } /*<h2>带章标及副标二级标题*/ h2.secondTitle-1 { font-size: 1.35em; line-height: 1.3em; text-indent: 0em; color: #77582c; margin: 0em auto 0em auto; } /*<h3>三级标题*/ h3.thirdTitle { font-size: 1.2em; line-height: 1.3em; text-indent: 0em; margin-top: 1em; color: #77582c; } /*<h4>四级标题*/ h4.fourthTitle { font-size: 1.1em; line-height: 1.3em; text-indent: 0em; margin-top: 1em; color: #77582c; } /*<h5>五级标题*/ h5.fifthTitle { font-size: 1em; line-height: 1.3em; text-indent: 0em; margin-top: 1em; color: #77582c; } /*<h6>六级标题*/ h6.sixthTitle { font-size: 1em; line-height: 1.3em; text-indent: 0em; margin-top: 1em; color: #77582c; } /*标题作者居中*/ .author { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: center; text-indent: 0em; font-weight: bold; color: #5A5A5A; margin: -2em auto 3em auto; } /*标题作者居左*/ .author-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 0em; font-weight: bold; color: #5A5A5A; margin: 0em auto 3em auto; } /*副标题*/ .subHead { text-align: left; line-height: 1.2em; text-indent: 0em; font-size: 1.1em; margin: 0em auto 2.5em auto; } /*一级标题章标*/ .subHead-1 { text-align: left; line-height: 1.2em; font-size: 1.1em; text-indent: 0em; margin: 20% auto 0.3em auto; color: #888888; } /*一级标题章标*/ .subHead-2 { text-align: left; line-height: 1.2em; font-size: 1.1em; text-indent: 0em; margin: 20% auto 0.3em auto; color: #888888; } /*二级标题章标*/ .secondsubHead-1 { text-align: left; line-height: 1.1em; font-size: 1em; text-indent: 0em; margin: 20% auto 0.3em auto; color: #888888; } /*二级标题章标*/ .secondsubHead-2 { text-align: left; line-height: 1.1em; font-size: 1em; text-indent: 0em; margin: 20% auto 0.3em auto; color: #fff; background-color: #7acab4; } /*版权标题*/ .copyright-title { font-size: 1.5em; line-height: 1.2em; text-align: center; text-indent: 0em; margin: 0.5em auto 2em auto; color: #c1a173; } /*版权内容*/ .copyright-text { font-size: 1em; text-indent: 0em; line-height: 1.8em; } /*文前*/ .preface { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-indent: 2em; color: #5A5A5A; } /*文前-top*/ .preface-top { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-indent: 2em; color: #5A5A5A; margin: 25% auto 0.3em auto; } /*正文内容*/ .content { font-size: 1em; text-indent: 2em; } /*正文内容居左*/ .left { font-size: 1em; text-indent: 0em; text-align: left; } /*正文内容居中*/ .center { font-size: 1em; text-indent: 0em; text-align: center; } /*正文内容居右*/ .right { font-size: 1em; text-indent: 0em; text-align: right; } /*正文内容-TOP*/ .content-top { font-size: 1em; text-indent: 2em; // margin-top: 25%; } /*案例标题居中（引文、诗歌等）*/ .titleQuot-c { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1.05em; line-height: 1.3em; margin: 1em auto; text-align: center; color: #7acab4; font-weight: bold; } /*案例标题居左（引文、诗歌等）*/ .titleQuot-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1.05em; line-height: 1.3em; margin: 1em auto; text-align: left; text-indent: 0em; color: #7acab4; font-weight: bold; } /*案例标题*/ .titleQuot-1 { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1.05em; line-height: 1.3em; margin: 1em auto; color: #7acab4; // text-indent: 2em; font-weight: bold; } /*引文内容居左(引文、诗歌、诗词、书信、书信称谓、居右署名)*/ .quotation { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 2em; margin: 0.3em auto; color: #5A5A5A; } /*引文内容-top*/ .quotation-top { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 2em; color: #5A5A5A; margin: 25% auto 0.3em auto; } /*引文内容span*/ .quotation-s { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; color: #5A5A5A; } /*诗词标题*/ .poemtitle { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1em; line-height: 1.3em; text-align: center; text-indent: 0em; font-weight: bold; color: #5A5A5A; margin: 1em auto; } /*诗词标题*/ .poemtitle-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 1em; line-height: 1.3em; text-align: left; text-indent: 2em; font-weight: bold; color: #333; margin: 1em auto; } /*诗词作者*/ .poemtitle-author-c { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin-bottom: 1em; text-align: center; text-indent: 0em; color: #5A5A5A; } /*诗词作者居左（引文、诗歌等）*/ .poemtitle-author-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin-bottom: 1em; text-indent: 2em; color: #5A5A5A; } /*诗词的内容*/ .poem { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: center; text-indent: 0em; margin: 0.3em auto; color: #5A5A5A; } /*诗词的内容*/ .poem-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 2em; margin: 0.3em auto; color: #5A5A5A; } /*右下角说明*/ .right-info { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: right; margin-bottom: 0.5em; color: #5A5A5A; } /*书信称谓*/ .letters { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 0em; margin: 0.3em auto; color: #5A5A5A; } /*书信内容*/ .text-letters { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; text-align: left; text-indent: 2em; margin: 0.3em auto; color: #5A5A5A; } /*粗体*/ span.bold { font-weight: bold; } /*斜体*/ .italic { font-style: italic; } /*红色*/ .color-red { color: #FB0830; } /*橙色*/ .color-orange { color: #F78413; } /*黄色*/ .color-yellow { color: #E8D60B; } /*绿色*/ .color-green { color: #07D007; } /*青色*/ .color-cyan { color: #599CA9; } /*蓝色*/ .color-blue { color: #4756E5; } /*紫色*/ .color-purple { color: #B046DC; } /*下划线*/ span.underline { text-decoration: underline; } /*着重强调*/ span.emphasis { text-decoration: underline; } /*删除线*/ span.linethrough { text-decoration: line-through; } /*数字上标*/ span.super { font-size: 0.7em; vertical-align: super; } /*数字下标*/ span.sub { font-size: 0.7em; vertical-align: sub; } /*首字下沉，需配合.ftext 一并使用*/ span.fDropContent { font-family: "汉仪旗黑50S", "HYQiHei-50s"; font-size: 1em; text-indent: 0em; } /*被设为大写字的 Class 首字大写，需被包裹在.fDropContent 内*/ .ftext { float: left; font-size: 1.6em; color: #5A5A5A; } /*边框*/ .border { border: 1px solid #77582c; border-radius: 0.25em; padding: 0.25em; margin: 1em auto; } /*边框底色*/ .border bgColor { border: 1px solid #77582c; background: #D2D2D2; border-radius: 0.25em; padding: 0.25em; margin: 1em auto; } /*底色*/ .bgColor { background: #c9ebe0; padding: 1em; border-radius: 0.25em; margin: 1em auto; border: 1px solid #7acab4; box-sizing: border-box; border-radius: 20px; } /*插图、表格截图（不含图片标题或图片说明）*/ .bodyPic { text-align: center; margin: 1em auto; } /*插图、表格截图（含图片标题或图片说明）*/ .qrbodyPic { font-size: 0.95em; text-align: center; margin: 0 1em; } .bodyPic-l { float: left; margin-left: 4em; } /*表格表头*/ .imgtitle { font-family: "汉仪旗黑55S", "HYQiHei-55s"; font-size: 0.95em; margin: 1em auto -0.8em auto; text-align: center; text-indent: 0; color: #7acab4; } /*图片说明居中*/ .imgdescript { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-align: center; text-indent: 0em; color: #7acab4; } /*图片说明居左*/ .imgdescript-l { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-align: left; text-indent: 2em; color: #7acab4; } /*图片说明居中加粗*/ .imgdescript-b { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-align: center; text-indent: 0em; color: #5A5A5A; font-weight: bold; } /*图片说明居左加粗*/ .imgdescript-l-b { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; margin: 0.3em auto; text-align: left; text-indent: 2em; color: #5A5A5A; font-weight: bold; } /*环绕图片*/ .floatPic-1 { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; float: right; text-align: center; width: 45%; margin-left: 1em; margin-bottom: 0.5em; margin-top: 0.5em; } /*环绕图片*/ .floatPic { font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0"; font-size: 0.95em; float: left; text-align: center; width: 45%; margin-right: 1em; margin-bottom: 0.5em; margin-top: 0.5em; } /*公式图*/ .g-pic { height: 2em; vertical-align: middle; } /*行内图*/ .h-pic { height: 1.5em; vertical-align: middle; } /*生僻字截图*/ .s-pic { height: 1em; vertical-align: middle; } /*签名图片*/ .signImg { text-align: right; width: 30%; margin: 1em 0em 1em 70%; } /*全屏图*/ .qqreader-fullimg { qrfullpage: 1; } /*注标图*/ .qqreader-footnote { width: 1em; margin-left: 0.1em; margin-right: 0.1em; } /*分页*/ .pagebreak { page-break-after: always; } /*结束*/ } } } } src/books/behaviorObserveAndGuid/images/0011-03.jpg
New file @@ -0,0 +1,28 @@ const testData = { 2: { 15: [66984, 66985, 66986], }, 3: { 29: [67015, 67016, 67017, 67018, 67019, 67020, 67021], }, 4: { 54: [67022, 67023, 67024, 67025, 67026, 67027, 67028, 67029, 67030], }, 5: { 70: [67031, 67032, 67033, 67034, 67035, 67036, 67037, 67038, 67039], }, 6: { 99: [67040, 67041, 67042, 67043, 67044, 67045, 67046, 67047], }, 7: { 113: [67048, 67049, 67050, 67051, 67052, 67053, 67054, 67055], }, 8: { 136: [67056, 67057, 67058, 67059, 67060, 67061], }, 9: { 146: [67062, 67063, 67064, 67065, 67066, 67067], }, }; export default testData; src/books/behaviorObserveAndGuid/js/tool.js
New file @@ -0,0 +1,57 @@ import SparkMD5 from "spark-md5"; export function getFileMd5(file, chunkSize) { return new Promise((resolve, reject) => { let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice; let chunks = Math.ceil(file.size / chunkSize); let currentChunk = 0; let spark = new SparkMD5.ArrayBuffer(); let fileReader = new FileReader(); fileReader.onload = function (e) { spark.append(e.target.result); currentChunk++; if (currentChunk < chunks) { loadNext(); } else { const md5 = spark.end(); resolve(md5); } }; fileReader.onerror = function (e) { reject(e); }; function loadNext() { let start = currentChunk * chunkSize; let end = start + chunkSize; if (end > file.size) { end = file.size; } fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); } loadNext(); }); } // 获取不受保护的图片 export function getPublicImage(md5, width, height) { let src = null; if (md5) { src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`; } else { return ""; } if (width) src += `&width=${width}`; if (height) src += `&height=${height}`; return src; } // export function ForTable() { // const head = ["健康状况", "标志", "心理方面", "肉体方面", "社会方面"]; // return head?.map((item) => { // return `<tr>${"<th>" + item + "</th>"}</tr>`; // }); // }
New file @@ -0,0 +1,1149 @@ <template> <div class="chapter" num="1"> <div class="page-box" page="1"> <div v-if="showPageList.indexOf(1) > -1"> <div class="bodystyle"> <h1 class="sub-Title-l">第一章</h1> <h1 class="firstTitle-l">婴幼儿行为观察概述</h1> <p class="titleQuot-1"> <img class="g-pic" src="../../images/0011_01.jpg" alt="" /> </p> <p class="content"> <span class="bold" >1．理解行为、观察以及婴幼儿行为观察的含义与特征；</span > </p> <p class="content"> <span class="bold">2．了解日常观察和专业观察的区别；</span> </p> <p class="content"> <span class="bold">3．掌握婴幼儿行为观察的类别；</span> </p> <p class="content"> <span class="bold">4．理解婴幼儿行为观察的意义与价值；</span> </p> <p class="content"> <span class="bold" >5．理解并在实践中提升作为专业观察者需要具备的各项能力。</span > </p> <p class="titleQuot-1"> <img class="g-pic" src="../../images/0011_02.jpg" alt="" /> </p> <div class="bodyPic openImgBox"> <img src="../../images/Figure-0012-03.jpg" alt="" active="true" /> </div> </div> </div> </div> <div class="page-box" page="2"> <div v-if="showPageList.indexOf(2) > -1"> <div class="bodystyle"> <p class="titleQuot-1"> <img class="g-pic" src="../../images/0012_01.jpg" alt="" /> </p> <p class="content"> 游戏是幼儿的天性。当我们看到幼儿聚在一起玩耍时，可以观察他们什么呢？观察幼儿在游戏过程中的哪些行为是有意义、有价值的呢？该如何进行观察呢？从以下幼儿玩桌式足球的观察案例中，你了解到哪些与幼儿行为观察相关的知识呢？ </p> <div class="bodyPic openImgBox"> <img src="../../images/Figure-0013-01.jpg" alt="" active="true" /> </div> </div> </div> </div> <div class="page-box" page="3"> <div v-if="showPageList.indexOf(3) > -1"> <div class="bodystyle"> <div class="customImg"> <div class="qrbodyPic openImgBox"> <img src="../../images/Figure-0014-01.jpg" alt="" active="true" /> <p class="imgdescript">图1-1-1 一人操作桌式足球</p> </div> <div class="qrbodyPic openImgBox"> <img src="../../images/Figure-0014-02.jpg" alt="" active="true" /> <p class="imgdescript">图1-1-2 两人合作玩桌式足球</p> </div> </div> <p class="content"> 在这则案例中，观察者以参与者的身份进行观察，并对幼儿在活动中的具体行为表现进行了翔实、客观的记录。从这则案例中，我们可以观察到不同幼儿之间的交往行为，还可以观察到幼儿在玩桌式足球时的精细动作、语言、合作与竞争行为、规则意识等多个方面的情况。因而，对婴幼儿行为的观察可以帮助我们更好地了解婴幼儿在成长与发展过程中的具体状况。 </p> <p class="content"> 婴幼儿行为观察并不是观察者盲目、随意地观察与记录。婴幼儿行为观察与指导要求观察者敏感地捕捉婴幼儿成长与发展过程中的关键事件或独特的、具有教育意义的行为，并采用科学的方法进行观察、记录与分析，从而为更好地理解婴幼儿行为、促进婴幼儿的成长与发展提供有针对性的教育指导和建议。本章将重点介绍婴幼儿行为观察的基本概念、方法和技能。 </p> <!-- <h2 class="secondsubHead-2">第一节 婴幼儿行为观察的基本概念</h2> --> <h2 class="secondTitle-2">第一节 婴幼儿行为观察的基本概念</h2> <p class="titleQuot-1">一、行为的含义与特征</p> <p class="poemtitle-l">（一）行为的含义</p> <p class="content"> 一般来说，可以从狭义和广义两个层面来理解行为的含义。从狭义上来说，行为是指个体的一言一行、一举一动，是一种外在的活动，是能被直接观察、描述、记录或测量的活动。例如，小明在跑步、小美在唱歌，这些活动都是个体外在的行为表现，我们可以观察到小明跑步时的动作、小美唱歌时的神情，并且通过一定的文字将所观察到的事实描述、记录下来，我们还可以使用一定的工具来测量这些活动。 </p> </div> </div> </div> <div class="page-box" page="4"> <div v-if="showPageList.indexOf(4) > -1"> <div class="bodystyle"> <p class="content"> 从广义上来说，行为不仅仅局限于可以被直接观察到的个体的外在活动和行为表现，还包括以外在行为为线索，间接表现出来的内在心理活动和心理过程。也就是说，广义的行为包括外在和内在两个部分。被观察者外在的行为活动可以被直接观察到，但是被观察者的感受、意愿、动机、思维等内在心理活动难以直接观察，不过观察者可以根据观察到的外在行为事实对被观察者的内在心理活动进行猜想、假设、推测或判断。例如，小明在快乐地跑步、小美在开心地唱歌。小明的快乐、小美的开心都是他们的内在心理活动，但是观察者可以通过他们的动作和神情来猜想、推测他们在当时情境下的内在心理活动。 </p> <p class="content"> 在观察的过程中，如果观察者能敏锐地通过观察到的外在行为来推测被观察者的内在心理活动，就可以增进对观察对象及其行为的深层理解。例如，在“小明在快乐地跑步”这个观察描述中，如果我们在观察的过程中注意收集小明跑步时的具体动作和神情，并通过这些具体的外在信息来推测他的内在心理活动，那么我们对小明跑步这一行为所获得的信息就更全面了，理解起来也会更深入和丰富，而不仅仅是停留在小明跑步这一外在行为上。 </p> <p class="content"> 观察者的生活经验和专业知识常常会影响其对被观察者内在心理活动的推测与解读。如果在观察者的生活经验及其积累的专业知识中有对相关行为模式、符号的解读，他就能够比较准确地推测和解读被观察者的内在心理活动。 </p> <p class="titleQuot-1"> <img class="g-pic" src="../../images/0014_01.jpg" alt="" /> </p> <p class="quotation"> 何老师曾经在大学课堂上分别出示具有快乐、悲伤、愤怒、恐惧这4种表情的人物的图片，让学生观察图片中人物的面部表情，并猜测这些表情分别代表什么情绪。有意思的是，出示代表快乐的表情图片时，很多学生都猜对了。但在出示悲伤、愤怒、恐惧这三种表情的图片时，学生会有各种各样的情绪解读。比如，在出示悲伤的表情图片时，有的学生回答是悲伤，也有的学生回答是发呆、严肃、镇定等。 </p> <p class="content"> 从以上课堂故事中可以推测，快乐是学生比较熟悉的面部表情，学生对表示快乐的面部表情的解读是一致的。但是学生对悲伤、愤怒、恐惧等面部表情的解读有一定的差异，这一方面可能是由于与这些消极情绪的面部表情相比，快乐的面部表情识别难度要低一些；另一方面可能与学生的生活经验有关。也就是说这些消极情绪在他们的公共生活领域中出现的频率可能比较低，或者说他们在日常生活中，没有将注意力集中在观察彼此的面部表情上，而是更多地关注自身内在 </p> </div> </div> </div> <div class="page-box" page="5"> <div v-if="showPageList.indexOf(5) > -1"> <div class="bodystyle"> <p>的感受和心理活动，因此他们对这类表情的识别能力相对低一些。</p> <p class="content"> 综上可知，行为有外在和内在两种不同的表现与维度，我们在观察的时候，要结合外在行为和内在心理活动等来综合理解被观察者及观察到的事实。 </p> <p class="poemtitle-l">（二）行为的特征</p> <p class="content"> 人类行为是复杂的，但是也有一些共性特征，正是这些共性特征让我们得以通过观察收集信息去推测和理解他者的行为。我们这里主要探讨可直接观察到的外在行为。一般来说，外在行为具有连续性、整合性、程序性的特征。 </p> <p class="content"><span class="bold">1．连续性</span></p> <p class="content"> 人类行为的连续性是指行为的发生是一个从起始到终止的连续过程。在这一过程中，外在行为与内在心理活动之间的连贯性使人的行为变得有迹可循，有时候，即使外在行为中断了，内在心理活动也不会因此中断或结束。因而，在观察某一种行为的过程中，只要将某个事件或某段时间作为样本来收集资料，就可以据此推测出整个过程的意义。例如，小明在手工区折了一架漂亮的纸飞机，他看着纸飞机满意地点点头，并拿给老师看。在这个例子中，小明折了漂亮的纸飞机、看着纸飞机满意地点点头以及拿给老师看这三个行为之间是具有内在连续性的。小明看着纸飞机满意地点点头是因为他觉得自己折了一架漂亮的纸飞机，而后他拿去给老师看，是因为他对自己折的纸飞机感到很满意。 </p> <p class="content"><span class="bold">2．整合性</span></p> <p class="content"> 整合性指的是人类行为产生时，人的面部表情和身体动作是高度整合的，人的面部表情和身体动作所表达的内在意义是一致的。如果人的面部表情和身体动作不能协调整合并表达出共同的意义，那么这极有可能是因为有心理问题才导致表现异常，或者是经过长期的严格训练才具备的表演技能。例如，当我们感到高兴、快乐的时候，我们会嘴角上扬，会不由自主地舒展四肢，手舞足蹈。当我们感到紧张、恐惧的时候，会露出惊恐的眼神，身体会不由自主地往回缩，甚至整个人缩成一团。这些都是人类行为的整合性特征。而“皮笑肉不笑”等行为则是人们在日常生活中表现出来的具有表演性质的行为。 </p> <p class="content"><span class="bold">3．程序性</span></p> <p class="content"> 程序性是指人类的行为会受到已有经验的影响。人的每一个行为的产生都不 </p> </div> </div> </div> <div class="page-box" page="6"> <div v-if="showPageList.indexOf(6) > -1"> <div class="bodystyle"> <p> 是无缘无故的，每一个行为的产生都可以从个体已有的经验中获得相应的解释。因此，当我们进行行为观察和解释时，如果能了解到被观察者的已有经验，我们就能更好地理解被观察者当下的行为表现。 </p> <p class="content"> 综上可知，人的行为具有连续性、整合性、程序性三个特点。我们在行为观察、分析与解释的时候，可以结合行为的这三个特点来理解。 </p> <p class="titleQuot-1">二、观察的含义、要素与分类</p> <p class="content"> 观察是我们认识、理解周围世界与环境的基本方法与途径。观察贯穿在我们的日常生活中，我们每天都在进行着各种有意识或无意识的观察。通过观察，我们可以认识和理解生活中的人际关系与社会行为规范，从而依据观察得出判断和结论来指导我们的具体行为。 </p> <p class="poemtitle-l">（一）观察的含义</p> <p class="content"> “观察”由“观”和“察”两个字组成，我们可以结合“观”和“察”两个字的含义来理解“观察”的含义。“观”的意思是看、察看，也包含对事物的看法和认识。在《说文解字》中：“观，谛视也”，“观”的意思是凝视、审视；“察，复审也”，“察”的意思是仔细看、调查研究。“观”和“察”两个字结合在一起，指的是仔细地看、调查研究，并形成对事物的看法和认识。也就是说，观察不仅仅是在一般层面上运用感觉器官观看的过程，在这个过程中还要求我们运用一定的方法来仔细地看、调查研究，同时通过调动大脑积极思维的参与，来形成对事物的看法和认识。有学者指出：“观察是人类认识周围世界的一个最基本的方法，也是从事科学研究的一个重要手段。观察不仅是人的感觉器官直接感知事物的过程，而且是大脑积极思维的过程。”由此可知，我们可以从以下几个层面来理解观察的含义：第一，观察是我们综合运用视觉、听觉、触觉等多种感觉器官来感知和认识事物的过程；第二，观察的过程蕴含着一定的科学方法，是我们运用相应的方法仔细地看、调查研究的过程；第三，观察包含着我们大脑加工的积极思维的过程，最终形成我们对事物的看法和认识。 </p> <p class="poemtitle-l">（二）观察的要素</p> <p class="content"> 一般来说，观察包含注意、对象与背景、主观参与、判断和结论这四个基本要素。只有具备这四个基本要素，才能被称为一个完整的观察过程。 </p> </div> </div> </div> <div class="page-box" page="7"> <div v-if="showPageList.indexOf(7) > -1"> <div class="bodystyle"> <p class="content"><span class="bold">1．注意</span></p> <p class="content"> 注意是我们的感官和思维选择的过程，即我们的感官和思维都集中在某一个经过选择的特定对象或事物上，以获取有关这一特定对象或事物的更多信息和资料。也就是说，当某一个对象或事物引起我们的注意时，观察也就随之开始了。 </p> <p class="content"><span class="bold">2．对象与背景</span></p> <p class="content"> 对象是相对于背景而言的，对象与背景存在于同一个时空之中，引起观察者注意的事物就是对象，与此同时，其他没有被观察者注意的事物则成为背景。 </p> <p class="content"><span class="bold">3．主观参与</span></p> <p class="content"> 主观参与是指观察者的个人经验、内在动机、情感、态度与价值观等主观因素对观察活动的影响。首先，每一个观察者在观察的过程中都不可避免地带有个人的主观因素。观察是一项特殊的活动，其特殊性在于观察者个人在一定意义上就是观察工具，并参与到观察活动的整个过程中。观察者不可能完全剥离个人经验、内在动机、情感、态度与价值观等主观因素而进行观察。其次，观察者个人的主观参与会影响整个观察过程。甚至可以说，观察者的主观参与伴随着整个观察活动的始终。在观察的初始阶段——注意，观察者的主观参与便开始对观察活动产生影响。由于不同观察者的个人经验、内在动机、情感等主观因素是不同的，因而，即使处于同一个情境之中，不同观察者的注意对象也会因人而异。例如，对于A观察者来说，在这一特定情境中引起其注意的观察对象，可能对于B观察者来说是习以为常的事物，甚至根本不会引起B观察者的注意。而且，由于不同观察者的主观参与不同，他们对同一个观察对象或事物的判断和结论也不尽相同。另外，观察者的主观参与会影响观察的客观性。如果观察者完全根据个人的主观参与来记录、描述所观察到的现象，并进行分析、解释，就有可能损害到观察的客观性，甚至会使我们的观察严重偏离事实。因而，观察者要始终保持清醒、谨慎，尽可能做到客观、翔实地记录观察到的事实，并且如实记录个人的感受、思考和判断等，避免主观因素可能对观察造成的影响。只有这样才有可能最大限度地保持观察者在观察活动中的客观性。 </p> <p class="content"><span class="bold">4．判断和结论</span></p> <p class="content"> 在观察过程中，观察者根据观察到的客观事实以及个人的主观参与，对观察对象及其行为进行解释或赋予意义的过程，就是判断。每一次观察都会形成相应的判断，有时候观察者的判断就是观察者形成的结论，有时候可能只是初步的想 </p> </div> </div> </div> <div class="page-box" page="8"> <div v-if="showPageList.indexOf(8) > -1"> <div class="bodystyle" style="padding: 10% 10%"> <p> 法，有待进一步的观察和验证，并形成最终的结论。值得注意的是，由于具备良好的观察条件，有的观察可以进行持续的验证，所形成的结论也是经过严谨、科学地论证的。而有的观察可能受到主、客观条件的限制，没有机会进行下一步的验证，所形成的结论就只能是未经论证的初步想法。 </p> <p class="content"> 下面，我们结合一个具体的观察案例来进一步认识观察的四个基本要素。 </p> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0018_01.jpg" alt="" /> </p> <p class="poemtitle-author-c">日常观察（观察者：李老师）</p> <p class="quotation"> 我搭乘电梯时刚好站在电梯按钮旁边，电梯上行到3楼时停下来，电梯门打开，走进来一名女士。这名女士把手伸过来，用手中的钥匙按电梯按钮。看到她是用钥匙按按钮，我觉得这名女士很注重个人卫生防护。她用钥匙按了按钮，按钮9的一圈红灯亮了起来。她又按了一个按钮，按钮11的一圈红灯亮了起来。这时她停了一下，又用钥匙长按了按钮9和按钮11进行消除，9和11这两个按钮的红灯熄灭了。我想这名女士还真是有点奇怪，她在上电梯之前没想好自己要去哪一层吗？还是没注意看？或者临时改变了主意？我的楼层到了，我出了电梯，后面的情况如何我就无从得知了。 </p> <p class="content"> 在案例1-1-1中，一名女士用钥匙按电梯按钮的行为引起了李老师的注意，她的注意停留在这位女士按电梯按钮的动作上。此时，这名女士成了她的观察对象，而电梯间里的其他人则成为观察的背景。她继续观察这名女士的行为，女士连续按两个按钮又进行消除的行为使李老师产生了疑惑，李老师由此初步形成了几个判断，这几个判断与她的主观经验有关，也体现了她在观察过程中的主观参与。但是因为没有与被观察者进一步交流，这些判断难以进行验证，只能形成一个初步的想法，或者说这个观察的结论是有待验证的想法。 </p> <p class="poemtitle-l">（三）日常观察与专业观察的区别</p> <p class="content"> 日常观察是相对于专业观察而言的。日常观察是观察者因个人兴趣而对生活中的现象进行随意的观察。一般来说，日常观察具有以下特征。第一，从观察缘起来说，日常观察常常是因观察者个人的兴趣、好奇心或经验而引发的，不是围绕一定的观察目的或研究主题而展开的。第二，从观察目的来看，大部分的日常观察没有预先设定的目的，缺乏计划性，在日常生活中随时可能发生，相对随意。有时候日常观察也有一定的目的性，如你刚到某地需要观察一下地形、位置等。 </p> </div> </div> </div> <div class="page-box" page="9"> <div v-if="showPageList.indexOf(9) > -1"> <div class="bodystyle"> <p> 第三，从观察过程来看，观察者本人就是观察工具，观察者一般不会特意采用观察工具和仪器作为辅助。同时，在观察过程中，观察者可能只注意到了事物、现象或行为的某些方面，观察到的事实可能只是偶发事件，不能代表被观察者的典型状况。第四，观察所形成的判断常常是观察者在观察过程中形成的初步判断，不一定准确，常常需要进一步的验证，如上述案例1-1-1。第五，观察者较少对观察过程及观察到的客观事实进行反思。例如，观察者较少去思考和探究观察过程是否科学、观察到的信息是否准确、做出的观察判断是否具有主观性等。 </p> <p class="content"> 专业观察是为了职业要求或科学研究而进行的观察，是有明确目的、计划安排、有一定控制和严格记录的观察。一般来说，专业观察具有以下特征。第一，从观察缘起来说，专业观察一般是由于职业要求或科学研究而展开的，围绕具体的研究主题所进行的观察。第二，从观察目的来看，专业观察事先有明确的观察目的，一般会提前制订观察计划，明确观察程序，并做好观察准备。第三，从观察过程来看，观察者会使用专业的观察方法、观察工具，甚至专业的观察仪器来收集和记录观察资料。在观察过程中，观察者会尽可能地关注与观察目的有关的所有行为和现象，尽可能地收集更全面、更具有代表性的资料。第四，观察者在收集资料后会经过科学、严谨地分析再形成判断和结论。首先在现有资料的基础上形成初步的判断和假设，其次经过下一轮的观察继续收集资料来验证假设，最后形成结论。第五，观察者常常对观察过程、观察资料和观察结论进行反思，形成“观察—判断与结论—反思—再观察”这样循环往复的过程，直至针对收集到的客观资料得出合理的、可验证的结论。 </p> <p class="content"> 总的来说，日常观察和专业观察在观察缘起、观察目的、观察过程、观察结论、观察反思等方面上存在区别，详见表1-1-1。 </p> <p class="imgtitle">表1-1-1 日常观察与专业观察的区别</p> <div class="bodyPic openImgBox"> <img src="../../images/Figure-0020-01.jpg" alt="" active="true" /> </div> </div> </div> </div> <div class="page-box" page="10"> <div v-if="showPageList.indexOf(10) > -1"> <div class="bodystyle"> <p class="titleQuot-1">三、婴幼儿行为观察的含义、特征与分类</p> <p class="poemtitle-l">（一）婴幼儿行为观察的含义</p> <p class="content"> 婴幼儿行为观察是指观察者依据一定的观察目的，采用专业的观察工具，有计划地进入自然情境中对婴幼儿特定的行为进行观察、记录和分析，从而获取相应的研究资料的方法。 </p> <p class="poemtitle-l">（二）婴幼儿行为观察的特征</p> <p class="content"> <span class="bold" >1．婴幼儿行为观察是一种有目的、有计划的观察</span > </p> <p class="content"> 首先，婴幼儿行为观察是观察者围绕一定的观察目的所展开的观察活动，而不是日常生活中的随意观察。观察者依据特定的观察目的来收集相应的资料，根据收集的资料进一步分析和理解婴幼儿的行为，进而为婴幼儿行为指导提供有针对性的建议。例如，幼儿园新转来一名有听力障碍的幼儿，为了了解这名幼儿的语言和听力的具体情况，幼儿园教师将围绕这个目的对其进行观察。 </p> <p class="content"> 其次，婴幼儿行为观察是有计划的观察，观察者在观察之前会对观察的步骤、途径、方式、工具等进行一定的设计，充分考虑观察什么，采用什么观察方法和观察工具，在哪里、什么时候观察，等等。这些都体现了观察的计划性。 </p> <p class="content"> <span class="bold" >2．婴幼儿行为观察会采用专业的观察工具和观察方法</span > </p> <p class="content"> 为了更加客观、全面地收集到相应的观察资料，在观察婴幼儿行为的过程中，观察者除了使用各种感官外，还利用观察记录表、观察仪器等专业的观察工具辅助观察。在科学研究中，研究工具与研究方法是相辅相成的，因此，在观察过程中，采用何种观察方法进行观察和记录也是非常重要的。一般来说，婴幼儿行为观察可以采用描述性观察方法、取样观察方法、评定观察方法，根据不同的观察目的、观察情境和资料分析方式所采用的观察方法有所不同，所以观察者在制订观察计划时，应充分考量采用何种观察方法或综合采用哪几种观察方法以更好地达到观察目的。 </p> <p class="content"> <span class="bold">3．婴幼儿行为观察是在自然情境下的观察</span> </p> <p class="content"> 婴幼儿的行为是在一定的情境下自然发生的，对婴幼儿行为的观察也应尽可能地在自然情境下进行，这样可以确保收集到关于婴幼儿行为的资料的客观性与真实性。一般来说，婴幼儿在自己熟悉的情境中，其行为是自然而然地发生的。但是，如果婴幼儿所在的环境中突然出现一位外来者、陌生人，这时的情境就会 </p> </div> </div> </div> <div class="page-box" page="11"> <div v-if="showPageList.indexOf(11) > -1"> <div class="bodystyle"> <p> 发生微妙的变化，婴幼儿的行为可能会受到相应的影响。例如，小班的幼儿正坐在椅子上听教师讲绘本故事，这时教室里走进来几位前来观摩学习的教师，幼儿的听讲行为可能会随之发生一定的变化，或许有的幼儿出于好奇心会时不时地转过头来看看这几位“陌生人”，也可能会一直盯着进来的几位“陌生人”看。那么，在这次绘本讲述的教学活动中，观察者所观察到的幼儿听讲行为与自然情境下的幼儿行为有一定的差别，并非幼儿在日常绘本讲述活动中的真实行为表现。因此，观察者在观察婴幼儿的行为时应充分考量自然情境对观察结果的影响，并应尽可能在自然情境下观察婴幼儿的行为并收集资料。 </p> <p class="poemtitle-l">（三）婴幼儿行为观察的类型</p> <p class="content"> 根据不同的划分依据，可以把婴幼儿行为观察划分为不同的类型（见表1-1-2）。 </p> <p class="poemtitle">表1-1-2 婴幼儿行为观察的类型</p> <div class="bodyPic openImgBox"> <img src="../../images/Figure-0022-01.jpg" alt="" active="true" /> </div> <p class="content"> <span class="bold">1．正式观察和非正式观察</span> </p> <p class="content"> 根据观察记录的结构性质和控制程度，可以把观察划分为正式观察和非正式观察。正式观察又称结构性观察，是基于观察目的，对观察的内容、程序、记录方法进行细致、严谨的设计，并严格依照预先设定的观察设计进行观察和收集资料，对观察资料进行科学分析并得到观察结果的方法。一般来说，事件取样、时间取样、行为检核、等级评定都属于正式观察的范畴。 </p> <p class="content"> 非正式观察又称非结构性观察，非正式观察没有预先设定的观察目的和观察计划，是观察者在无意中发现并进行的观察，这类观察比较灵活、机动，但是观察到的现象和收集的数据可能难以量化处理。一般来说，日记描述、轶事记录都属于非正式观察。案例1-1-2是一位学前教育专业大学生在幼儿园实训期间观察 </p> </div> </div> </div> <div class="page-box" page="12"> <div v-if="showPageList.indexOf(12) > -1"> <div class="bodystyle"> <p>和记录的轶事，是观察者在无意中发现并记录的事件。</p> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0022_01.jpg" alt="" /> </p> <p class="quotation">幼儿姓名：小范 性别：男 年龄：5岁</p> <p class="quotation">观察时间：2020年12月7日</p> <p class="quotation">观察地点：深圳市某幼儿园中班积木区</p> <p class="quotation">观察者：学前教育专业大学生 梁清清</p> <p class="quotation"> 在今天中午的区域活动时间，小范最开始选择在操作区玩游戏。他在操作区拿到一个类似子弹的东西，是实心的，有一定的重量。他将它拿到积木区与其他小朋友一起玩，并将它抛了起来，从一个小朋友身边滑过。配班老师看到了这一危险的行为，上前问他：“这是哪个区的材料，你现在拿着它在哪个区呢？”小范说：“这是操作区的材料，我拿过来的。”“材料是不可以从它本来的区域拿出来的，对吗？而且这个东西拿起来挺重的，你将它往上抛，差点就砸到别的小朋友的脑袋了。”小范不说话，看着老师。“答应老师以后不要把材料拿到别的区域好吗？还有，东西不能乱抛哦。”“嗯嗯，好。”“那我们拉钩吧。”小范微笑着伸出手来跟老师拉钩。“拉钩上吊，一百年不许变，谁变谁是小狗。”拉钩之后，老师对小范说：“好了，你去玩吧。” </p> <p class="content"> 这则观察记录是观察者在幼儿园实训时无意中发现的事件，观察者看到一名幼儿将一个类似子弹的实心物体向上抛，配班老师在看到之后与幼儿交流并及时制止。观察者认为教师的处理方式是恰当的，体现了以儿童为中心的教育理念，她认为这是值得关注的师幼互动，并进行了即时的观察和记录，她在观察前没有预先设计观察目的和观察计划，属于非正式观察。 </p> <p class="content"> <span class="bold">2．参与式观察和非参与式观察</span> </p> <p class="content"> 根据观察者是否参与观察对象的活动，可以把观察划分为参与式观察和非参与式观察。参与式观察是指观察者不同程度地参与到被观察者的群体或组织中，共同生活并参与日常活动，从内部观察并记录观察对象的行为表现与活动的过程。由于观察者融入被观察者的群体或组织中，以“局内人”或“参与者”的身份进行暗中观察，被观察者可能察觉不到自己正在被观察，因而被观察者的行为是在自然情境下发生的，被观察者的行为表现不会因观察者的到来及其观察活动 </p> </div> </div> </div> <div class="page-box" page="13"> <div v-if="showPageList.indexOf(13) > -1"> <div class="bodystyle" style="padding: 10% 12%"> <p> 而受到影响。由于观察者长期参与到被观察者的活动中，对被观察者的活动和内部文化会有更加深入的了解，观察者可以深入观察婴幼儿的行为，也可以更加深入、透彻地分析所观察到的现象。 </p> <p class="content"> 非参与式观察是观察者以“局外人”或“旁观者”的身份来实施观察活动，观察者没有进入或介入被观察者的活动中，也不干预被观察者活动的开展和进行。在非参与式观察中，观察者相对客观、冷静，但由于观察者没有深入被观察者群体或参与被观察者的活动中，观察可能仅停留在表面，难以获得深入的研究发现。另外，如果观察者是被观察者不熟悉的“局外人”，那么观察者出现在观察现场，在一定程度上会改变当时的活动情境，进而影响被观察者的行为表现。 </p> <p class="content"> 案例1-1-3是一位学前教育专业大学生在幼儿园实训期间做的观察记录，她参与到幼儿搭建积木桥的活动中，并对幼儿进行相应的引导。这则观察记录体现了她是如何以“参与者”的身份进行参与式观察的，见视频1-1-1。 </p> <div class="videoBox"> <div class="videoTitle"> <div class="iconBox" @click="playVideo(1)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.863" height="20.817" viewBox="0 0 19.863 13.817" > <g transform="translate(-40.961 -184.321)"> <path d="M4.647,1.4a1,1,0,0,1,1.707,0L10.07,7.479A1,1,0,0,1,9.217,9H1.783A1,1,0,0,1,.93,7.479Z" transform="translate(51.824 196.82) rotate(-90)" class="a" fill="#7acab4" ></path> <path d="M3322.914-15094.863h-10.363a2.593,2.593,0,0,1-2.59-2.59v-8.638a2.593,2.593,0,0,1,2.59-2.59h10.363a2.6,2.6,0,0,1,2.594,2.59v1.729c.013.027,0,3.6,0,5.141v1.769A2.6,2.6,0,0,1,3322.914-15094.863Zm-6.9-9.933a.862.862,0,0,0-.755.468.947.947,0,0,0-.114.455v4.2a.9.9,0,0,0,.868.922.848.848,0,0,0,.432-.121l3.45-2.12a.956.956,0,0,0,.315-1.259.874.874,0,0,0-.322-.341l-3.451-2.086A.813.813,0,0,0,3316.01-15104.8Z" transform="translate(-3269 15293.001)" class="b" fill="#7acab4" ></path> </g> </svg> <span>视频</span> </div> <div class="title">视频 1-1-1 参与式观察幼儿搭建积木桥</div> </div> <div class="videoItem" v-if="chapter001.isshowVideo1"> <video :src="videoPathOne" controls></video> </div> </div> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0023_02.jpg" alt="" /> </p> <p class="quotation">观察对象：小金（男）、小健（男）</p> <p class="quotation">观察日期：2020年12月11日上午9:00区域活动时间</p> <p class="quotation">观察地点：深圳市某幼儿园中一班</p> <p class="quotation">观察者：学前教育专业大学生 廖金秋</p> <p class="quotation"> 这是两个小朋友在操作区一起搭积木墙的观察记录。刚开始的时候，小金一个人在搭建积木墙，他把积木按照顺序一个个地搭起来，他先把积木镶嵌在墙两边柱子的格子里再搭中间的积木。小健也想要加入这个游戏，我建议小金将搭积木墙的模型放到两个人的中间一起合作。在两个人合作的时候，小金只搭了一会儿，就拿起一旁配套的角色玩具玩起来，他和小健说游戏的规则：“如果这个不倒翁放在搭好的墙上，掉不下来，我们就赢了，掉下来，我们就输了。”在小金说规则的时候，小健一直在搭墙，这个时候我询问他们这个游戏怎么玩，他说：“将这个墙搭好，然后将不倒翁放上去，接着用小铲子将积木一个个地铲掉。”我接着说：“那你们俩搭好后，演示给我看看是怎样将这个墙一个个地铲掉的？”一开始，小金用一只手拿着不倒翁，用另一只手拿着积木和小健一起搭墙，后来他就放下了手中的 </p> </div> </div> </div> <div class="page-box" page="14"> <div v-if="showPageList.indexOf(14) > -1"> <div class="bodystyle" style="padding: 10% 12%"> <p> 不倒翁，认真参与搭墙的游戏。过了一会儿，两位小朋友用完所有的积木块，他们的墙也就搭好了。 </p> <p class="content"> 在案例1-1-3中，观察者是在幼儿园参加实训的学前教育专业大学生，她作为幼儿园的教师直接参与到幼儿的活动中，观察者也适时地与幼儿互动并引导幼儿参与游戏，可知观察者是在与幼儿共同活动时所进行的观察，属于参与式观察。而案例1-1-2是一项非参与式观察，观察者以旁观者的身份来记录幼儿行为及师幼互动情况，在整个观察过程中观察者都没有介入到她自己所记录的活动当中。 </p> <p class="content"><span class="bold">3．个别观察与群体观察</span></p> <p class="content"> 个别观察与群体观察是根据观察对象的数量来划分的一种观察类型。个别观察是针对某一个特定的幼儿实施观察的一种方法。观察者可以针对特定个体或特殊个体（如孤独症幼儿、注意缺陷多动障碍幼儿、天才幼儿等）采用个别观察的方法。群体观察是指研究者针对某一个群体所实施的观察，并记录在这一群体中发生的各种活动和行为。案例1-1-4与案例1-1-5分别是个别观察和群体观察的案例。 </p> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0024_01.jpg" alt="" /> </p> <p class="poemtitle-author-c">个别观察</p> <p class="quotation">观察对象：小凯 性别：男 年龄：3岁半</p> <p class="quotation">观察时间：2020年12月8日下午</p> <p class="quotation">观察者：学前教育专业大学生 杨舒彤</p> <p class="quotation"> 今天我第一次见到小凯小朋友，昨天他请假了，今天才来幼儿园。下午户外活动结束后，老师组织幼儿喝水。其他小朋友在喝完水后排队领下午茶，小凯还在喝水。因为他平时不愿意喝水，老师叫他要先喝完水，之后才能吃下午茶。3分钟过去了，他终于把水喝完，他拿了面包和燕麦牛奶，慢慢地走到自己的位置上。他先吃面包，一口一口地吃，动作很慢。其他小朋友都吃完了，他嘴里还在嚼着面包。快到离园时间了，老师开始播放音乐视频，小凯一边嚼着面包一边看视频。我走过去问他：“你要不要喝燕麦牛奶？”他没有看我，也没有说话，只是用勺子搅拌着燕麦牛奶，舀起一勺后又倒掉，一直重复着这个动作。因为燕麦牛奶快凉了，我就舀起一勺去喂他，他直接把头转到另一边。保育老师在收拾桌子，问他：“你还要 </p> </div> </div> </div> <div class="page-box" page="15"> <div v-if="showPageList.indexOf(15) > -1"> <div class="bodystyle"> <p>不要喝？”他还是没有回答。最后老师只能把燕麦牛奶倒掉了。</p> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0025_01.jpg" alt="" /> </p> <p class="poemtitle-author-c">群体观察</p> <p class="quotation">观察对象：深圳市某幼儿园中三班全体幼儿</p> <p class="quotation">观察时间：2020年12月14日</p> <p class="quotation">观察地点：幼儿园教室内的木工区</p> <p class="quotation">观察者：学前教育专业大学生 赖佳琪</p> <p class="quotation"> 今天中三班的小组活动课是制作雨水收集器。在活动前，老师问小朋友们：“可以用什么来制作雨水收集器呢？”小朋友们都说了自己的想法：“矿泉水瓶、竹筒、水管……”老师根据幼儿园里已有的材料选择了矿泉水瓶和塑料水管。 </p> <p class="quotation"> 制作雨水收集器的第一步是将矿泉水瓶钻孔。老师先在矿泉水瓶上画好预留的位置，然后拿电钻来钻。小朋友们围在旁边瞪大眼睛看老师是如何操作的。有的小朋友大声地喊道：“老师，这个好像龙卷风的样子，特别快。”老师边钻边回答：“对呀，这个电钻充满了电，所以威力特别大。我们都要小心一点才好。”小朋友们听到老师的话后都后退了两步，说：“对，我们要离远一点，电钻很危险。” </p> <p class="quotation"> 老师用电钻把每一个矿泉水瓶都钻出了孔，教小朋友们怎样把它和塑料水管串起来。老师用一只手拿起一根塑料水管，用另一只手举起一个矿泉水瓶：“我们试一下把塑料水管穿进孔里，这样我们就可以做成一个雨水收集器。”小朋友们一起看老师是怎样做的，并模仿老师的动作。 </p> <p class="quotation"> 老师把小朋友们分成了两组，他们分别拿矿泉水瓶和塑料水管两种材料。每两个小朋友结成一对，先把塑料水管和矿泉水瓶连接起来，再用绳子一个接着一个地把矿泉水瓶穿起来，雨水收集器就做成功啦！小朋友们都跑到了宝藏区，试着把雨水收集器放到合适的位置。 </p> <p class="quotation"> 一个小朋友跳着说：“这个收集器好像一辆火车，特别特别长。”其他的小朋友说：“我觉得这像一条蛇”“我觉得像蚯蚓”……每个小朋友都说着他们自己认为的雨水收集器像什么样子，并且把他们想象中的雨水收集器画到了纸上。做完雨水收集器后，小朋友们将使用过的材料都搬回到木工区。 </p> <p class="content"> 阅读上述两个案例可知：案例1-1-4是观察者针对一个特定的幼儿展开的观察记录，属于个别观察；案例1-1-5是观察者针对某班多名幼儿的观察记录，属于群体观察。 </p> </div> </div> </div> <div class="page-box" page="16"> <div v-if="showPageList.indexOf(16) > -1"> <div class="bodystyle" style="padding: 10% 12%"> <p class="content"> <span class="bold">4．描述性观察、取样观察与评定观察</span> </p> <p class="content"> 观察可分为描述性观察、取样观察与评定观察。描述性观察是指在观察过程中采用文字描述为主的方式记录所观察到的婴幼儿行为与现象的一种观察方法。常见的描述性观察主要包括日记描述法和轶事记录法两种类型。 </p> <p class="content"> 取样观察是指依据一定的行为标准选取被观察对象的某些行为表现实施观察记录，或选取特定的时间段进行婴幼儿行为观察记录的一种观察方法。常见的取样观察主要包括事件取样和时间取样两种类型。 </p> <p class="content"> 评定观察是观察者基于对婴幼儿的观察与了解，对其行为做出评定的一种观察方法。常见的评定观察主要包括行为检核法和等级评定法两种。 </p> <p class="content">本书的第二章至第四章将重点介绍这三种观察方法。</p> <p class="content"><span class="bold">5．自然观察和实验观察</span></p> <p class="content"> 根据观察数据是在自然条件下取得的，还是在人为干预和控制条件下取得的，可将观察分为自然观察和实验观察。自然观察是观察婴幼儿在自然状况下表现出来的行为，观察者不应以自身的活动影响被观察者的行为。自然观察的优点在于能研究在自然情境中实际发生的行为。不足之处有以下两点：一是观察者可能存在影响观察对象的行为；二是在观察期间，那些不经常发生的行为或不被社会赞许的行为不一定出现。实验观察是指观察者设置实验情境来进行婴幼儿行为观察。实验观察通常会在专用观察室中进行。专用观察室，即婴幼儿行为观察实验室，一般用单向玻璃分隔为两个空间，较大的一间为游戏室/实验室，摆放玩具设施或设置实验情境，提供婴幼儿活动空间。游戏室/实验室一般会以柔和的颜色装饰，地板上一般铺有地毯或者游戏垫，会放置矮柜陈列各种玩具或实验设备（如沙盘或感统训练教具等）以供婴幼儿活动使用。空间较小的、狭长的一间为观察室，通常配备有电脑和用来观察记录的电子设备。观察者在观察室中可以通过单向玻璃直接观察婴幼儿的行为。为方便、全面地观察和记录婴幼儿的行为，一般在实验室内天花板等角落安装有摄像、录音装置。不同角落的摄像装置可以从不同角度记录婴幼儿的行为表现。观察者可以通过观察室中电脑上相关的程序软件，多角度观察和记录婴幼儿的表现，也可以下载婴幼儿行为的观察视频。观察室提供了一个标准化的环境，使婴幼儿有机会表现出目标行为；实验观察是用来观察不经常出现的行为和不被社会赞许的行为的良好方法，如利益分配研究、测谎研究等。实验观察的不足之处在于其不能捕捉到婴幼儿在自然情境中的行为。值得注意的是，在专用观察室 </p> </div> </div> </div> <div class="page-box" page="17"> <div v-if="showPageList.indexOf(17) > -1"> <div class="bodystyle"> <p> 中进行的观察不一定就是实验观察，为了避免观察者在现场观察中对婴幼儿的活动造成干扰，也可以利用观察室进行自然观察，不在观察室中设定特定的实验情境，而是让幼儿在观察室中表现出自然行为，如游戏行为、同伴互动行为、师幼互动行为等。 </p> <p class="content"> <span class="bold">6．单次即时观察和多次连续观察</span> </p> <p class="content"> 根据观察持续时间的不同，可以把观察分为单次即时观察和多次连续观察。单次即时观察是指观察者在较短的时间内对婴幼儿行为进行一次性观察。单次即时观察可以使观察者在较短时间内收集与婴幼儿行为相关的资料，但是所获得的观察资料通常是比较片面的、浅显的。多次连续观察是观察者在较长时间内对婴幼儿行为进行持续观察。例如，日记描述法是在一段较长的时间内连续对同一个体或婴幼儿群体实施的追踪观察与记录，观察者可以获得关于婴幼儿行为的较为全面、深入的信息。 </p> <!-- <h2 class="secondsubHead-2">第二节</h2> --> <h2 class="secondTitle-2">第二节 婴幼儿行为观察的意义与价值</h2> <p class="content"> 婴幼儿行为观察是对婴幼儿的特定行为进行专业观察。基于观察，我们能够进一步分析和理解婴幼儿的行为，以期进行有针对性的教育指导。因此，婴幼儿行为观察对于增进对婴幼儿的理解、提升幼儿园课程与教育的质量、促进幼儿园教师的专业发展都具有重要的意义。 </p> <p class="titleQuot-1">一、增进对婴幼儿的理解</p> <p class="content"> “人类的大脑毕竟是神秘的，而且在很大程度上可能会永远如此……我们如何确定另一个人脑袋里是什么样呢？有很多人的说法使人觉得好像我们可以像列举手提箱中的物品一样，很容易、很精确、很彻底地测量并列举出其他人脑袋里的东西。”实际上，一个人要想理解另一个人的想法和行为，是非常困难的，没有人能够完全真正地理解另一个人。同样地，要理解婴幼儿的想法与行为也是非常复杂和困难的。特别是，婴幼儿的动作能力、语言能力、认知能力等方面处于从不成熟到不断成熟的阶段，他们的行为容易受到其所处环境及个人情绪等多方 </p> </div> </div> </div> <div class="page-box" page="18"> <div v-if="showPageList.indexOf(18) > -1"> <div class="bodystyle"> <p> 面的影响，由此他们表现出的行为更不易被成人所理解。婴幼儿行为观察是对特定的婴幼儿行为展开科学、专业的观察，基于专业观察所获得的资料，有助于分析和解释婴幼儿的行为，从而增进对婴幼儿行为的理解。 </p> <p class="poemtitle-l">（一）理解婴幼儿的行为</p> <p class="content"> 对婴幼儿的行为进行观察是了解和理解婴幼儿行为的最直接、最有效的方式。通过对婴幼儿行为的观察，以及客观、详细地记录他们外在的行为表现，可以帮助我们结合婴幼儿的个性特点和行为模式，推测婴幼儿行为背后的内在动机、愿望、情绪等内在意义，以增进我们对婴幼儿行为的理解。 </p> <p class="titleQuot-1"> <img class="g-pic" src="../../images/0028_01.jpg" alt="" /> </p> <p class="quotation"> 两个2岁的男孩一起在地板上玩，他们把玩具小轿车和小卡车推来推去，玩得很开心。过了一会儿，其中的一个男孩拿起一个相当重的金属卡车，看着另一个男孩，脸上露出思索的表情……过了一会儿，这个看上去很平静的小男孩，用卡车打了另一个男孩的头。被打的那个男孩惊诧地抬起头来，因为疼痛和惊慌而突然哭叫起来。第一个小男孩不解地看着他，越来越难过（尽管他的父亲出于某种原因并没有采取行动惩罚他或者责备他）。被打的男孩的大叫和眼泪看起来超过了他预期的结果。他自己没有哭，但很显然被吓着了，而且很不开心。 </p> <p class="right-info" style="margin-left: 180px"> ——参见约翰·霍特：《孩子是如何学习的》，15～16页，张雪兰译，北京，北京联合出版公司，2016。 </p> <p class="content"> 在这则故事中，我们可能很难理解为什么在一起平静地玩耍的两个小男孩，其中一个男孩会突然拿起卡车打另一个男孩的头。而且这个打人的2岁男孩由于语言表达能力有限，可能难以向大人解释清楚自己为什么会突然打人。也许有人会将这个小男孩的行为定义为攻击性行为，认为他具有攻击性倾向。然而，约翰·霍特根据对两个小男孩的观察认为，男孩的这种行为也许可能是带有“试验性质”的，也许是一种想看看会发生什么事的无法抑制的冲动。他的这种解释帮助我们在某种意义上更好地理解了这个打人的小男孩的行为。不过，对于这个小男孩当时究竟是怎么想的、我们如何理解他的行为，约翰·霍特只是提供了帮助我 </p> </div> </div> </div> <div class="page-box" page="19"> <div v-if="showPageList.indexOf(19) > -1"> <div class="bodystyle"> <p> 们理解小男孩的行为的其中一种解释，真相究竟为何，我们已无从得知了。 </p> <p class="content"> 由于婴幼儿行为本身的复杂性以及他们的语言能力有限等限制，成人难以通过与婴幼儿直接沟通的方式来理解他们的行为及其背后的动机、意图。卢梭曾说：“儿童有他特有的看法、见解和感情，如果用成人的看法、见解和感情去代替它们，那简直愚不可及。”因此，对婴幼儿行为的理解不能仅凭成人的主观看法和判断，必须建立在对婴幼儿行为客观的、长期的观察基础之上。对婴幼儿行为进行观察可以收集更多与婴幼儿外在行为相关的信息、线索，从而推测、判断、分析和理解婴幼儿的行为。 </p> <p class="poemtitle-l">（二）理解婴幼儿的兴趣、需要</p> <p class="content"> 婴幼儿的兴趣和需要在很多时候会直接表现在其行为上，他们对什么东西感兴趣，往往投入更多的时间和精力，因此，通过对婴幼儿行为的观察，我们可以较好地了解婴幼儿的兴趣和需要。 </p> <p class="content"> 例如，婴幼儿在哪个区域中停留和玩耍的时间更多，证明他们对这个区域的材料比较感兴趣。教师可以通过观察和记录不同婴幼儿在不同区域停留及玩耍的时间、次数，从而了解婴幼儿对不同区域材料的兴趣，为更新及替换婴幼儿不感兴趣的材料提供参考，更好地发挥区域材料促进婴幼儿发展的作用。 </p> <p class="content"> 当然，教师可以在每天的区域活动中都做这样的观察记录，收集更多关于不同婴幼儿在不同区域选择的材料，通过具体的量化处理和数据分析，总结出不同婴幼儿对不同区域材料及对应活动的兴趣。表1-2-1是一名学前教育专业大学生根据深圳市某幼儿园中班22名幼儿3天的区域选择情况做的区角活动检核表。 </p> <p class="content"> 对中班22名幼儿3天的区域活动的观察记录数据进行量化统计可知，在这3天中，幼儿选择最多的区域是美工区和串珠区，分别达到10人次和8人次，说明很多幼儿对这两个区域感兴趣。选择语言区和情绪角的幼儿较少，都只有2人次，说明在这3天中，较少幼儿对这两个区域感兴趣。另外，从这个观察记录中，我们还可以了解到幼儿的兴趣变化，小乐等11位幼儿3天选择的都是不同的区域，小瑛等8位幼儿有2天选择的是同一个区域（见表1-2-1）。 </p> </div> </div> </div> <div class="page-box" page="20"> <div v-if="showPageList.indexOf(20) > -1"> <div class="bodystyle"> <p class="imgtitle">表1-2-1 中班幼儿区角活动检核表</p> <p class="content"> 观察地点：深圳市某幼儿园 观察日期：2020年12月22—24日 观察者：廖金秋 </p> <div class="qrbodyPic openImgBox"> <img src="../../images/Figure-0031-01.jpg" alt="" active="true" /> <p class="imgdescript-l"> （注：12月22日记录“√”；12月23日记录“〇”；12月24日记录“∆”） </p> </div> </div> </div> </div> <div class="page-box" page="21"> <div v-if="showPageList.indexOf(21) > -1"> <div class="bodystyle"> <p class="poemtitle-l">（三）了解婴幼儿的学习方式与特点</p> <p class="content"> 婴幼儿的学习方式存在个体差异性，不同婴幼儿有不同的学习方式与学习特点。有些婴幼儿倾向于通过视觉的方式来学习，有些婴幼儿倾向于采用听觉或触觉的方式来学习。如果能对特定婴幼儿的学习行为进行长期跟踪观察与记录，就能更好地了解他们的学习方式与学习特点，从而采取更符合婴幼儿学习特点的教育指导策略，更好地促进婴幼儿的学习与发展。 </p> <p class="titleQuot-1"> <img class="g-pic" src="../../images/0028_01.jpg" alt="" /> </p> <p class="quotation"> 今天早晨，莉萨弯腰去捡一个气球，就在这时，一阵风吹过来，把气球吹到了地板的另一边。莉萨看着气球飘了过去。当气球停下来后，她走到气球旁边，向它吹了口气，好像想让气球跑得更远一些。这让我大为惊奇。这么小的孩子能把风吹动物体的能力和他们自己吹动物体的能力联系起来吗？很显然，他们能。 </p> <p class="right-info" style="margin-left: 240px"> ——参见约翰·霍特：《孩子是如何学习的》，4页，张雪兰译，北京，北京联合出版公司，2016。 </p> <p class="content"> 在这则故事中，莉萨（28个月）吹动气球的行为其实就是她学习的过程，她通过观察发现风可以吹动气球，然后尝试自己吹动气球。在这个过程中，她在探索自己吹动气球的能力，同时将自己吹动气球的能力与风吹动气球的能力进行了联系和比较。所以，在观察婴幼儿行为的过程中，成人可以进一步分析和理解婴幼儿的学习方式与学习特点，为婴幼儿的教育与指导提供更有针对性的建议。 </p> <p class="poemtitle-l">（四）了解婴幼儿的发展水平</p> <p class="content"> 心理学、教育学等学科的研究成果为人们了解和理解婴幼儿的发展提供了许多理论视角与数据资料，帮助人们更科学、全面地了解婴幼儿在不同年龄阶段的身心发展水平。然而，有关婴幼儿发展的研究并不是“一把尺子”，也不可能被视为“尺子”来衡量所有婴幼儿的发展。要真正了解婴幼儿的发展水平，还需要结合具体情境对他们的行为进行观察，分析、解释，只有这样才能更合理地了解他们当下的发展水平。 </p> <p class="content"> 例如，幼儿园教师想了解4～5岁幼儿数学能力的发展，可以设计幼儿数学能力检核表，通过评定、观察来了解和分析幼儿数学能力的发展。表1-2-2是一名学前教育专业大学生对一个4岁幼儿的数学能力的观察记录。 </p> </div> </div> </div> <div class="page-box" page="22"> <div v-if="showPageList.indexOf(22) > -1"> <div class="bodystyle"> <p class="imgtitle">表1-2-2 4岁幼儿数学能力检核表</p> <div class="bodyPic"> <img src="../../images/Figure-0033-01.jpg" alt="" active="true" /> </div> <p class="content"> 由上述观察记录表及检核表可知，幼儿园教师可以通过运用评定观察法对幼儿的数学能力进行观察、记录和分析，了解特定幼儿在某项具体的数学能力方面的发展水平。 </p> <p class="content"> 当然，教师还可以运用多种观察方法来了解幼儿在不同方面的具体发展水平。总的来说，婴幼儿行为观察为我们了解婴幼儿的发展水平提供了科学、有效的方法。 </p> <div class="videoBox"> <div class="videoTitle"> <div class="iconBox" @click="playVideo(2)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.863" height="20.817" viewBox="0 0 19.863 13.817" > <g transform="translate(-40.961 -184.321)"> <path d="M4.647,1.4a1,1,0,0,1,1.707,0L10.07,7.479A1,1,0,0,1,9.217,9H1.783A1,1,0,0,1,.93,7.479Z" transform="translate(51.824 196.82) rotate(-90)" class="a" fill="#7acab4" ></path> <path d="M3322.914-15094.863h-10.363a2.593,2.593,0,0,1-2.59-2.59v-8.638a2.593,2.593,0,0,1,2.59-2.59h10.363a2.6,2.6,0,0,1,2.594,2.59v1.729c.013.027,0,3.6,0,5.141v1.769A2.6,2.6,0,0,1,3322.914-15094.863Zm-6.9-9.933a.862.862,0,0,0-.755.468.947.947,0,0,0-.114.455v4.2a.9.9,0,0,0,.868.922.848.848,0,0,0,.432-.121l3.45-2.12a.956.956,0,0,0,.315-1.259.874.874,0,0,0-.322-.341l-3.451-2.086A.813.813,0,0,0,3316.01-15104.8Z" transform="translate(-3269 15293.001)" class="b" fill="#7acab4" ></path> </g> </svg> <span>视频</span> </div> <div class="title">视频1-2-1 对4岁幼儿的数学能力的观察</div> </div> <div class="videoItem" v-if="chapter001.isshowVideo2"> <video :src="videoPathTwo" controls></video> </div> </div> <p class="titleQuot-1">二、提升幼儿园课程与教育的质量</p> <p class="content"> 幼儿园课程是指在幼儿一日生活活动中，帮助幼儿获得有益的学习经验，促进其身心全面、和谐发展的各种活动的总和。幼儿园课程目标的制订、课程内容 </p> </div> </div> </div> <div class="page-box" page="23"> <div v-if="showPageList.indexOf(23) > -1"> <div class="bodystyle"> <p> 的选择与组织、课程的实施、课程的评价等不同阶段，都需要将关于幼儿身心发展的实际观察结果作为重要参考依据，这样才能更好地提升幼儿园课程的质量。总的来说，与幼儿实际需要和兴趣相适宜的课程可以有效地促进其身心发展。 </p> <p class="poemtitle-l"> （一）为幼儿园课程目标的制订、课程内容的选择与组织提供依据 </p> <p class="content"> 幼儿园课程的基本职能是促进幼儿身心全面、和谐发展，因而幼儿园在制订课程目标、选择和组织课程内容时必须关注幼儿目前的发展状况，关注幼儿的发展需要与兴趣、认知与情感、社会化过程及个性形成等方面的规律与特点，从而确定什么目标和内容是与幼儿发展相适宜的，什么目标和内容是不适宜的。这些目标和内容的确定，都可以在实际的幼儿园活动中通过观察幼儿的身体动作、认知、情感及社会性等各个方面的表现收集数据资料来进行分析、整理、归纳、总结。因此，对幼儿进行观察与分析，可以为幼儿园课程目标的制订、课程内容的选择与组织提供科学依据，更好地提升幼儿园课程与教育的质量。 </p> <p class="content"> 例如，案例1-2-1，教师在“寒露到，蔬果熟”节气主题活动开展之际，为了更好地观察、了解幼儿的已有经验，支持幼儿进一步探索，特意设置“节气桌”的小组活动，并进行观察，来了解幼儿的发展水平、情绪状态、对蔬果探索活动的兴趣、已有经验等，并分析其需要关注、支持之处，以合理制定教学活动的目标，见视频1-2-2。 </p> <div class="pdfBox"> <div class="iconBox">案例</div> <div class="title" @click="toUrl(1)"> {{ chapter001.pdfMd5[1].name }} </div> </div> <div class="videoBox"> <div class="videoTitle"> <div class="iconBox" @click="playVideo(3)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.863" height="20.817" viewBox="0 0 19.863 13.817" > <g transform="translate(-40.961 -184.321)"> <path d="M4.647,1.4a1,1,0,0,1,1.707,0L10.07,7.479A1,1,0,0,1,9.217,9H1.783A1,1,0,0,1,.93,7.479Z" transform="translate(51.824 196.82) rotate(-90)" class="a" fill="#7acab4" ></path> <path d="M3322.914-15094.863h-10.363a2.593,2.593,0,0,1-2.59-2.59v-8.638a2.593,2.593,0,0,1,2.59-2.59h10.363a2.6,2.6,0,0,1,2.594,2.59v1.729c.013.027,0,3.6,0,5.141v1.769A2.6,2.6,0,0,1,3322.914-15094.863Zm-6.9-9.933a.862.862,0,0,0-.755.468.947.947,0,0,0-.114.455v4.2a.9.9,0,0,0,.868.922.848.848,0,0,0,.432-.121l3.45-2.12a.956.956,0,0,0,.315-1.259.874.874,0,0,0-.322-.341l-3.451-2.086A.813.813,0,0,0,3316.01-15104.8Z" transform="translate(-3269 15293.001)" class="b" fill="#7acab4" ></path> </g> </svg> <span>视频</span> </div> <div class="title">视频1-2-2 “寒露到，蔬果熟”主题活动观察</div> </div> <div class="videoItem" v-if="chapter001.isshowVideo3"> <video :src="videoPathThree" controls></video> </div> </div> <p class="poemtitle-l">（二）为幼儿园课程实施创造条件</p> <p class="content"> 幼儿园课程实施是幼儿园教师根据课程目标、课程计划实施教育教学活动的过程。目前幼儿园课程实施多提倡课程创生取向，强调教师是课程的开发者。课程创生取向将课程看作教师与学生联合创造的教育经验，课程实施是在具体教育情境中创生新的教育经验的过程。课程创生取向要求教师根据具体教育情境中幼儿的表现、兴趣与需要及时对课程进行调整，结合幼儿的兴趣与需要来实施和开展课程，以使课程与幼儿的发展相适宜，更好地促进幼儿的身心全面、和谐发展。幼儿园教师在课程实施中全方位地对幼儿的行为与表现进行观察、分析，可 </p> </div> </div> </div> <div class="page-box" page="24"> <div v-if="showPageList.indexOf(24) > -1"> <div class="bodystyle"> <p> 以很好地判断和了解幼儿的兴趣与需要，了解课程的设计与实施是否恰当，并以此来调整课程的实施与开展。综上可知，对幼儿进行观察与分析，可以为幼儿园教师实施和开展课程创造更好的条件。 </p> <p class="poemtitle-l">（三）为幼儿园课程的评价奠定基础</p> <p class="content"> 幼儿园课程评价是评价者根据幼儿园课程的构成要素，收集、分析相关信息，对幼儿园课程的价值、适宜性、效益做出判断的过程。幼儿园课程评价的根本目的是通过对课程进行诊断，了解课程的适宜性、有效性，为进一步修正、调整和完善课程提供科学依据，从而提高课程与教育的质量，更好地促进幼儿的身心发展。幼儿园教师在课程的准备阶段、实施阶段和结束阶段等不同环节对幼儿的行为表现与参与情况进行细致、全面的观察，收集幼儿的课程参与情况以及师幼互动、幼幼互动等情况，有助于教师了解课程的适宜性和有效性，为教师进行课程评价提供充足的数据资料和依据。因此，幼儿园教师对幼儿的观察可以为课程评价提供科学依据。 </p> <p class="titleQuot-1">三、促进幼儿园教师的专业发展</p> <p class="content"> 幼儿行为观察不仅有助于教师和家长了解幼儿的行为表现与身心发展水平，为幼儿园课程与教育活动的开展提供科学依据，而且是促进幼儿园教师专业发展的重要途径。一方面，幼儿园教师可以更好地了解幼儿的行为表现与课程参与情况，不断结合观察来反思自己的教育教学实践，改进保教工作，提升个人的保教技能和专业素养；另一方面，幼儿园教师可以将教学与研究相结合，针对个人在教学中发现的幼儿行为与发展问题进行持续的追踪观察，从而收集、整理和分析资料，撰写研究论文和研究报告，提升个人的教学与科研能力，促进个人的专业发展。 </p> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0034_01.jpg" alt="" /> </p> <p class="poemtitle-author-c">娃娃家活动</p> <p class="quotation">观察对象：深圳市某幼儿园小班幼儿</p> <p class="quotation">观察时间：2020年12月9日</p> <p class="quotation">观察地点：幼儿园教室内</p> <p class="quotation">观察者：学前教育专业大学生 杨舒彤</p> </div> </div> </div> <div class="page-box" page="25"> <div v-if="showPageList.indexOf(25) > -1"> <div class="bodystyle"> <p class="quotation"> 在今天早上的区域活动中，有4名小朋友去了娃娃家，主班马老师让我也进入娃娃家区域与他们进行平行游戏。一开始，第一个小朋友在扫地，第二个在做烤串，第三个在包饺子，还有一个在做饭。马老师让我引导他们到桌子旁游戏，我试探性地问了每个小朋友他们都在干什么，他们都回答了我。我坐到小凳子上，说：“我好饿啊，有没有什么好吃的呀？”这时一个小男孩拿出了面条，我顺势说：“要不我们来开一家餐厅吧，你们想当什么？”在做饭的小男孩过来了，说想当厨师，还找了一本菜单递给我，其他三个小朋友扮演服务员，而我扮演顾客。在游戏过程中，只有扮演厨师的小朋友比较清楚自己的角色，其他小朋友都在玩他们自己想玩的，没有真正投入“餐厅”这个游戏中。区域游戏时间快结束了，我叫他们收拾玩具，有个小男孩把所有玩具都扔进了洗碗池下面的柜子里，我尝试阻止，但他还是把所有玩具都扔进去了，扔完之后就离开了。 </p> <p class="quotation"> 观察分析：通过这次游戏，我发现小班幼儿的规则意识较弱。虽然在游戏过程中我尝试进行引导，但效果不佳，这可能是因为我的引导能力还有待提高，没有一个较合适的引导方法，所以幼儿不能理解我的意思。 </p> <p class="quotation"> 观察反思：教师应在平常的活动中有意识地培养幼儿的规则意识，用读绘本、晨谈、看视频等方式会较直观些，幼儿也容易理解与接受。 </p> <p class="quotation"> 观察建议：一日生活皆教育，教师在一天的活动中要逐渐培养幼儿的规则意识，幼儿在家里也要多锻炼。只有这样才有助于提升幼儿的规则意识。 </p> <p class="content"> 从案例1-2-2中可以看到，在幼儿园实训的学前教育专业大学生杨舒彤在小班幼儿区域活动（娃娃家游戏）中的参与和教育指导情况，她接受主班马老师的建议，通过与幼儿交谈来引导幼儿投入“餐厅”游戏中，并观察扮演不同角色的幼儿在游戏中的行为表现。在收拾玩具阶段，她尝试阻止不按规则收拾玩具的幼儿，但没有成功。她在分析、反思与建议环节中，围绕幼儿的规则意识这一主题重点进行分析、反思，并提供建议。由此可知，实习老师在保教活动中通过对幼儿的行为表现进行观察，来全面了解幼儿。与此同时，她也反思了自身的引导方法，基于观察的反思可以极大地促进其自身的专业发展。另外，她还可以针对自己在保教工作中发现的幼儿的行为问题，进行持续的追踪观察，更深入地了解幼儿的行为表现，反思并采取相应的教育指导策略，随后继续观察教育指导策略实施的效果。这样不仅能循序渐进地改善幼儿的行为习惯，促进幼儿的发展，而且有助于提升自身的教育教学技能，促进自己的专业发展。 </p> </div> </div> </div> <div class="page-box" page="26"> <div v-if="showPageList.indexOf(26) > -1"> <div class="bodystyle" style="padding: 10% 12%"> <h2 class="secondTitle-2">第三节 成为专业观察者需要具备的基本能力</h2> <p class="content"> 专业观察与日常观察不同，日常观察是观察者在日常生活中对自己感兴趣的事物进行的随机观察，在确定观察目的、准备、记录、得出结论、评价与反思等环节中都没有严格的要求。专业观察与此不同，要成为专业的观察者需要具备一系列的专业能力。 </p> <p class="titleQuot-1">一、辨识观察动机的能力</p> <p class="content"> 观察者在观察之前需明确自己的观察动机，确定观察目的，这样就可围绕观察目的进行准备和选择或设计观察工具，在观察过程中可以聚焦与观察目的有关的行为与现象，而不至于随意甚至盲目地观察；在整理和分析观察记录的时候，也可以围绕观察目的进行精准分析与评价。如果观察者事先没有明确自身的观察动机，不知道具体要观察什么和解决什么问题，那么在观察时注意力可能不能很快聚焦到某些特定的现象上，在做观察记录时也会容易敷衍、应付或过于主观，难以做到有针对性地收集相关资料并进行客观分析。例如，没有幼儿教育与观察经验的学前教育专业大学生，在进入幼儿园实训或实习时，如果预先没有明确观察动机，没有设定相应的观察目的，那么到幼儿园后就会发现自己不知道该观察些什么，或者只能根据自己的兴趣或个人经验来关注幼儿的偶发行为，所做的观察与记录就比较随意。因此，要不断提升自身的专业观察能力，首先要辨识观察动机，其次要明确观察目的，最后围绕观察目的进行观察设计及进入观察现场。以下是一名学前教育专业大学生到幼儿园实训后的第一天所做的一则观察记录，观察者事先没有明确的观察目的，只是根据个人的兴趣和感受记录了这一天中的某些事件。 </p> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0036_01.jpg" alt="" /> </p> <p class="poemtitle-author-c">随意观察</p> <p class="quotation">观察对象：深圳市某幼儿园中二班幼儿</p> <p class="quotation">观察时间：2020年12月7日</p> <p class="quotation">观察地点：幼儿园教室内</p> <p class="quotation">观察者：学前教育专业大学生 黄晓菲</p> <p class="quotation"> 今天是我第一天来到幼儿园，当我走到中二班门口时，他们正进行晨谈，我观 </p> </div> </div> </div> <div class="page-box" page="27"> <div v-if="showPageList.indexOf(27) > -1"> <div class="bodystyle" style="padding: 10% 10%"> <p> 察到大部分幼儿都看向老师，坐姿端正，小手放在腿上且纪律较好（事后我了解到该班级是全园秩序最好的班级）。我走进教室向小朋友们问好，并做了自我介绍：“小朋友们好呀！我是黄老师，我会讲故事也会画画，还可以陪你们一起玩游戏，接下来的时间，我就要和小朋友们一起相处、一起玩了哟，谢谢小朋友们！”我介绍完，班级老师问：“她是什么老师呀？”小朋友们齐声且大声回答：“黄老师！”我微笑地走到旁边。 </p> <p class="quotation"> 晨谈结束后便是户外活动时间，这时，有几个小朋友跑向我，抱着我且嘴里反复叫“黄老师”，我向他们问好之后便组织他们排好队，下楼进行户外活动。 </p> <p class="content"> 案例1-3-1中的观察记录主要记录了观察者与幼儿初次见面时的情形。在这项观察记录中，观察者事先没有明确的观察目的，在具体情境中与幼儿互动，有所触动且印象深刻，因而，观察者能够记录下其与幼儿的互动行为。但是，这类随意的观察没有明确的观察动机和预先计划的观察目的，难以对幼儿某些方面的行为与发展进行深入的分析。因此，要提升个人的观察能力，辨识观察动机，带着明确的观察目的，有针对性地观察幼儿的特定行为，只有这样才能收集到有效的观察资料。 </p> <p class="titleQuot-1">二、选择和设计观察工具的能力</p> <p class="content"> 在辨明观察动机、明确观察目的之后，往往需要选择或设计相应的观察工具。首先，观察者需要具备下操作性定义的能力。观察者需要对观察的目标行为进行分类并对每个类别下操作性定义，对行为进行分类的过程一般要遵循相互排斥性原则和详尽性原则。相互排斥性原则要求所划分的类别要相互独立、排斥；详尽性原则要求罗列出所有与观察行为相关的行为，不能出现观察到的行为无法归类的情况。操作性定义则是用可感知、可测量的方法对涉及的观察变量做出界定和说明，通常使用名词、动词、形容词等简洁明了的词语进行定义。 </p> <p class="content"> 例如，帕顿对2～5岁幼儿在游戏中的参与行为进行观察时，将幼儿游戏行为分为六类：无所事事、旁观、单独游戏、平行游戏、联合游戏、合作游戏。这六类游戏都有具体的操作性定义。（1）无所事事：幼儿未做任何游戏活动，也没有与他人交往，只是随意观望或走来走去。（2）旁观：幼儿基本上都是观看别的幼儿游戏，有时凑上来与正在游戏的幼儿说话，提问题，出主意，但自己不直接参与游戏。（3）单独游戏：幼儿独自一人游戏，只专注于自己的活动，根本不注意别人 </p> </div> </div> </div> <div class="page-box" page="28"> <div v-if="showPageList.indexOf(28) > -1"> <div class="bodystyle" style="padding: 10% 12%"> <p> 在干什么。（4）平行游戏：幼儿能在一起玩，但各自玩各自的游戏，既不影响他人，也不受他人影响，互不干涉。（5）联合游戏：幼儿能在一起玩同样的或类似的游戏，互相追随，但没有组织和分工，每个人做自己想做的事情。（6）合作游戏：幼儿因为某种目的组织在一起游戏，有领导、有组织、有分工，每个幼儿承担一定的角色任务，并互相帮助。 </p> <p class="content"> 其次，观察者对观察行为进行分类和下操作性定义后，需要选择或设计适宜的观察工具。如果所要观察的行为已有与观察目的相关的专业观察工具，可直接选用恰当的工具。如果已有的观察工具与观察目的、观察行为有一定偏差，或不适用于当前的情境，则可部分修改或重新设计观察工具。在设计观察工具时，注意要围绕观察目的、观察行为以及操作性定义进行分类，确保观察工具客观、具体、简便和具有可操作性。 </p> <p class="titleQuot-1">三、获取可靠的观察资料的能力</p> <p class="content"> 采用不同的观察方法进行观察，则观察记录的方式就会有所不同。但不管采用什么观察方法，观察记录都必须客观、翔实，力求获取可靠的观察资料。客观要求观察者如实地记录观察到的事实，不混杂个人的主观判断和想法；翔实则要求观察者将所观察到的事实的前因后果、细节都详尽地描述出来，不因观察者个人的主观判断而忽略、遗漏细节。 </p> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0038_01.jpg" alt="" /> </p> <p class="poemtitle-author-c">集体教学观察</p> <p class="quotation">观察对象：深圳市某幼儿园幼儿及教师</p> <p class="quotation">观察时间：2020年12月9日</p> <p class="quotation">观察地点：幼儿园小班教室内</p> <p class="quotation">观察者：学前教育专业大学生 林静纯</p> <p class="quotation"> 今天我观察了我实训所在班级的教师上课的情况。这周的主题活动是关于十二生肖的，教师在周一就发了调查表让幼儿回去问问他们自己及其家人的生肖，并要求幼儿画出来。 </p> <p class="quotation"> 教师邀请小朋友发言：“现在我要找小朋友汇报啦，汇报的小朋友就可以得到小红花，谁想汇报呢？我要挑坐得端正、听讲认真的小朋友。”这时候几个调皮的 </p> </div> </div> </div> <div class="page-box" page="29"> <div v-if="showPageList.indexOf(29) > -1"> <div class="bodystyle"> <p class="quotation notIndent"> 小朋友马上就坐直了。但是老师说：“现在坐直也没有用了，我要挑从开始就坐直的小朋友。” </p> <p class="quotation"> 在第一个小朋友开始汇报的时候，那个一直过于活跃的小朋友就开始安静了，很认真地在听。教师邀请他上台发言。这个小朋友虽然比较多动，但他的语言能力挺不错，能比较完整、流畅地表达。 </p> <p class="quotation"> 这个小朋友平时特别调皮不听话，另外几个调皮的小朋友看到他坐好并且被老师邀请发言后跟着坐好，他们也想要通过发言得到小红花。 </p> <p class="content"> 从这则观察记录中可以看到，观察者在记录的时候能够还原老师的话语，而没有省略或根据自己的理解来转述，做到了客观、翔实。但是在描述那个过于活跃的小朋友的行为时，观察记录则显得不够客观、翔实。例如，“那个一直过于活跃的小朋友就开始安静了，很认真地在听。”记录中的“过于活跃”“认真”都是观察者的主观判断，而且从记录中读者也难以判断这个小朋友是否确实是“一直过于活跃”，上课是否“认真”。因而，观察者在进行观察和记录时，应如实地将观察到的这个小朋友的行为、动作、表情详细地记录下来，而不是仅仅用“认真”二字来代替，只有这样才能更好地做到客观、翔实地记录。再如，“这个小朋友虽然比较多动，但他的语言能力挺不错，能比较完整、流畅地表达。”在观察记录中，观察者没有相应地记录这个小朋友的“多动”，在描述这个小朋友的语言发展的时候，没有将小朋友的语言记录下来，取而代之的是自己评价他的“语言能力挺不错”。这就显得观察者在记录时只呈现了个人的主观判断，而没有呈现客观、翔实的观察事实。建议在做这部分观察记录时，将小朋友的发言如实记录下来。 </p> <p class="titleQuot-1">四、尊重与理解幼儿的能力</p> <p class="content"> 幼儿是独立的个体，有自己的感受、体验与想法。专业的观察者应尊重与理解幼儿，这就要求成人应做到换位思考，站在幼儿的立场来认识和理解幼儿，了解幼儿的行为和内在想法，而不是用成人自身的主观臆想来代替幼儿的想法，即切勿以“成人之心”去度“幼儿之腹”。 </p> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0039_01.jpg" alt="" /> </p> <p class="poemtitle-author-c">幼儿的争执与冲突</p> <p class="quotation">观察对象：深圳市某幼儿园中二班发生争执的幼儿</p> <p class="quotation">观察时间：2020年12月7日</p> </div> </div> </div> <div class="page-box" page="30"> <div v-if="showPageList.indexOf(30) > -1"> <div class="bodystyle" style="padding: 10% 13%"> <p class="quotation">观察地点：幼儿园户外活动场所</p> <p class="quotation">观察者：学前教育专业大学生 黄晓菲</p> <p class="quotation"> 幼儿在午睡起来后，参与下午的户外活动。每个班的幼儿每次安排的户外活动区域和可以玩的游戏都是不同的。这次给中二班安排的户外活动区域内有摇摇马和积木这些材料。小朋友可以玩的区域不大，游戏材料也不充足，因此在玩的过程中难免会有一些情况发生。例如，在玩摇摇马的时候，有的幼儿因为背碰到背而撞到一起，也有的幼儿因为积木和摇摇马的数量不够而发生争抢。 </p> <p class="quotation"> 这时候，有一个小朋友在玩的时候不小心撞到了另一个小朋友，在他快哭的时候（眼睛湿润），我跑过去把他扶起来摸摸他，并问这两个小朋友发生了什么事，另一个小朋友则马上说了“对不起”，我趁机安抚被撞的小朋友，说：“你看，他也不是故意的，他马上就和你道歉了，你愿意原谅他吗？”他用手擦擦眼泪，点点头，然后他们就又在一起玩了。 </p> <p class="quotation"> 观察反思：在进行户外活动的时候，如果材料不够，老师应事先和幼儿约定好大家一起玩，不可以争抢也不可以打人。如果幼儿之间发生争抢，引起哭闹，老师应及时过去安抚幼儿的情绪，及时解决问题，耐心对待幼儿，或许事情并没有那么难解决，小朋友也并没有那么不听话。 </p> <p class="content"> 观察记录是观察者根据个人的观察目的和视角进行的观察及记录，是观察者个人的教育观、儿童观的集中体现。观察反思则更能直接地反映出观察者在观察过程中所秉持的教育观、儿童观。从案例1-3-3中可以看出，观察者在发现幼儿的冲突行为时，她的解决办法是安抚幼儿的情绪并协调解决冲突。在观察反思中，观察者强调教师对幼儿行为的指导能力、对幼儿情绪的关注、对幼儿的理解以及教师的耐心。由此可以看出观察者关爱幼儿、以幼儿为本的教育理念。尊重和理解幼儿是个体教育理念的内在表现，不同个体持有的教育理念不同，在尊重和理解幼儿上可能会有所差异。具体来说，不同读者在看这则观察记录时，所关注的要点或个人的感悟、反思可能也会不同。比如，有的读者可能认为，在幼儿冲突事件中，教师及时关注和安抚幼儿的情绪，协助幼儿解决冲突是尊重和理解幼儿的表现。有的读者认为，在幼儿发生冲突行为时，教师应根据观察来判断教育和指导的时机，而不是首先安抚幼儿的情绪，如此才能让幼儿学会处理冲突，并提升自己的冲突解决能力。值得注意的是，尊重和理解幼儿作为观察者需要具备的基本能力，会随着观察者的观察经验的丰富和专业知识的增长而不断深化。不同观察者会因观察经验及专业知识的不同，而在尊重和理解幼儿方面有不同的表现。 </p> </div> </div> </div> <div class="page-box" page="31"> <div v-if="showPageList.indexOf(30) > -1"> <div class="bodystyle"> <p> 即使是同一个观察者，在不同时期审视个人的观察记录和观察反思，可能也会对幼儿行为有不同的理解，这就是观察者在尊重和理解幼儿的能力上不断发展、深化的具体表现。 </p> <p class="titleQuot-1">五、反省自身主观或成见的能力</p> <p class="content"> 围绕观察目的进行观察、记录与分析，并得出观察结论，这不等于观察的结束，观察者还应对观察过程、分析和结论等进行反省，以加深对幼儿发展的认识与理解。观察主要通过观察者个人的感官，借助一定的工具来收集、记录所观察的行为、现象，在观察过程中难免会夹杂观察者的主观情绪与想法，即使是在分析观察资料和做出判断、得出结论的阶段，也会伴随着观察者的主观参与。由此，观察者应该对观察过程、分析和结论等进行充分反思，反思个人的主观参与（包括主观情绪与成见等）是否影响其对资料的收集、分析、判断与结论，是否因个人的主观参与而忽略了一些观察事实，或者因个人的主观经验而误读、误解了观察事实。 </p> <p class="content"> 初学者首先应该认识到观察反省指的是什么，主要是对什么进行反省。很多初到幼儿园的学前教育专业大学生在进行观察反省时，所写的“观察反省”常常有以下几个特点：（1）反省内容比较随意，想到什么就写什么，缺乏逻辑；（2）将观察反省与观察分析混为一谈，在反省阶段写自己对所观察到的幼儿行为的理解；（3）混淆观察反省与观察建议，在反省阶段写教师如果遇到类似的幼儿行为应如何做，如何进行教育指导。 </p> <p class="poemtitle-l"> <img class="g-pic" src="../../images/0041_01.jpg" alt="" /> </p> <p class="poemtitle-author-c">幼儿的体育活动</p> <p class="quotation">观察对象：深圳市某幼儿园小班幼儿小何、小雯</p> <p class="quotation">观察时间：2020年12月8日</p> <p class="quotation">观察地点：幼儿园户外活动场所</p> <p class="quotation">观察者：学前教育专业大学生 陈欣</p> <p class="quotation"> 在进行体能大循环活动时，小何坐在地上，没有和其他幼儿一起参与活动。我问她：“你怎么不和她们一起玩呀？”她不说话。我试图用其他方法吸引她的注意，让她参与到活动中：“你看那个好好玩呀，你要不要过去玩一下？”她说：“不要。”于是我就站在旁边，默默地观察她。这个时候，小雯走了过来。我问她：“你怎么不 </p> </div> </div> </div> <div class="page-box" page="32"> <div v-if="showPageList.indexOf(30) > -1"> <div class="bodystyle"> <p class="quotation notIndent"> 去玩呀？”她说：“我不喜欢玩。”“老师很想玩呢，让老师陪你去玩好不好呀？”她说：“不要。”于是我让这两个小女孩坐到一起（这样也方便照顾）。 </p> <p class="quotation"> 我看到副班老师在那边带领小朋友们参与活动，于是跑过去问她：“小何和小雯都不参加活动，是不是身体不舒服呀？”副班老师说：“不用理她们，她们就是这样。之前跟她们的父母沟通过了，她们的父母说她们身体比较虚弱，不能参加这些活动。唉，没办法，只能这样了。”副班老师表示很无奈。我也只能回去继续照看她们，免得她们走丢。 </p> <p class="quotation"> 观察反思：面对身体虚弱的小朋友，老师虽然跟她们的父母沟通过，了解情况后知道她们无法参加体育活动，但是也不能完全否认她们的体育能力，并完全不理她们，可以积极鼓励引导幼儿参加适当的体育活动。 </p> <p class="content"> 在案例1-3-4中，观察者在观察反思中写的主要是个人对副班老师的做法的看法及建议，这其实是将观察反思与观察分析、观察建议混为一谈。另外，观察者除了将个人对这件事比较深刻的感受与想法写在观察反思中之外，还需要对观察过程以及对观察记录的分析、判断与结论进行反省，重点反省在不同观察阶段中个人的主观参与情况以及个人的主观参与对整个观察过程及结论的影响。 </p> <div class="bgColor"> <p class="poemtitle">小结</p> <p class="content"> 观察是人类通过感官进行感知，并通过大脑对所感知到的信息进行加工的过程。婴幼儿行为观察是指观察者依据一定的观察目的，采用专业的观察工具，有计划地进入自然情境中对婴幼儿特定的行为进行观察、记录和分析，从而获取相应的研究资料的方法。婴幼儿行为观察有不同的类型和不同的方法，在观察过程中，可结合具体的观察目的和观察需要采取相应的观察方法。 </p> <p class="content"> 婴幼儿行为观察具有特殊的意义与价值。对婴幼儿行为进行观察与分析，不仅可以增进对婴幼儿的理解，提升幼儿园课程与教育的质量，还可以促进幼儿园教师的专业发展。 </p> <p class="content"> 婴幼儿行为观察不同于日常观察，要成为专业的观察者应具备相应的专业能力，如辨识观察动机的能力、选择和设计观察工具的能力、获取可靠的观察资料的能力、尊重与理解幼儿的能力、反省自身主观或成见的能力等。 </p> </div> </div> </div> </div> <div class="page-box" page="33"> <div v-if="showPageList.indexOf(30) > -1"> <div class="bodystyle"> <p class="titleQuot-1"> <img class="g-pic" src="../../images/0043_01.jpg" alt="" /> </p> <p>幼儿行为观察</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem0" @change="setBookQuestion" ></textarea> </div> <p>日常观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem1" @change="setBookQuestion" ></textarea> </div> <p>专业观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem2" @change="setBookQuestion" ></textarea> </div> <p>正式观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem3" @change="setBookQuestion" ></textarea> </div> <p>非正式观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem4" @change="setBookQuestion" ></textarea> </div> <p>参与式观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem5" @change="setBookQuestion" ></textarea> </div> <p>非参与式观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem6" @change="setBookQuestion" ></textarea> </div> <p>个别观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem7" @change="setBookQuestion" ></textarea> </div> <p>群体观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem8" @change="setBookQuestion" ></textarea> </div> <p>描述观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem9" @change="setBookQuestion" ></textarea> </div> <p>取样观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem10" @change="setBookQuestion" ></textarea> </div> <p>评定观察；</p> <div class="bk-xyx"> <textarea rows="1" v-model="chapter001.textBybItem11" @change="setBookQuestion" ></textarea> </div> <p class="titleQuot-1"> <img class="g-pic" src="../../images/0043_02.jpg" alt="" /> </p> <p class="content">1．一个完整的观察应包含哪些基本要素？</p> <div class="bk-xyx"> <textarea rows="5" v-model="chapter001.textBybItem12" @change="setBookQuestion" ></textarea> </div> <p class="content"> 2．日常观察与专业观察的区别是什么？要做到专业观察应具备哪些能力？ </p> <div class="bk-xyx"> <textarea rows="5" v-model="chapter001.textBybItem13" @change="setBookQuestion" ></textarea> </div> <p class="content"> 3．观察婴幼儿的行为有什么意义与价值？你是如何理解的？ </p> <div class="bk-xyx"> <textarea rows="5" v-model="chapter001.textBybItem14" @change="setBookQuestion" ></textarea> </div> <p class="content"> 4．在观察过程中如何走进婴幼儿的世界，真正读懂婴幼儿？思考教师的关爱对婴幼儿的影响。 </p> <div class="bk-xyx"> <textarea rows="5" v-model="chapter001.textBybItem15" @change="setBookQuestion" ></textarea> </div> <p class="titleQuot-1"> <img class="g-pic" src="../../images/0043_03.jpg" alt="" /> </p> <p class="content"> 尝试在社区、商场、幼儿园等场所，在经过监护人同意之后，选择一位婴幼儿进行3～5分钟的观察并记录，谈谈你此次观察的发现与感想。 </p> <div class="bk-xyx"> <textarea rows="5" v-model="chapter001.textBybItem16" @change="setBookQuestion" ></textarea> </div> </div> </div> </div> <preView :isClear="dialogVisible" :md5="p_md5" :pdfTitle="somePdfTitleValue" ref="pdfDialogRef" ></preView> </div> </template> <script> import preView from "@/components/pdfview/index.vue"; import { getResourcePath } from "@/assets/methods/resources"; export default { name: "chapter001", props: { showPageList: { type: Array, }, }, data() { return { videoPathOne: "", videoPathTwo: "", videoPathThree: "", p_md5: "", somePdfTitleValue: "", dialogVisible: false, chapter001: { isshowVideo1: true, isshowVideo2: true, isshowVideo3: true, pdfMd5: { 1: { md5: "73A78B0EA1CE181BEF2BA1C019F71FA2", name: "案例1-2-1 “寒露到，蔬果熟”主题活动观察与分析", }, }, }, }; }, components: { preView, }, methods: { async getVidoePath() { this.videoPathOne = await getResourcePath( "7B06B89BFC32F173E0415ADE038196EE" ); this.videoPathTwo = await getResourcePath( "DFF84D3D46121E4193ED9247F39D135E" ); this.videoPathThree = await getResourcePath( "F2DAEB654EB8DB72FA36CF9AD91F8638" ); }, setBookQuestion() { console.log(this.showPageList); }, toUrl(val) { if (val) { this.p_md5 = this.chapter001.pdfMd5[val].md5; this.somePdfTitleValue = this.chapter001.pdfMd5[val].name; this.$refs.pdfDialogRef.openDialog(); } }, playVideo(val) { this.chapter001["isshowVideo" + val] = !this.chapter001["isshowVideo" + val]; }, }, async mounted() { this.getVidoePath(); }, }; </script> src/books/behaviorObserveAndGuid/view/components/index.vue
New file @@ -0,0 +1,915 @@ <!-- @format --> <template> <div class="page-main" @scroll="throttledScrollHandler"> <div id="searchDomBox" style="display: none"> <div id="searchContent"></div> </div> <div class="public-behaviorObserveAndGuid" :style="{ fontSize: fontSize ? fontSize + 'px' : '16px', transform: `scale(${pageZoom ? pageZoom : 1})`, transformOrigin: 'center top', }" > <!-- <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList" ></pageHeader> --> <chapterOne v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList" ></chapterOne> <!-- <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo> --> <!-- <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree> --> <!-- <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" ></chapterFour> --> <!-- <chapterfive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterfive> --> <!-- <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSix> --> <!-- <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList"></chapterSeven> --> <!-- <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight> --> <!-- <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList"></chapterNine> --> </div> </div> </template> <script> import Vue from "vue"; // import pageHeader from "./front001"; import chapterOne from "./chapter001.vue"; // import chapterTwo from './chapter002.vue' // import chapterThree from './chapter003.vue' // import chapterFour from "./chapter004.vue"; // import chapterfive from './chapter005.vue' // import chapterSix from './chapter006.vue' // import chapterSeven from './chapter007.vue' // import chapterEight from './chapter008.vue' // import chapterNine from './chapter009.vue' import NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; import getQuestionList from "@/assets/methods/examination"; import testData from "../../js/examinationList"; import Swiper from "swiper/bundle"; import "swiper/swiper-bundle.css"; import Viewer from "viewerjs"; import "viewerjs/dist/viewer.css"; export default { data() { return { catalogLength: 1, // 总章节数 showCatalogList: [], // 显示的章节 loadThreshold: 300, // 触发加载阈值 throttleThreshold: 100, // 节流阈值 previousScrollTop: 0, throttledScrollHandler: null, observer: null, loadPageObserver: null, loadPageList: [], questionDataMap: {}, renderSignMap: {}, highlightData: null, }; }, computed: { fontSize() { return this.$store.state.qiankun.fontSize; }, pageZoom() { return this.$store.state.qiankun.scale / 100; }, }, watch: { showCatalogList: { handler(newVal, oldVal) { if ( this.$store.state.qiankun && this.$store.state.qiankun.catalogChange ) { // 调用父层方法 this.$store.state.qiankun.catalogChange({ showCatalogList: newVal, }); } // 启动页码观察 setTimeout(() => { this.initObservation(); this.initThemeColor(); }, 500); }, }, loadPageList: { handler(newVal, oldVal) { setTimeout(() => { this.initSwiper(); this.initViewer(); // this.readText() }, 200); }, }, pageZoom: { handler(newVal, oldVal) { const scrollBox = ( this.container ? this.container : document ).querySelector(".page-main"); scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal; }, }, }, mounted() { // 默认加载章节 this.showCatalogList = [1]; // 滚动监听节流 this.throttledScrollHandler = _.throttle( this.scrollFun, this.throttleThreshold, { leading: true, trailing: false } ); // 定义子层方法 if (this.setGlobalState) { // 提供页面跳转功能 this.setGlobalState({ gotoPage: (catalog, page) => { this.gotoPage(catalog, page); }, // 渲染笔记、高亮、划线 renderSign: (type, data) => { // 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记； this.handelSignData(type, data); // this.renderSign(type, data); }, // 删除笔记、高亮、划线 delSign: (data) => { this.delSign(data); }, // 全文检索 searchBookByKeyword: (keyword) => { return this.searchTextByPage(keyword); }, // 跳转检索结果位置 jumpSearchItem: (data) => { this.searchItemLocation(data); }, }); } // 创建一个新的 Intersection Observer 实例，用于观察目标元素和执行相应的回调函数。 // new IntersectionObserver(callback, options)：使用之前定义的 callback 回调函数和 options 配置选项来初始化 Intersection Observer 实例。 this.observer = new IntersectionObserver(this.pageChangeCallback, { root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。 rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合 threshold: 0.5, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 }); this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。 rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合 threshold: 0, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。 }); // 启动页码观察 setTimeout(() => { this.initObservation(); this.initThemeColor(); }, 500); // 测试页面跳转 setTimeout(() => { this.gotoPage(1, 1); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", // txt: "题一学习主题一 运动", // page: "10", // type: "Highlight", // color: "#F5E12A" // }); // setTimeout(() => { // this.delSign({ // ids: ["2ACA9359"] // }); // }, 2000); }, 500); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") // .querySelectorAll(".page-box"); // 检索 // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage"); // 检索跳转 // this.searchItemLocation({ // catalog: 2, // page: 10, // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ", // txtIndex: 57 // }); // }, 500) }, methods: { swdtChange(data) { console.log("子应用pdf", data); if (this.$store.state.qiankun && this.$store.state.qiankun.openPDF) { if (data.type == "pdf") { this.$store.state.qiankun.openPDF({ data: data.data, }); } else { this.$store.state.qiankun.chooseWords({ type: data.type, data: data.data, }); } } }, changeDomViewer() { this.initViewer(); }, // setZoom1() { // let scale = this.$store.state.qiankun.scale + 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // setZoom2() { // let scale = this.$store.state.qiankun.scale - 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // 滚动监听 scrollFun(event) { // 判断向上滚动还是向下滚动 if (event.target.scrollTop > this.previousScrollTop) { // 向下 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; if ( currentScrollTop >= event.target.scrollHeight - this.loadThreshold ) { // 到达阈值 if ( this.showCatalogList[this.showCatalogList.length - 1] < this.catalogLength ) { // 加载下一章 this.showCatalogList.push( this.showCatalogList[this.showCatalogList.length - 1] + 1 ); if (this.showCatalogList.length > 3) { // 超过三章隐藏顶部一章 this.showCatalogList.shift(); } } } } else if (event.target.scrollTop < this.previousScrollTop) { // 向上 const currentScrollTop = event.target.scrollTop; if (currentScrollTop <= this.loadThreshold) { // 到达阈值 if (this.showCatalogList[0] > 0) { // 加载上一章 this.showCatalogList.unshift(this.showCatalogList[0] - 1); if (this.showCatalogList.length > 3) { // 超过三章隐藏底部一章 this.showCatalogList.pop(); } } } } // showCatalogList 当前显示的三个章节，watch监听传递给主应用 // 更新上一次滚动的位置 this.previousScrollTop = event.target.scrollTop; }, // 章节、页面跳转 gotoPage(catalog, page) { if (catalog >= 0 && catalog <= this.catalogLength) { // 处理渲染章节 if (catalog == 0) { this.showCatalogList = [0, 1]; } else if (catalog == this.catalogLength) { this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, this.catalogLength, ]; } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1]; } setTimeout(() => { // 跳转页码 const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${page}"]`); if (pageDom) { pageDom.scrollIntoView(); } else { console.log("页码错误！"); } }, 500); } else { console.log("章节错误！"); } }, // 处理标记数据 handelSignData(type, data) { if (this.loadPageList.indexOf(Number(data.page)) > -1) { // 立即渲染 this.renderSign(type, data); } // 储存数据 if (!this.renderSignMap[type]) this.renderSignMap[type] = {}; if (!this.renderSignMap[type][data.page]) this.renderSignMap[type][data.page] = []; this.renderSignMap[type][data.page].push(data); }, // 渲染标记 renderSign(type, data) { // 父层设置禁止渲染标记时不再进行渲染 if (this.$store.state.qiankun.disableSign) { return false; } const existence = ( this.container ? this.container : document ).querySelector(`[dataid="${data.id}"]`); // 去重 if (!existence) { const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${data.page}"]`); // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组 const treeWalker = document.createTreeWalker( pageDom, NodeFilter.SHOW_TEXT ); const allTextNodes = []; let currentNode = treeWalker.nextNode(); while (currentNode) { allTextNodes.push(currentNode); currentNode = treeWalker.nextNode(); } for (let i = 0; i < allTextNodes.length; i++) { const textDom = allTextNodes[i]; if (textDom.textContent.indexOf(data.txt) > -1) { let reg = new RegExp(`${data.txt}`, "ig"); switch (type) { case "Highlight": // 高亮 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>` ); break; case "Dashing": // 划线 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>` ); break; case "Note": // 笔记 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` ); break; } } } } }, // 删除标记渲染 delSign({ ids, type }) { if (ids && ids.length) { for (let i = 0; i < ids.length; i++) { const id = ids[i]; const dom = ( this.container ? this.container : document ).querySelector(`[dataid="${id}"]`); dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ); } } if (type) { const doms = ( this.container ? this.container : document ).querySelectorAll(`[datatype="${type}"]`); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ); } } }, initObservation() { const sections = ( this.container ? this.container : document ).querySelectorAll(".page-box"); sections.forEach((section) => { if (this.config.activeBook && this.config.activeBook.tryPageCount) { const page = section.getAttribute("page"); if (Number(page) > this.config.activeBook.tryPageCount) { let chapterDom = this.getParentWithClass(section, "chapter"); const chapterNum = chapterDom.getAttribute("num"); this.catalogLength = Number(chapterNum) - 1; section.remove(); return false; } } // observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。 const isObserver = section.getAttribute("observer"); const isLoadObserver = section.getAttribute("loadObserver"); if (!isObserver) { this.observer.observe(section); section.setAttribute("observer", "1"); } if (!isLoadObserver) { this.loadPageObserver.observe(section); section.setAttribute("loadObserver", "1"); } }); }, initThemeColor() { // 获取各种需要主题色的节点 const colorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-color"); const backgroundColorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-back"); const borderColorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-border"); // 获取配置的主题色 const bookThemeColor = this.config.activeBook && this.config.activeBook.bookThemeColor ? this.config.activeBook.bookThemeColor : null; const chapterThemeColor = this.config.activeBook && this.config.activeBook.chapterThemeColor ? this.config.activeBook.chapterThemeColor : null; const pageThemeColor = this.config.activeBook && this.config.activeBook.pageThemeColor ? this.config.activeBook.pageThemeColor : null; colorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.color = themeColor; } }); backgroundColorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.backgroundColor = themeColor; } }); borderColorDom.forEach((domItem) => { // 获取章节、页码 let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // 向上匹配主题色 const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.borderColor = themeColor; } }); }, getParentWithClass(element, className) { console.log(element, className, "element, className"); while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { return element; } } }, pageChangeCallback(entries, observer) { //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。 entries.forEach((entry) => { //entry.isIntersecting：检查当前目标元素是否与根元素相交。 if (entry.isIntersecting) { const target = entry.target; //entry.target：获取当前目标元素 const page = target.getAttribute("page"); const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" ); const catalog = catalogDom.getAttribute("num"); let text = null; if (target.querySelector("p")) { text = target.querySelector("p").textContent.substring(0, 50); } // 返回页码和章节信息 if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sections：获取所有具有 .section 类名的元素，并转换为数组。 // let index = sections.findIndex((section) => section === target) + 1; //index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。 } }); }, loadPageCallback(entries, observer) { entries.forEach(async (entry) => { if (entry.isIntersecting) { const target = entry.target; const page = target.getAttribute("page"); if (this.loadPageList.indexOf(Number(page)) == -1) { const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" ); // 添加页码 this.loadPageList.push(Number(page)); const catalog = catalogDom.getAttribute("num"); if (!this.questionDataMap[page]) { if (testData && testData[catalog]) { if (testData[catalog][page]) { if (Array.isArray(testData[catalog][page])) { this.questionDataMap[page] = await getQuestionList( page, testData[catalog][page], this.config.activeBook ); } else { const obj = {}; for (let key in testData[catalog][page]) { obj[key] = await getQuestionList( [], testData[catalog][page][key], this.config.activeBook ); } this.questionDataMap[page] = obj; } } } } // 渲染这一页的标记 for (const key in this.renderSignMap) { if (this.renderSignMap[key][page]) { this.renderSignMap[key][page].forEach((item) => { this.renderSign(key, item); }); } } // 处理高亮 if (this.highlightData) { // 高亮行 setTimeout(() => { // 获取页面所有text节点 const pageTextList = document.createTreeWalker( target, NodeFilter.SHOW_TEXT ); // 匹配关键字 const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); while (currentNode) { allPageTextNodes.push(currentNode); currentNode = pageTextList.nextNode(); } for (let i = 0; i < allPageTextNodes.length; i++) { const textDom = allPageTextNodes[i]; let txtIndex = textDom.textContent.indexOf( this.highlightData.txt ); if (txtIndex > -1) { textDom.parentNode.style.transition = "background-color 0.8s"; textDom.parentNode.scrollIntoView(); textDom.parentNode.style.backgroundColor = "#79bbf0"; setTimeout(() => { textDom.parentNode.style.backgroundColor = ""; }, 1000); } } }, 100); } if (this.loadPageList.length > 5) { // 超过5页 this.loadPageList.shift(); } } } }); }, initSwiper() { const doms = ( this.container ? this.container : document ).querySelectorAll(".swiper-img"); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Swiper(dom, { loop: false, // 无缝 autoplay: { //自动开始 delay: 3000, //时间间隔 disableOnInteraction: false, //*手动操作轮播图后不会暂停* }, paginationClickable: true, slidesPerView: 1, // 一组三个 spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector(".swiper-button-next"), prevEl: dom.querySelector(".swiper-button-prev"), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 observer: true, observeParents: true, // // 如果需要分页器 // pagination: { // el: (this.container ? this.container : document).querySelector( // ".swiper-pagination" // ), // clickable: true // 分页器可以点击 // } }); } const pptDoms = ( this.container ? this.container : document ).querySelectorAll(".swiper_ppt"); for (let i = 0; i < pptDoms.length; i++) { const dom = pptDoms[i]; new Swiper(dom, { loop: false, // 无缝 autoplay: false, paginationClickable: true, slidesPerView: 1, // 一组三个 spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector(".swiper-button-next"), prevEl: dom.querySelector(".swiper-button-prev"), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 observer: true, observeParents: true, on: { init: (value) => { let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数） let totalPages = value.slides.length; // 获取总页数 var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; }, slideChange: (value) => { let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数） let totalPages = value.slides.length; // 获取总页数 var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; }, }, }); } }, initViewer() { const doms = ( this.container ? this.container : document ).querySelectorAll(".openImgBox"); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Viewer(dom, { container: this.container ? this.container.querySelector("#app") : "body", navbar: true, // 显示导航栏 toolbar: true, // 显示工具栏 title: true, // 显示标题 }); } }, // 根据关键字全文检索 searchTextByPage(keyword) { const searchResult = []; let catalogIndex = 0; // 所有章节组件（每本书制作时单独配置） const pageData = { // pageHeader, chapterOne, // chapterTwo, // chapterThree, // chapterFour, // chapterfive, // chapterSix, // chapterSeven, // chapterEight, // chapterNine // assemblyOne, // assemblyTwo, }; // 遍历所有章节文件 for (const key in pageData) { catalogIndex++; let pageComponent, pageExample; // 先渲染一次当前章节文件（这时页面的内容为空），获取页码信息 pageComponent = Vue.extend(pageData[key]); pageExample = new pageComponent({ propsData: { showPageList: [], questionData: {}, isSearch: true, }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( "#searchContent" ) ); // 获取页码 const pageDom = (this.container ? this.container : document) .querySelector("#searchDomBox") .querySelectorAll(".page-box"); const pages = []; for (let i = 0; i < pageDom.length; i++) { const pageDomItem = pageDom[i]; pages.push(Number(pageDomItem.getAttribute("page"))); } // 获取页面结束，卸载销毁 pageExample.$destroy(); (this.container ? this.container : document).querySelector( "#searchDomBox" ).innerHTML = '<div id="searchContent"></div>'; // 遍历页码 if (pages.length) { for (let i = 0; i < pages.length; i++) { const pageNum = pages[i]; // 动态渲染对应章节的页码 pageComponent = Vue.extend(pageData[key]); pageExample = new pageComponent({ propsData: { showPageList: [pageNum], questionData: {}, isSearch: true, }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( "#searchContent" ) ); // 获取对应页面dom const thisPageDom = (this.container ? this.container : document) .querySelector("#searchDomBox") .querySelector(`[page="${pageNum}"]`); if (thisPageDom) { // 获取页面所有text节点 const pageTextList = document.createTreeWalker( thisPageDom, NodeFilter.SHOW_TEXT ); // 匹配关键字 const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); while (currentNode) { allPageTextNodes.push(currentNode); currentNode = pageTextList.nextNode(); } for (let i = 0; i < allPageTextNodes.length; i++) { const textDom = allPageTextNodes[i]; let txtIndex = textDom.textContent.indexOf(keyword); if (txtIndex > -1) { // 记录关键字所在页码、章节以及匹配到的段落 searchResult.push({ page: pageNum, catalog: catalogIndex, txt: textDom.textContent, txtIndex: txtIndex, }); } } // 结束，卸载销毁 pageExample.$destroy(); (this.container ? this.container : document).querySelector( "#searchDomBox" ).innerHTML = '<div id="searchContent"></div>'; } } } } // 输出搜索结果 console.log(searchResult); return searchResult; }, // 根据检索结果跳转对应位置并高亮 searchItemLocation(data) { // 记录高亮信息 this.highlightData = data; // 跳转 this.gotoPage(data.catalog, data.page, () => {}); }, // readText() { // const doms = ( // this.container ? this.container : document // ).querySelectorAll('.read-aloud') // for (let index = 0; index < doms.length; index++) { // const dom = doms[index] // let id = null // dom.addEventListener('click', (e) => { // if (e.srcElement.nodeName == 'svg') { // id = dom.getAttribute('readId') // } else if (e.srcElement.nodeName == 'g') { // const svgDom = e.srcElement.parentNode // id = svgDom.getAttribute('readId') // } else { // const svgDom = e.srcElement.parentNode.parentNode // id = svgDom.getAttribute('readId') // } // const item = ( // this.container ? this.container : document // ).querySelector('#' + id).innerText // console.log(item, 233) // }) // } // }, }, components: { // pageHeader, chapterOne, // chapterTwo, // chapterThree, // chapterFour, // chapterfive, // chapterSix, // chapterSeven, // chapterEight, // chapterNine // assemblyOne, // assemblyTwo, // ChapterFour, // ChapterFive, // chapterSix, // chapterSeven, // chapterEight, // chapterNine, // chapter010, // chapter011, // chapter012, // chapter013, // chapter014, // chapter015, // chapter016, // chapter017, // chapter018, }, }; </script> src/books/behaviorObserveAndGuid/view/components/pageHeader.vue
New file @@ -0,0 +1,36 @@ <template> <div class="page-header-box"> <div class="evenBox" v-if="!isOdd"> <div class="vertical">{{ name }}</div> <div class="textBox">{{ num }}</div> <img src="../../images/a1.jpg" alt="" /> </div> <div class="oddBox" v-else></div> </div> </template> <script> export default { name: "pageHeader", props: { num: { type: String, default: "", }, name: { type: String, default: "", }, chapter: { type: String, default: "", }, isOdd: { type: Boolean, default: true, }, }, data() { return {}; }, }; </script> src/books/behaviorObserveAndGuid/view/index.vue
New file @@ -0,0 +1,76 @@ <template> <div class="temp-bookInnerContentSports" @mouseup="handleMouseUp"> <pageContent></pageContent> </div> </template> <script> import pageContent from "./components/index.vue"; export default { components: { pageContent, }, data() { return {}; }, mounted() { }, methods: { getParentWithClass(element, className) { while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { return element; } } }, handleMouseUp(e) { const selection = ( this.container ? this.container : window ).getSelection(); const txt = selection.toString(); if (selection.type != "none" && txt) { let node = selection.anchorNode.parentNode; let pageHtml = this.getParentWithClass( selection.anchorNode, "page-box" ); let chapterDom = this.getParentWithClass( selection.anchorNode, "chapter" ); let chapterNum; if (chapterDom) chapterNum = chapterDom.getAttribute("num"); if (pageHtml) { const page = pageHtml.getAttribute("page"); // 监听选中文本事件，并触发父层方法 if (this.$store.state.qiankun.windowSelection) { this.$store.state.qiankun.windowSelection({ chapterNum, txt, page, x: e.x, y: e.y, }); } } } else { if (this.$store.state.qiankun.windowSelection) { this.$store.state.qiankun.windowSelection({ chapterNum: "", txt: "", page: "", x: e.x, y: e.y, }); } } }, }, }; </script> <style lang="less"> @import "../css/default.less"; </style>
