diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index bef2a73dd8992c974ce157d1b68d3293efe1f8b1..7b9a6b70574e7b9d4f88e2b7273da5836c5d6972 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -2,244 +2,334 @@
 <div class="model-content">
 
 
+  <div style="position: absolute; left: 200px; top: 100px; width: 300px;">
+
+    <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
+
+    <app-upload-image-with-preview
+      [picUrl]="item.pic_url"
+      (imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
+    ></app-upload-image-with-preview>
+
+    <app-audio-recorder
+      [audioUrl]="item.audio_url"
+      (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
+    ></app-audio-recorder>
+
+  </div>
+
+
+
+  <div style="position: absolute; left: 1000px; top: 100px; width: 300px;">
+
+    <input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()">
+
+    <app-upload-image-with-preview
+      [picUrl]="item.pic_url_2"
+      (imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')"
+    ></app-upload-image-with-preview>
+
+    <app-audio-recorder
+      [audioUrl]="item.audio_url_2"
+      (audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')"
+    ></app-audio-recorder>
+
+  </div>
+
+
+
+
+
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
-  <div *ngFor="let it of picArr; let i = index"
-  nz-col nzSpan="8" >
 
 
 
-    <div class="item-box">
 
 
-      <app-upload-image-with-preview
-        style="width: 100%"
-        [picUrl]="it.pic_url"
-        (imageUploaded)="onImageUploadSuccessByItem($event, it)"
-      ></app-upload-image-with-preview>
 
 
 
-      <div style="display: flex; justify-items: center; padding-top: 10px">
-        <app-audio-recorder
-          [audioUrl]="it.audio_url"
-          (audioUploaded)="onAudioUploadSuccessByItem($event, it)">
-        </app-audio-recorder>
 
-        <button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">
-          <i nz-icon type="close"></i>
-        </button>
-      </div>
 
-    </div>
 
-    <!--<h5> id-{{i+1}} </h5>-->
 
-    <!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
-    <!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
-    <!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
-    <!--<i nz-icon type="close"></i>-->
-    <!--</button>-->
-    <!--</div>-->
 
 
-    <!--<app-upload-image-with-preview-->
-    <!--style="width: 100%"-->
-    <!--[picUrl]="it.pic_url"-->
-    <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
-    <!--&gt;</app-upload-image-with-preview>-->
 
 
-    <!--<div style="display: flex; align-items: center; justify-content: center">-->
 
-    <!--<span style="width: 80px;">-->
-    <!--question:-->
-    <!--</span>-->
-    <!--<app-audio-recorder-->
-    <!--[audioUrl]="it['q_audio_url']"-->
-    <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
-    <!--</app-audio-recorder>-->
 
-    <!--</div>-->
 
-    <!--<div style="display: flex; align-items: center; justify-content: center">-->
 
-    <!--<span style="width: 80px;">-->
-    <!--answer:-->
-    <!--</span>-->
-    <!--<app-audio-recorder-->
-    <!--[audioUrl]="it['a_audio_url']"-->
-    <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
-    <!--</app-audio-recorder>-->
 
-    <!--</div>-->
 
 
 
-    <!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
-    <!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
-    <!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
-    <!--</nz-radio-group>-->
 
 
-  </div>
 
 
 
-  <div nz-col nzSpan="8" class="add-btn-box" >
+<!--<app-audio-recorder-->
+  <!--[audioUrl]="item.audio_url"-->
+  <!--(audioUploaded)="onAudioUploadSuccess($event)"-->
+<!--&gt;</app-audio-recorder>-->
+
+  <!--<div *ngFor="let it of picArr; let i = index"-->
+  <!--nz-col nzSpan="8" >-->
+
+
+
+    <!--<div class="item-box">-->
+
+
+      <!--<app-upload-image-with-preview-->
+        <!--style="width: 100%"-->
+        <!--[picUrl]="it.pic_url"-->
+        <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
+      <!--&gt;</app-upload-image-with-preview>-->
+
+
+
+      <!--<div style="display: flex; justify-items: center; padding-top: 10px">-->
+        <!--<app-audio-recorder-->
+          <!--[audioUrl]="it.audio_url"-->
+          <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it)">-->
+        <!--</app-audio-recorder>-->
+
+        <!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
+          <!--<i nz-icon type="close"></i>-->
+        <!--</button>-->
+      <!--</div>-->
 
-    <!--<div style="width: 100%; height: 100%;">-->
-    <button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"
-            (click)="addPic()">
-      <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
-      Add
-    </button>
     <!--</div>-->
 
+    <!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;-->
 
+    <!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;-->
+    <!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
+    <!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
+    <!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
+    <!--&lt;!&ndash;</button>&ndash;&gt;-->
+    <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
-  </div>
+
+    <!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
+    <!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
+    <!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
+    <!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
+    <!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
 
 
+    <!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
 
+    <!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
+    <!--&lt;!&ndash;question:&ndash;&gt;-->
+    <!--&lt;!&ndash;</span>&ndash;&gt;-->
+    <!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
+    <!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
+    <!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
+    <!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
 
+    <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
+    <!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
 
+    <!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
+    <!--&lt;!&ndash;answer:&ndash;&gt;-->
+    <!--&lt;!&ndash;</span>&ndash;&gt;-->
+    <!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
+    <!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
+    <!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
+    <!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
 
+    <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
 
 
-  <!--<div style="padding-bottom: 30px;">-->
+    <!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;-->
+    <!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
+    <!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
+    <!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
 
-    <!--<h5> title-sound: </h5>-->
-    <!--<app-audio-recorder-->
-      <!--[audioUrl]="item.contentObj.title_audio_url"-->
-      <!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">-->
-    <!--</app-audio-recorder>-->
 
   <!--</div>-->
 
 
-  <!--<div style="padding-bottom: 30px;">-->
 
-    <!--<h5> bg-sound: </h5>-->
-    <!--<app-audio-recorder-->
-      <!--[audioUrl]="item.contentObj.bg_audio_url"-->
-      <!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">-->
-    <!--</app-audio-recorder>-->
+  <!--<div nz-col nzSpan="8" class="add-btn-box" >-->
+
+    <!--&lt;!&ndash;<div style="width: 100%; height: 100%;">&ndash;&gt;-->
+    <!--<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"-->
+            <!--(click)="addPic()">-->
+      <!--<i nz-icon nzType="plus-circle" nzTheme="outline"></i>-->
+      <!--Add-->
+    <!--</button>-->
+    <!--&lt;!&ndash;</div>&ndash;&gt;-->
+
+
 
   <!--</div>-->
 
-  <!--<span style="margin-bottom: 20px"> 10 : 23 </span>-->
 
-  <!--<div *ngFor="let it of picArr; let i = index">-->
 
 
-    <!--<span> pic-{{i + 1}}: </span>-->
-    <!--<div style="display: flex; align-items: center; padding-bottom: 20px">-->
 
-      <!--<div style="width: 40%; padding-right: 20px">-->
-        <!--<app-upload-image-with-preview-->
-          <!--[picUrl]="it.pic_url"-->
-          <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
-        <!--&gt;</app-upload-image-with-preview>-->
-      <!--</div>-->
 
-      <!--<div  class="pic-sound-box">-->
 
-        <!--<div nz-row style="width: 50%; padding-bottom: 20px;">-->
 
-          <!--<div *ngFor="let it2 of it.soundArr; let i2 = index"  nz-col nzSpan="8">-->
-            <!--<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>-->
-          <!--</div>-->
 
-        <!--</div>-->
 
-        <!--<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">-->
-          <!--<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>-->
-          <!--<app-audio-recorder-->
-            <!--[audioUrl]="it2.audio_url"-->
-            <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">-->
-          <!--</app-audio-recorder>-->
-        <!--</div>-->
+  <!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;-->
 
-      <!--</div>-->
+    <!--&lt;!&ndash;<h5> title-sound: </h5>&ndash;&gt;-->
+    <!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
+      <!--&lt;!&ndash;[audioUrl]="item.contentObj.title_audio_url"&ndash;&gt;-->
+      <!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">&ndash;&gt;-->
+    <!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
 
+  <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
-    <!--</div>-->
 
-  <!--</div>-->
+  <!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;-->
 
+    <!--&lt;!&ndash;<h5> bg-sound: </h5>&ndash;&gt;-->
+    <!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
+      <!--&lt;!&ndash;[audioUrl]="item.contentObj.bg_audio_url"&ndash;&gt;-->
+      <!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">&ndash;&gt;-->
+    <!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
 
+  <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
-  <!--<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">-->
+  <!--&lt;!&ndash;<span style="margin-bottom: 20px"> 10 : 23 </span>&ndash;&gt;-->
 
+  <!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index">&ndash;&gt;-->
 
-    <!--<div *ngFor="let it of picArr; let i = index"-->
-         <!--nz-col nzSpan="8" >-->
 
-      <!--<div class="item-box">-->
+    <!--&lt;!&ndash;<span> pic-{{i + 1}}: </span>&ndash;&gt;-->
+    <!--&lt;!&ndash;<div style="display: flex; align-items: center; padding-bottom: 20px">&ndash;&gt;-->
 
+      <!--&lt;!&ndash;<div style="width: 40%; padding-right: 20px">&ndash;&gt;-->
+        <!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
+          <!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
+          <!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
+        <!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
+      <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
-        <!--<h5> id-{{i+1}} </h5>-->
+      <!--&lt;!&ndash;<div  class="pic-sound-box">&ndash;&gt;-->
 
-        <!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
-          <!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
-          <!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
-            <!--<i nz-icon type="close"></i>-->
-          <!--</button>-->
-        <!--</div>-->
+        <!--&lt;!&ndash;<div nz-row style="width: 50%; padding-bottom: 20px;">&ndash;&gt;-->
 
+          <!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index"  nz-col nzSpan="8">&ndash;&gt;-->
+            <!--&lt;!&ndash;<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>&ndash;&gt;-->
+          <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
-        <!--<app-upload-image-with-preview-->
-          <!--style="width: 100%"-->
-          <!--[picUrl]="it.pic_url"-->
-          <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
-        <!--&gt;</app-upload-image-with-preview>-->
+        <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
+        <!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">&ndash;&gt;-->
+          <!--&lt;!&ndash;<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>&ndash;&gt;-->
+          <!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
+            <!--&lt;!&ndash;[audioUrl]="it2.audio_url"&ndash;&gt;-->
+            <!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">&ndash;&gt;-->
+          <!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
+        <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
-        <!--<div style="display: flex; align-items: center; justify-content: center">-->
+      <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
-          <!--<span style="width: 80px;">-->
-            <!--question:-->
-          <!--</span>-->
-          <!--<app-audio-recorder-->
-            <!--[audioUrl]="it['q_audio_url']"-->
-            <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
-          <!--</app-audio-recorder>-->
 
-        <!--</div>-->
+    <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
-        <!--<div style="display: flex; align-items: center; justify-content: center">-->
+  <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
-          <!--<span style="width: 80px;">-->
-            <!--answer:-->
-          <!--</span>-->
-          <!--<app-audio-recorder-->
-            <!--[audioUrl]="it['a_audio_url']"-->
-            <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
-          <!--</app-audio-recorder>-->
 
-        <!--</div>-->
 
+  <!--&lt;!&ndash;<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">&ndash;&gt;-->
 
 
-        <!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
-          <!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
-          <!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
-        <!--</nz-radio-group>-->
+    <!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index"&ndash;&gt;-->
+         <!--&lt;!&ndash;nz-col nzSpan="8" >&ndash;&gt;-->
 
+      <!--&lt;!&ndash;<div class="item-box">&ndash;&gt;-->
 
-      <!--</div>-->
 
+        <!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;-->
 
+        <!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;-->
+          <!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
+          <!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
+            <!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
+          <!--&lt;!&ndash;</button>&ndash;&gt;-->
+        <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
 
-  <!--</div>-->
+        <!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
+          <!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
+          <!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
+          <!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
+        <!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
 
 
+        <!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
 
+          <!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
+            <!--&lt;!&ndash;question:&ndash;&gt;-->
+          <!--&lt;!&ndash;</span>&ndash;&gt;-->
+          <!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
+            <!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
+            <!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
+          <!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
 
+        <!--&lt;!&ndash;</div>&ndash;&gt;-->
 
+        <!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
 
-</div>
+          <!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
+            <!--&lt;!&ndash;answer:&ndash;&gt;-->
+          <!--&lt;!&ndash;</span>&ndash;&gt;-->
+          <!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
+            <!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
+            <!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
+          <!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
+
+        <!--&lt;!&ndash;</div>&ndash;&gt;-->
+
+
+
+        <!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;-->
+          <!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
+          <!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
+        <!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
+
+
+      <!--&lt;!&ndash;</div>&ndash;&gt;-->
+
+
+
+
+  <!--&lt;!&ndash;</div>&ndash;&gt;-->
+
+
+
+
+
+
+<!--</div>-->
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index fe8f5f4ec40ed32051afb9c811f77fb0b780ba11..0ab9a90ac7f69516abac1a1446f2adf4b900260d 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -5,50 +5,4 @@
   width: 100%;
   height: 100%;
 
-
-
-
-
-
-  .item-box{
-
-    width: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    flex-direction: column;
-
-    padding: 10px;
-    padding-bottom: 5vw;
-    padding-top: 5vw;
-  }
-
-
-  .pic-sound-box {
-    width: 50%;
-    display: flex;
-    //align-items: center;
-    flex-direction: column
-  }
-
-
-  .add-btn-box {
-
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    //width: 180px;
-    height: 20vw;
-    //background: #FFDC00;
-
-    padding: 10px;
-    padding-top: 5vw;
-
-
-  }
-
-
 }
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index 166f73602f7076d0d7ff5bcea8564c99175242e8..427ef173645ed1f30bd12aea56265dabf4ada80a 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -9,30 +9,10 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
 })
 export class FormComponent implements OnInit, OnChanges, OnDestroy {
 
-  picArr = [];
-
-  _item: any;
-
-
-  KEY = 'hw_000';
-
-
-
-
-
-  // @Input()
-  set item(item) {
-    this._item = item;
-    // this.init();
-
-  }
-  get item() {
-    return this._item;
-  }
-
-  @Output()
-  update = new EventEmitter();
-
+  // 储存数据用
+  saveKey = "test_0011";
+  // 储存对象
+  item;
 
 
   constructor(private appRef: ApplicationRef) {
@@ -43,162 +23,68 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
   ngOnInit() {
 
     this.item = {};
-    this.item.contentObj = {};
 
-    const getData = (<any> window).courseware.getData;
-    getData((data) => {
+    // 获取存储的数据
+    (<any> window).courseware.getData((data) => {
 
       if (data) {
         this.item = data;
-      } else {
-        this.item = {};
-      }
-
-      if ( !this.item.contentObj ) {
-        this.item.contentObj = {};
       }
 
-      console.log('~data:', data);
       this.init();
       this.refresh();
 
-    }, this.KEY);
+    }, this.saveKey);
 
-    // this.initData();
   }
-  ngOnChanges() {
-
-  }
-
-  ngOnDestroy() {
-  }
-
 
-  init() {
-
-    if (this.item.contentObj.picArr) {
-      this.picArr = this.item.contentObj.picArr;
-    } else {
-      this.picArr = this.getDefaultPicArr();
-      this.item.contentObj.picArr = this.picArr;
-    }
-
-    console.log('item:' , this.item);
-    // this.picArr = this.getDefaultPicArr();
-    // this.item.contentObj.picArr = this.picArr;
-    // console.log('this.item:;', this.picArr);
 
+  ngOnChanges() {
   }
 
-  getDefaultPicArr() {
-    const arr = [];
-    // for (let i = 0; i < 4; i ++) {
-    //   const data = {};
-    //   data['pic_url'] = '';
-    //
-    //   const soundArr = [];
-    //   for (let i = 0; i < 3; i++) {
-    //     const tmpData = {};
-    //     tmpData['answer'] = false;
-    //     tmpData['audio_url'] = '';
-    //     soundArr.push(tmpData);
-    //   }
-    //   data['soundArr'] = soundArr;
-    //
-    //   arr.push(data);
-    // }
-
-    return arr;
+  ngOnDestroy() {
   }
 
 
 
-  initData() {
-
-
-  }
-
-
-  deleteItem(data) {
-    const index = this.picArr.indexOf(data);
-    if (index !== -1) {
-      this.picArr.splice(index, 1);
-    }
+  init() {
 
-    // this.update.emit(this.item);
-    this.save();
   }
 
 
+  /**
+   * 储存图片数据
+   * @param e
+   */
+  onImageUploadSuccess(e, key) {
 
-
-
-
-
-  onImageUploadSuccessByItem(e, item, id = null) {
-
-    if (id != null) {
-      item[id + '_pic_url'] = e.url;
-    } else {
-      item.pic_url = e.url;
-    }
-
-    this.save();
-    // this.update.emit(this.item);
-
-    // console.log('this.item: ', this.item);
+      this.item[key] = e.url;
+      this.save();
   }
 
+  /**
+   * 储存音频数据
+   * @param e
+   */
+  onAudioUploadSuccess(e, key) {
 
-
-
-  onAudioUploadSuccessByItem(e, item, id = null) {
-
-    if (id != null) {
-      item[id + '_audio_url'] = e.url;
-    } else {
-      item.audio_url = e.url;
-    }
-    // this.update.emit(this.item);
+    this.item[key] = e.url;
     this.save();
   }
 
 
 
-  addPic() {
-    this.picArr.push({
-      pic_url: '',
-      audio_url: '',
-      // text: '',
-      // radioValue: 'A'
-    });
-
-    this.saveItem();
-  }
-
-  radioClick(it, radioValue) {
-    it.radioValue = radioValue;
-
-    this.saveItem();
-  }
-
-  clickCheckBox() {
-    console.log(' in clickCheckBox');
-    this.saveItem();
-  }
-
-
-  saveItem() {
-    // this.update.emit(this.item);
-    this.save();
-  }
-
-
+  /**
+   * 储存数据
+   */
   save() {
-    (<any> window).courseware.setData(this.item, null, this.KEY);
+    (<any> window).courseware.setData(this.item, null, this.saveKey);
     this.refresh();
   }
 
+  /**
+   * 刷新 渲染页面
+   */
   refresh() {
     setTimeout(() => {
       this.appRef.tick();
diff --git a/src/app/play/Unit.ts b/src/app/play/Unit.ts
index 6553101eb784c9a45ad195e67ac9ebdf91ef5d82..b08a8f92a706c4b174e8d7facc20bdcc95e59ec9 100644
--- a/src/app/play/Unit.ts
+++ b/src/app/play/Unit.ts
@@ -359,7 +359,7 @@ export class ColorSpr extends MySprite {
   g = 0;
   b = 0;
 
-  createGSCanvas(){
+  createGSCanvas() {
 
     if (!this.img) {
       return;
@@ -1327,6 +1327,16 @@ export function removeItemFromArr(arr, item) {
 
 
 
+export function getPosDistance(sx, sy, ex, ey) {
+
+  const _x = ex - sx;
+  const _y = ey - sy;
+  const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
+  return len;
+}
+
+
+
 
 
 
@@ -1370,13 +1380,6 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
 }
 
 
-export function getPosDistance(sx, sy, ex, ey) {
-
-  const _x = ex - sx;
-  const _y = ey - sy;
-  const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
-  return len;
-}
 
 export function delayCall(callback, second) {
   const tween = new TWEEN.Tween(this)
diff --git a/src/app/play/play.component.scss b/src/app/play/play.component.scss
index 98bc27615cd8dac681e1e1aa12f8ce5d4a03b824..bbda49566c0a6aa2c621e2f863caf1849e492572 100644
--- a/src/app/play/play.component.scss
+++ b/src/app/play/play.component.scss
@@ -1,9 +1,7 @@
 .game-container {
   width: 100%;
   height: 100%;
-  //background-image: url("/assets/listen-read-circle/bg.jpg");
   background: #ffffff;
-  background-repeat: no-repeat;
   background-size: cover;
 }
 
@@ -19,11 +17,3 @@
   src: url("../../assets/font/BRLNSDB.TTF") ;
 }
 
-
-//
-//
-//@font-face
-//{
-//  font-family: 'RoundedBold';
-//  src: url("../../assets/font/ArialRoundedBold.otf") ;
-//}
diff --git a/src/app/play/play.component.ts b/src/app/play/play.component.ts
index 52c4ddd51b0fda8fef4ab7b35c301c7a3144a8af..5e69db6206ef258722c88dcd5f8fdb4c9d9d4c99 100644
--- a/src/app/play/play.component.ts
+++ b/src/app/play/play.component.ts
@@ -1,12 +1,8 @@
 import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
 
 import {
-  MySprite,
   Label,
-  moveItem,
-  rotateItem,
-  removeItemFromArr,
-  ShapeRect,
+  MySprite, tweenChange,
 
 } from './Unit';
 import {res, resAudio} from './resources';
@@ -14,7 +10,6 @@ import {res, resAudio} from './resources';
 import {Subject} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';
 
-import * as _ from 'lodash';
 import TWEEN from '@tweenjs/tween.js';
 
 
@@ -26,36 +21,23 @@ import TWEEN from '@tweenjs/tween.js';
   styleUrls: ['./play.component.scss']
 })
 export class PlayComponent implements OnInit, OnDestroy {
-  // 数据
-  _data;
-
-  @Input()
-  set data(data) {
-    this._data = data;
-  }
-  get data() {
-    return this._data;
-  }
-
-  @Input()
-  sid;
 
   @ViewChild('canvas') canvas: ElementRef;
   @ViewChild('wrap') wrap: ElementRef;
-  canvasWidth = 1280;
-  canvasHeight = 720;
 
-  canvasBaseW = 1280;
-  canvasBaseH = 720;
+  // 数据
+  data;
 
   ctx;
-  fps = 0;
-  frametime = 0;  // 上一帧动画的时间,   两帧时间差
 
+  canvasWidth = 1280; // canvas实际宽度
+  canvasHeight = 720; // canvas实际高度
 
-  mx;
-  my; // 点击坐标
+  canvasBaseW = 1280; // canvas 资源预设宽度
+  canvasBaseH = 720;  // canvas 资源预设高度
 
+  mx; // 点击x坐标
+  my; // 点击y坐标
 
 
   // 资源
@@ -67,806 +49,121 @@ export class PlayComponent implements OnInit, OnDestroy {
   animationId: any;
   winResizeEventStream = new Subject();
 
-
   audioObj = {};
+
   renderArr;
   mapScale = 1;
 
   canvasLeft;
   canvasTop;
 
-
-  canTouch = true;
-
-
-  KEY = 'hw_000';
-
-  // -----
-  picArr;
-
-  pageLabel;
-  leftBtn;
-  rightBtn;
-  bgLayer;
-  curPageIndex;
+  saveKey = 'test_0011';
 
 
+  btnLeft;
+  btnRight;
+  pic1;
+  pic2;
 
-  hotZoneArr;
-
-  picIndex = 0;
-
-
-  bgArr;
-  endPageArr;
-  gameEndFlag;
-  showPetalFlag;
-  bg;
-
-
+  canTouch = true;
 
+  curPic;
 
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.winResizeEventStream.next();
-
-  }
-
-
-  ngOnInit() {
-
-
-    const getData = (<any> window).courseware.getData;
-    getData((data) => {
-
-      if (data && typeof data == 'object') {
-        this.data = data;
-      } else {
-        this.data = {};
-      }
-
-      console.log('data:' , data);
-      if (!this.data.contentObj) {
-        this.data.contentObj = {};
-      }
-
-      this.initDefaultData();
-
-
-
-      this.initAudio();
-      this.initImg();
-      this.initListener();
-
-    }, this.KEY);
-
-
-    //
-    // // this.initAudio();
-    // this.initImg();
-    // this.initListener();
-  }
-
-
-
-
-
-  initDefaultData() {
-
-
-    let picArr = this.data.contentObj.picArr;
-    // console.log('picArr: ', picArr);
-    if (!picArr || picArr.length == 0) {
-
-
-      const picArr = [];
-      for (let i = 0; i < 2; i++) {
-        picArr.push({
-          'pic_url': 'assets/play/default/pic.jpg',
-          'audio_url': 'assets/play/default/audio.mp3'
-        });
-      }
-
-      this.data.contentObj.picArr = picArr;
-
-    }
-
-
-  }
-
-  ngOnDestroy() {
-    window['curCtx'] = null;
-    window.cancelAnimationFrame(this.animationId);
-    this.gameEndFlag = true;
-  }
-
-  initData() {
-
-    this.canvasWidth = this.wrap.nativeElement.clientWidth;
-    this.canvasHeight = this.wrap.nativeElement.clientHeight;
-
-    this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
-    this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
-
-
-    const sx = this.canvasWidth / this.canvasBaseW;
-    const sy = this.canvasHeight / this.canvasBaseH;
-    const s = Math.min(sx, sy);
-    this.mapScale = s;
-
-    // this.mapScale = this.canvasWidth / this.canvasBaseW;
-    // this.mapScale = this.canvasHeight / this.canvasBaseH;
-    this.renderArr = [];
-
-    console.log(' in initData', this.data);
-
-
-
-
-
-
-    this.canTouch = true;
-
-    this.curPageIndex = 0;
-
-    // this.downFlag = false;
-
-    this.endPageArr = [];
-
-    // this.clockUpdateFlag = false;
-
-    if (!this.data.contentObj.picArr) {
-      this.data.contentObj.picArr = [];
-    }
-    this.picArr = this.data.contentObj.picArr;
-
-    this.picIndex = 0;
-
-
-
-  }
-
-
-
-
-
-  initAudio() {
-
-    const contentObj = this.data.contentObj;
-    if (!contentObj) { return; }
-
-
-
-    // const addAudio = (key) => {
-    //   const audioUrl = contentObj[key];
-    //   if (audioUrl) {
-    //     const audio = new Audio();
-    //     audio.src = audioUrl;
-    //     audio.load();
-    //     this.audioObj[key] = audio;
-    //   }
-    // }
-    //
-    // for (let i = 0; i < 4; i ++) {
-    //   const key = i + '_audio_url';
-    //   addAudio(key);
-    // }
-    //
-    // addAudio('audio_url');
-    //
-
-
-    const addUrlToAudioObj = (audioUrl) => {
-
-      if (audioUrl) {
-
-        // console.log('audioUrl:', audioUrl);
-        const audio = new Audio();
-        audio.src = audioUrl;
-        audio.load();
-        this.audioObj[audioUrl] = audio;
-      }
-    };
-
-
-    let arr = contentObj.picArr;
-
-    if (arr) {
-      // console.log('arr: ', arr);
-      for (let i = 0; i < arr.length; i++) {
-        addUrlToAudioObj(arr[i].audio_url);
-      }
-    }
-
-
-
-
-
-
-
-    const audioObj = this.audioObj;
-    const addOneAudio = (key, url, vlomue = 1, loop = false, callback = null) => {
-
-      const audio = new Audio();
-      audio.src = url;
-      audio.load();
-      audio.loop = loop;
-      audio.volume = vlomue;
-
-      audioObj[key] = audio;
-
-      if (callback) {
-        audio.onended = () => {
-          callback();
-        };
-      }
-    };
-
-
-    addOneAudio('click', this.rawAudios.get('click'), 0.3);
-    // addOneAudio('angry', this.rawAudios.get('angry'), 1);
-    // addOneAudio('cow_start', this.rawAudios.get('cow_start'), 1);
-    // addOneAudio('eat', this.rawAudios.get('eat'), 1);
-    // addOneAudio('grass', this.rawAudios.get('grass'), 1);
-    // addOneAudio('happy', this.rawAudios.get('happy'), 1);
-    // addOneAudio('right', this.rawAudios.get('right'), 1);
-    // addOneAudio('wrong', this.rawAudios.get('wrong'), 1);
-
-
-
-    //
-    // const titleUrl = this.data.contentObj.title_audio_url;
-    // if (titleUrl) {
-    //
-    //   this.titleAudio.src = titleUrl;
-    //   this.titleAudio.load();
-    // }
-
-
-
-    // this.bgAudio.src = 'assets/bat-mail/music/bg.mp3';
-    // this.bgAudio.load();
-    // this.bgAudio.loop = true;
-    // this.bgAudio.volume = 0.5;
-    //
-    // this.wrongAudio.src = 'assets/common/music/wrong.mp3';
-    // this.wrongAudio.load();
-    //
-    // this.rightAudio.src = 'assets/common/music/right.mp3';
-    // this.rightAudio.load();
-    //
-    // this.successAudio.src = 'assets/magic-hat/music/finish.mp3';
-    // this.successAudio.load();
-    //
-    // this.successAudio.onended = () => {
-    //   // this.showSuccessAudio();
-    // };
-
-
-  }
-
-  initImg() {
-
-    const contentObj = this.data.contentObj;
-    if (contentObj) {
-
-
-      const addPicUrl = (url) => {
-        if (url) {
-            this.rawImages.set(url, url);
-          }
-      };
-
-
-      let arr = this.data.contentObj.picArr;
-      if (arr) {
-
-        for (let i = 0; i < arr.length; i++) {
-          addPicUrl( arr[i].pic_url);
-        }
-      }
-
-
-    }
-
-
-    // this.initFontImg();
-
-
-
-    // 预加载资源
-
-    this.loadResources().then(() => {
-      window["air"].hideAirClassLoading(this.KEY,this.data);
-      // this.setfontData();
-      this.init();
-      this.update();
-    });
-
-  }
-
-  initFontImg() {
-
-
-
-    // const fontbaseUrlW = 'assets/mechanical/letter/';
-    // const fontDataW = {};
-    //
-    // let num = 97;
-    // for (let i = 0; i < 26; i++) {
-    //
-    //   const key = String.fromCharCode(num + i);  // 'a'
-    //   const url = fontbaseUrlW + key + '.png';
-    //
-    //   this.rawImages.set(url, url);
-    //   fontDataW[key] = url;
-    // }
-    //
-    //
-    // this.fontDataW = fontDataW;
-  }
-
-  setfontData() {
-
-    // for (let key in this.fontDataW) {
-    //   this.fontDataW[key] = this.images.get(this.fontDataW[key]);
-    // }
-  }
-
-
-
-
-
-
-
-
-  init() {
-
-    this.initData();
-    this.initCtx();
-
-    this.initView();
-
-
-
-
-  }
-
-  initCtx() {
-
-    this.ctx = this.canvas.nativeElement.getContext('2d');
-    this.canvas.nativeElement.width = this.canvasWidth;
-    this.canvas.nativeElement.height = this.canvasHeight;
-
-    window['curCtx'] = this.ctx;
-
-
-  }
-
-
-  initView() {
-
-    this.initBg();
-    this.initPic();
-    this.initBottomRight();
-
-
-    this.refreshPageLabel();
-
-
-  }
-
-  initBottomRight() {
-
-    const px = this.canvasWidth - 100 * this.mapScale;
-    const py = this.canvasHeight - 50 * this.mapScale;
-    const offX = 40 * this.mapScale;
-
-
-
-    const leftBtn = new MySprite();
-    leftBtn.init(this.images.get('btn_left'));
-    leftBtn.setScaleXY(this.mapScale);
-    leftBtn.x = px - offX;
-    leftBtn.y = py;
-
-    const rightBtn = new MySprite();
-    rightBtn.init(this.images.get('btn_right'));
-    rightBtn.setScaleXY(this.mapScale);
-    rightBtn.x = px + offX;
-    rightBtn.y = py;
-
-    this.renderArr.push(leftBtn);
-    this.renderArr.push(rightBtn);
-
-    const textBg = new MySprite();
-    textBg.init(this.images.get('text_bg'));
-    textBg.setScaleXY(this.mapScale);
-    textBg.x = px;
-    textBg.y = py - 65 * this.mapScale;
-    this.renderArr.push(textBg);
-
-
-
-
-    const label = new Label();
-    label.text = '0 / 0';
-    label.fontName = 'BRLNSDB';
-    label.fontSize = 24;
-    label.fontColor = '#ffffff';
-    label.textAlign = 'center';
-    label.setMaxSize( textBg.width * textBg.scaleX * 0.9 );
-    textBg.addChild(label);
-
-
-    this.leftBtn = leftBtn;
-    this.rightBtn = rightBtn;
-    this.pageLabel = label;
-
-    if (this.picArr.length <= 1) {
-      this.leftBtn.visible = false;
-      this.rightBtn.visible = false;
-      textBg.visible = false;
-    }
-  }
-
-
-  refreshPageLabel() {
-
-    const label = this.pageLabel;
-    label.text = (this.curPageIndex + 1) + ' / ' + this.picArr.length;
-
-    this.showAudio();
-  }
-
-  showAudio() {
-    const data = this.picArr[this.curPageIndex];
-    const audio = this.audioObj[data.audio_url];
-    if (audio) {
-      audio.play();
-    }
-  }
-
-
-
-
-  initPic() {
-
-
-
-    for (let i = 0; i < this.picArr.length; i++) {
-
-      const data = this.picArr[i];
-
-      const pic = new MySprite();
-      pic.init(this.images.get(data.pic_url));
-      // pic.x = this.canvasWidth / 2;
-      // pic.y = this.canvasHeight / 2;
-
-      const maxW = this.canvasWidth * 0.9;
-      const maxH = this.canvasHeight * 0.9;
-      const sx = maxW / pic.width;
-      const sy = maxH / pic.height;
-      const s = Math.min(sx, sy);
-      pic.setScaleXY(s);
-      // pic.setRadius(50 * this.mapScale);
-
-
-      const picBg = new ShapeRect();
-      picBg.setSize(pic.width * pic.scaleX, pic.height * pic.scaleY);
-      picBg.x = this.canvasWidth / 2 + this.canvasWidth * i;
-      picBg.y = this.canvasHeight / 2;
-      picBg.init();
-      picBg.fillColor = '#ffffff';
-      // picBg.setRadius(50 * this.mapScale);
-      picBg.setShadow(0, 10, 20, 'rgba(0,0,0,0.3)');
-      // picBg.alpha = 0;
-      // this.renderArr.push(picBg);
-      // this.renderArr.push(picShadow);
-
-      picBg.addChild(pic);
-
-      this.bgLayer.addChild(picBg);
-    }
-
-
-
-
-
-
-  }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  initBg() {
-
-    this.bgArr = [];
-
-    const bg = new MySprite();
-    bg.init(this.images.get('bg'));
-    bg.x = this.canvasWidth / 2;
-    bg.y = this.canvasHeight / 2;
-    const sx = this.canvasWidth / bg.width;
-    const sy = this.canvasHeight / bg.height;
-    const s = Math.max(sx, sy);
-    bg.setScaleXY(s);
-    this.renderArr.push(bg);
-
-
-    this.bgLayer = new MySprite();
-    this.renderArr.push(this.bgLayer);
-
-  }
-
-
-
-
-
-
-
-
-  mapDown(event) {
-
-
-    if (!this.canTouch) {
-      return;
-    }
-
-
-    if (this.checkClickTarget(this.leftBtn)) {
-      this.lastPageClick();
-      return;
-    }
-
-    if (this.checkClickTarget(this.rightBtn)) {
-      this.nextPageClick();
-      return;
-    }
-
-
-  }
-
-
-
-
-
-  mapMove(event) {
-
-  }
-
-
-  mapUp(event) {
-
-
-  }
-
-
-
-  nextPageClick() {
-    console.log(' in leftBtnClick');
-
-    if (this.curPageIndex >= this.picArr.length - 1) {
-      return;
-    }
-
-    this.curPageIndex ++;
-
-    this.changePageByIndex();
-  }
-
-  lastPageClick() {
-
-    console.log(' in rightBtnClick');
-
-
-    if (this.curPageIndex <= 0) {
-      return;
-    }
-
-    this.curPageIndex --;
-
-    this.changePageByIndex();
-
-  }
-
-
-  changePageByIndex() {
-
-    console.log(' in changePageByIndex');
-    this.canTouch = false;
-
-
-    moveItem(this.bgLayer, -this.curPageIndex * this.canvasWidth, 0, 1, () => {
-      this.canTouch = true;
-      this.refreshPageLabel();
-      // this.resetCurData();
-    }, TWEEN.Easing.Cubic.Out);
-
-
-    this.playAudio('click', true);
-  }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  update() {
-
-
-    this.animationId = window.requestAnimationFrame(this.update.bind(this));
-    // 清除画布内容
-    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-
-    TWEEN.update();
-
-
-
-    this.updateArr(this.renderArr);
-
   }
 
 
+  ngOnInit() {
 
+    this.data = {};
 
+    // 获取数据
+    const getData = (<any> window).courseware.getData;
+    getData((data) => {
 
+      if (data && typeof data == 'object') {
+        this.data = data;
+      }
+      // console.log('data:' , data);
 
+      // 初始化 各事件监听
+      this.initListener();
 
+      // 若无数据 则为预览模式 需要填充一些默认数据用来显示
+      this.initDefaultData();
 
+      // 初始化 音频资源
+      this.initAudio();
+      // 初始化 图片资源
+      this.initImg();
+      // 开始预加载资源
+      this.load();
 
+    }, this.saveKey);
 
-  updateItem(item) {
-    if (item) {
-      item.update();
-    }
-  }
-
-  updateArr(arr) {
-    if (!arr) {
-      return;
-    }
-    for (let i = 0; i < arr.length; i++) {
-      arr[i].update(this);
-    }
-  }
-
-
-  initHotZone() {
-
-
-    let curBgRect;
-    if (this.bg) {
-      curBgRect = this.bg.getBoundingBox();
-    }
-
-    let oldBgRect = this.data.contentObj.bgItem.rect;
-    if (!oldBgRect) {
-      oldBgRect = curBgRect;
-    }
-
-    const rate = curBgRect.width / oldBgRect.width;
-
-
-    // this.imgArr = [];
-    // const arr = this.data.contentObj.imgItemArr;
-    this.hotZoneArr = [];
-    const arr = this.data.contentObj.hotZoneItemArr;
-    if (!arr) return;
-
-    for (let i = 0; i < arr.length; i++) {
-
-      const data = JSON.parse(JSON.stringify(arr[i]));
-      // const img = {pic_url: data.pic_url};
-
-      data.rect.x *= rate;
-      data.rect.y *= rate;
-      data.rect.width *= rate;
-      data.rect.height *= rate;
-
-      data.rect.x += curBgRect.x;
-      data.rect.y += curBgRect.y;
-
-      const hotZone = this.getHotZoneItem(data);
-      hotZone.alpha = 0;
-      this.hotZoneArr.push(hotZone);
-
-    }
-
-  }
-
-
-  getHotZoneItem(data) {
-    const saveRect = data.rect;
-    const item = new ShapeRect(this.ctx);
-    item.setSize(saveRect.width, saveRect.height);
-    item.x = saveRect.x ;
-    item.y = saveRect.y ;
-    item['data'] = data;
-
-    this.renderArr.push(item);
+  }
 
-    return item;
+  ngOnDestroy() {
+    window['curCtx'] = null;
+    window.cancelAnimationFrame(this.animationId);
   }
 
 
-  showEndPatal() {
-    this.endPageArr = [];
-    this.showPetalFlag = true;
-    this.addPetal();
-  }
+  load() {
 
-  stopEndPatal() {
-    this.endPageArr = [];
-    this.showPetalFlag = false;
+    // 预加载资源
+    this.loadResources().then(() => {
+      window["air"].hideAirClassLoading(this.saveKey, this.data);
+      this.init();
+      this.update();
+    });
   }
 
-  addPetal() {
 
-    if (!this.showPetalFlag) {
-      return;
-    }
+  init() {
 
-    const petal = this.getPetal();
-    this.endPageArr.push(petal);
+    this.initCtx();
+    this.initData();
+    this.initView();
+  }
 
-    moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => {
-      removeItemFromArr(this.endPageArr, petal);
-    });
+  initCtx() {
+    this.canvasWidth = this.wrap.nativeElement.clientWidth;
+    this.canvasHeight = this.wrap.nativeElement.clientHeight;
+    this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
+    this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
 
-    rotateItem(petal, petal['tr'], petal['time']);
 
-    setTimeout(() => {
-      this.addPetal();
-    }, 200);
+    this.ctx = this.canvas.nativeElement.getContext('2d');
+    this.canvas.nativeElement.width = this.canvasWidth;
+    this.canvas.nativeElement.height = this.canvasHeight;
 
+    window['curCtx'] = this.ctx;
   }
 
 
-  getPetal() {
 
-    const petal = new MySprite(this.ctx);
 
-    const id = Math.ceil( Math.random() * 3 );
-    petal.init(this.images.get('petal_' + id));
 
-    const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
-    petal.setScaleXY(randomS);
 
-    const randomR = Math.random() * 360;
-    petal.rotation = randomR;
-
-    const randomX = Math.random() * this.canvasWidth;
-    petal.x = randomX;
-    petal.y = -petal.height / 2 * petal.scaleY;
+  updateItem(item) {
+    if (item) {
+      item.update();
+    }
+  }
 
-    const randomT = 2 + Math.random() * 5;
-    petal['time'] = randomT;
+  updateArr(arr) {
+    if (!arr) {
+      return;
+    }
+    for (let i = 0; i < arr.length; i++) {
+      arr[i].update(this);
+    }
+  }
 
-    let randomTR = 360 * Math.random(); // - 180;
-    if (Math.random() < 0.5) { randomTR *= -1; }
-    petal['tr'] = randomTR;
 
-    return petal;
-  }
 
 
 
@@ -912,7 +209,6 @@ export class PlayComponent implements OnInit, OnDestroy {
         firstTouch = false;
         removeMouseListener();
       }
-      console.log('touch down');
       setMxMyByTouch(e);
       this.mapDown(e);
     };
@@ -930,7 +226,6 @@ export class PlayComponent implements OnInit, OnDestroy {
         firstTouch = false;
         removeTouchListener();
       }
-      console.log('mouse down');
       setMxMyByMouse(e);
       this.mapDown(e);
     };
@@ -995,43 +290,6 @@ export class PlayComponent implements OnInit, OnDestroy {
 
 
 
-
-  showArr(arr) {
-    if (!arr) {
-      return;
-    }
-    for (let i = 0; i < arr.length; i++) {
-      arr[i].visible = true;
-    }
-  }
-
-  hideArr(arr) {
-    if (!arr) {
-      return;
-    }
-    for (let i = 0; i < arr.length; i++) {
-      arr[i].visible = false;
-    }
-  }
-
-
-
-  IsPC() {
-
-    if (window['ELECTRON']) {
-      return false; // 封装客户端标记
-    }
-
-
-    if (document.body.ontouchmove !== undefined && document.body.ontouchmove !== undefined) {
-      return false;
-    } else {
-      return true;
-    }
-
-  }
-
-
   loadResources() {
     const pr = [];
     this.rawImages.forEach((value, key) => {// 预加载图片
@@ -1045,7 +303,7 @@ export class PlayComponent implements OnInit, OnDestroy {
       pr.push(p);
     });
 
-    this.rawAudios.forEach((value, key) => {// 预加载图片
+    this.rawAudios.forEach((value, key) => {// 预加载音频
 
       const a = this.preloadAudio(value)
         .then(() => {
@@ -1091,6 +349,8 @@ export class PlayComponent implements OnInit, OnDestroy {
 
 
 
+
+
   checkClickTarget(target) {
 
     const rect = target.getBoundingBox();
@@ -1123,22 +383,297 @@ export class PlayComponent implements OnInit, OnDestroy {
     return false;
   }
 
-  getPosByAngle(angle, len) {
 
-    const radian = angle * Math.PI / 180;
-    const x = Math.sin(radian) * len;
-    const y = Math.cos(radian) * len;
 
-    return {x, y};
+
+
+  addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
+
+    const audioObj = this.audioObj;
+
+    if (url == null) {
+      url = key;
+    }
+
+    this.rawAudios.set(key, url);
+
+    const audio = new Audio();
+    audio.src = url;
+    audio.load();
+    audio.loop = loop;
+    audio.volume = vlomue;
+
+    audioObj[key] = audio;
+
+    if (callback) {
+      audio.onended = () => {
+        callback();
+      };
+    }
+  }
+
+  addUrlToImages(url) {
+    this.rawImages.set(url, url);
+  }
+
+
+
+
+
+
+  // ======================================================编写区域==========================================================================
+
+
+
+
+
+  /**
+   * 添加默认数据 便于无数据时的展示
+   */
+  initDefaultData() {
+
+    if (!this.data.pic_url) {
+      this.data.pic_url = 'assets/play/default/pic.jpg';
+      this.data.pic_url_2 = 'assets/play/default/pic.jpg';
+    }
+  }
+
+
+  /**
+   * 添加预加载图片
+   */
+  initImg() {
+
+    this.addUrlToImages(this.data.pic_url);
+    this.addUrlToImages(this.data.pic_url_2);
+
+  }
+
+  /**
+   * 添加预加载音频
+   */
+  initAudio() {
+
+    // 音频资源
+    this.addUrlToAudioObj(this.data.audio_url);
+    this.addUrlToAudioObj(this.data.audio_url_2);
+
+    // 音效
+    this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
+
+  }
+
+
+
+  /**
+   * 初始化数据
+   */
+  initData() {
+
+    const sx = this.canvasWidth / this.canvasBaseW;
+    const sy = this.canvasHeight / this.canvasBaseH;
+    const s = Math.min(sx, sy);
+    this.mapScale = s;
+
+    // this.mapScale = sx;
+    // this.mapScale = sy;
+
+
+    this.renderArr = [];
+
+
+
+  }
+
+
+
+  /**
+   * 初始化试图
+   */
+  initView() {
+
+
+    this.initPic();
+
+    this.initBottomPart();
+
+  }
+
+  initBottomPart() {
+
+    const btnLeft = new MySprite();
+    btnLeft.init(this.images.get('btn_left'));
+    btnLeft.x = this.canvasWidth - 150 * this.mapScale;
+    btnLeft.y = this.canvasHeight - 100 * this.mapScale;
+
+    btnLeft.setScaleXY(this.mapScale);
+
+    this.renderArr.push(btnLeft);
+
+    this.btnLeft = btnLeft;
+
+
+
+    const btnRight = new MySprite();
+    btnRight.init(this.images.get('btn_right'));
+    btnRight.x = this.canvasWidth - 50 * this.mapScale;
+    btnRight.y = this.canvasHeight - 100 * this.mapScale;
+    btnRight.setScaleXY(this.mapScale);
+
+    this.renderArr.push(btnRight);
+
+    this.btnRight = btnRight;
+  }
+
+  initPic() {
+
+    const maxW = this.canvasWidth * 0.7;
+
+    const pic1 = new MySprite();
+    pic1.init(this.images.get(this.data.pic_url));
+    pic1.x = this.canvasWidth / 2;
+    pic1.y = this.canvasHeight / 2;
+    pic1.setScaleXY(maxW / pic1.width);
+
+    this.renderArr.push(pic1);
+    this.pic1 = pic1;
+
+
+    const label1 = new Label();
+    label1.text = this.data.text;
+    label1.textAlign = 'center';
+    label1.fontSize = 50;
+    label1.fontName = 'BRLNSDB';
+    label1.fontColor = '#ffffff';
+
+    pic1.addChild(label1);
+
+
+
+
+
+    const pic2 = new MySprite();
+    pic2.init(this.images.get(this.data.pic_url_2));
+    pic2.x = this.canvasWidth / 2 + this.canvasWidth;
+    pic2.y = this.canvasHeight / 2;
+    pic2.setScaleXY(maxW / pic2.width);
+
+    this.renderArr.push(pic2);
+    this.pic2 = pic2;
+
+    this.curPic = pic1;
+  }
+
+
+  btnLeftClicked() {
+
+    this.lastPage();
+  }
+
+  btnRightClicked() {
+
+    this.nextPage();
+  }
+
+  lastPage() {
+
+    if (this.curPic == this.pic1) {
+      return;
+    }
+
+    this.canTouch = false;
+
+    const moveLen = this.canvasWidth;
+    tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
+    tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
+      this.canTouch = true;
+      this.curPic = this.pic1;
+    });
+  }
+
+  nextPage() {
+
+    if (this.curPic == this.pic2) {
+      return;
+    }
+
+    this.canTouch = false;
+
+    const moveLen = this.canvasWidth;
+    tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
+    tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
+      this.canTouch = true;
+      this.curPic = this.pic2;
+    });
+  }
+
+  pic1Clicked() {
+    this.playAudio(this.data.audio_url);
+  }
+
+  pic2Clicked() {
+    this.playAudio(this.data.audio_url_2);
+  }
+
+
+
+
+
+  mapDown(event) {
+
+    if (!this.canTouch) {
+      return;
+    }
+
+    if ( this.checkClickTarget(this.btnLeft) ) {
+      this.btnLeftClicked();
+      return;
+    }
+
+    if ( this.checkClickTarget(this.btnRight) ) {
+      this.btnRightClicked();
+      return;
+    }
+
+    if ( this.checkClickTarget(this.pic1) ) {
+      this.pic1Clicked();
+      return;
+    }
+
+    if ( this.checkClickTarget(this.pic2) ) {
+      this.pic2Clicked();
+      return;
+    }
+
+  }
+
+  mapMove(event) {
+
+  }
+
+  mapUp(event) {
 
   }
 
-  getPosDistance(sx, sy, ex, ey) {
 
-    const _x = ex - sx;
-    const _y = ey - sy;
-    const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
-    return len;
+
+  update() {
+
+    // ----------------------------------------------------------
+    this.animationId = window.requestAnimationFrame(this.update.bind(this));
+    // 清除画布内容
+    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    // tween 更新动画
+    TWEEN.update();
+    // ----------------------------------------------------------
+
+
+
+    this.updateArr(this.renderArr);
+
+
   }
 
+
+
 }
diff --git a/src/app/play/resources.js b/src/app/play/resources.js
index 57a1c19221fb47661ada0ff3eb780fa4a121d226..d9b584c92bc24d0c04374cb1568478fdbefba9c7 100644
--- a/src/app/play/resources.js
+++ b/src/app/play/resources.js
@@ -1,10 +1,9 @@
 const res = [
 
-  ['bg', "assets/play/bg.jpg"],
+  // ['bg', "assets/play/bg.jpg"],
   ['btn_left', "assets/play/btn_left.png"],
   ['btn_right', "assets/play/btn_right.png"],
-  ['text_bg', "assets/play/text_bg.png"],
-
+  // ['text_bg', "assets/play/text_bg.png"],
 
 ];
 
@@ -12,10 +11,7 @@ const res = [
 
 const resAudio = [
 
-
-  // ['click', "assets/play/music/click.mp3"],
-
-
+  ['click', "assets/play/music/click.mp3"],
 
 ];
 
diff --git a/src/app/services/config.service.spec.ts b/src/app/services/config.service.spec.ts
deleted file mode 100644
index c8fff3dd4ab88ffec8b7c5a6b090c59a8ce2b314..0000000000000000000000000000000000000000
--- a/src/app/services/config.service.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ConfigService } from './config.service';
-
-describe('ConfigService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: ConfigService = TestBed.get(ConfigService);
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/src/app/services/config.service.ts b/src/app/services/config.service.ts
deleted file mode 100644
index ebbf2a7beadaa6a28cb6ed7eb912969d6f624d2b..0000000000000000000000000000000000000000
--- a/src/app/services/config.service.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Injectable } from '@angular/core';
-import {HttpClient} from "@angular/common/http";
-import {Observable} from "rxjs";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ConfigService {
-
-  configUrl = 'proxy.conf.json';
-
-  constructor( private http: HttpClient ) { }
-
-  getConfig() {
-    return this.http.get(this.configUrl)
-      .pipe(
-
-
-      );
-  }
-
-
-  showConfig() {
-    this.getConfig()
-      .subscribe((data) => {
-        console.log('data:', data);
-
-      });
-  }
-
-
-  test(data) {
-
-    // return new Promise<any> {
-    //   return new Promise((resolve, reject) => {
-    //     this.http.get(url).subscribe((res) => {
-    //       resolve(res);
-    //     }, reject);
-    //   });
-    //
-    return this.get('/api/login');
-    // return this.http.post('/login', data);
-  }
-
-
-  get(url: string): Promise<any> {
-    return new Promise((resolve, reject) => {
-      this.http.get(url).subscribe((res) => {
-        resolve(res);
-      }, reject);
-    });
-  }
-
-  // login(user): Observable<any> {
-  //
-  //
-  //   return this.http.post('/login', user).pipe(
-  //     tap((data => {
-  //       console.log('login', data)
-  //       localStorage.setItem('token', _.get(data, 'token'));
-  //       delete data['token'];
-  //       localStorage.setItem('info', JSON.stringify(data));
-  //       this.getInfoPromise = this.load('/user/getInfo');
-  //     }))
-  //   );
-  // }
-}