Commit df86d223 authored by limingzhe's avatar limingzhe

update guide

parent a0d7069a
<div class="model-content"> <div class="model-content">
<button style="margin: 4vw; display: flex; align-items: center" nz-button nzType="primary" nzGhost (click)="guideBtnClick(true)">
<i nz-icon type="play-circle"></i>
1分钟简易教程
</button>
...@@ -10,15 +15,33 @@ ...@@ -10,15 +15,33 @@
<div class="item-box" style="width: 30%"> <div class="item-box" style="width: 30%">
<h5> 转盘图文-{{i+1}}</h5> <h5 style="padding-bottom: 1vw"> 扇叶-{{i+1}}</h5>
<div style="display: flex; align-items: center">
<span style="padding-right: 10px"> 类型:</span>
<nz-radio-group [(ngModel)]="it.optionType" (ngModelChange)="save()">
<label nz-radio nzValue="A">文本</label>
<label nz-radio nzValue="B">图片</label>
</nz-radio-group>
</div>
<input style="width: 80%; margin-bottom: 0.5vw" type="text" nz-input placeholder="" [(ngModel)]="it.title" (blur)="saveItem()">
<app-upload-image-with-preview <div *ngIf="it.optionType == 'A'" style="width: 80%">
style="width: 100%" <input style="width: 100%; margin-bottom: 0.5vw" type="text" nz-input placeholder="点击输入文本内容" [(ngModel)]="it.title" (blur)="saveItem()">
[picUrl]="it.pic_url" </div>
(imageUploaded)="onImageUploadSuccessByItem($event, it)"
></app-upload-image-with-preview> <div *ngIf="it.optionType == 'B'" style="width: 100%">
<app-upload-image-with-preview
style="width: 100%"
[picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it)"
></app-upload-image-with-preview>
</div>
<div style="display: flex; justify-items: center; padding-top: 10px"> <div style="display: flex; justify-items: center; padding-top: 10px">
...@@ -35,26 +58,29 @@ ...@@ -35,26 +58,29 @@
<!--中间部分--> <!--中间部分-->
<div style="width: 30%;margin-left: 5%"> <div style="width: 30%;margin-left: 5%; padding: 1vw">
<div style="display: flex; align-items: center; margin-bottom: 0.5vw"> <div style="display: flex; align-items: center; margin-bottom: 0.5vw">
<span style="width: 50px;"> 题干: </span> <span style="width: 50px;"> 题干: </span>
<input type="text" nz-input placeholder="" [(ngModel)]="it.question" (blur)="saveItem()"> <input type="text" nz-input placeholder="点击输入题干内容" [(ngModel)]="it.question" (blur)="saveItem()">
</div> </div>
<div style="display: flex; align-items: center; margin-bottom: 0.5vw"> <div style="display: flex; align-items: center; margin-bottom: 0.5vw">
<span style="width: 80px;"> 题干音频: </span> <!--<span style="width: 80px;"> 题干音频: </span>-->
<app-audio-recorder <!--<app-audio-recorder-->
[audioUrl]="it.audio_url" <!--[audioUrl]="it.audio_url"-->
(audioUploaded)="onAudioUploadSuccessByItem($event, it)"> <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it)">-->
</app-audio-recorder> <!--</app-audio-recorder>-->
</div> </div>
<div style="width: 70%; margin: auto; padding-top: 0.5vw"> <div style="width: 90%; margin: auto; padding-top: 0.5vw; display: flex; align-items: center">
<span style="width: 100px;"> 题干图片: (可选项)</span>
<app-upload-image-with-preview <app-upload-image-with-preview
style="width: 100%" style="width: 100%"
...@@ -63,11 +89,11 @@ ...@@ -63,11 +89,11 @@
></app-upload-image-with-preview> ></app-upload-image-with-preview>
<div style="display: flex; align-items: center; margin-bottom: 0.5vw; padding-top: 0.5vw"> <div style="display: flex; align-items: center; margin-bottom: 0.5vw; padding-top: 0.5vw">
<span style="width: 80px;"> 图片音频: </span> <!--<span style="width: 80px;"> 图片音频: </span>-->
<app-audio-recorder <!--<app-audio-recorder-->
[audioUrl]="it.pic_audio_url" <!--[audioUrl]="it.pic_audio_url"-->
(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'pic')"> <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'pic')">-->
</app-audio-recorder> <!--</app-audio-recorder>-->
</div> </div>
</div> </div>
...@@ -100,14 +126,14 @@ ...@@ -100,14 +126,14 @@
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<label nz-radio nzValue="{{j}}" (click)="saveItem()">{{ans.id}}</label> <label nz-radio nzValue="{{j}}" (click)="saveItem()">{{ans.id}}</label>
<input type="text" nz-input placeholder="" [(ngModel)]="ans.text" (blur)="saveItem()"> <input type="text" nz-input placeholder="点击输入文本答案" [(ngModel)]="ans.text" (blur)="saveItem()">
</div> </div>
<div style="width: 200px; margin: auto;"> <div style="width: 200px; margin: auto;">
<app-audio-recorder <!--<app-audio-recorder-->
[audioUrl]="ans[j + '_text_audio_url']" <!--[audioUrl]="ans[j + '_text_audio_url']"-->
(audioUploaded)="onAudioUploadSuccessByItem($event, ans, j + '_text')"> <!--(audioUploaded)="onAudioUploadSuccessByItem($event, ans, j + '_text')">-->
</app-audio-recorder> <!--</app-audio-recorder>-->
</div> </div>
</div> </div>
...@@ -133,11 +159,11 @@ ...@@ -133,11 +159,11 @@
</div> </div>
<div style="width: 100%; padding-left: 20%"> <div style="width: 100%; padding-left: 20%">
<app-audio-recorder <!--<app-audio-recorder-->
style="width: 100%; margin: auto" <!--style="width: 100%; margin: auto"-->
[audioUrl]="ans[j +'_pic_audio_url']" <!--[audioUrl]="ans[j +'_pic_audio_url']"-->
(audioUploaded)="onAudioUploadSuccessByItem($event, ans, j + '_pic')"> <!--(audioUploaded)="onAudioUploadSuccessByItem($event, ans, j + '_pic')">-->
</app-audio-recorder> <!--</app-audio-recorder>-->
</div> </div>
...@@ -362,3 +388,17 @@ ...@@ -362,3 +388,17 @@
</div> </div>
<div *ngIf="showGuideAudio" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-items: center; background: rgba(0,0,0,.7)" (click)="guideBtnClick(false)">
<div style="margin: auto;">
<video style="width: 60vw; height: auto" src="assets/guide/guide.mp4" controls="controls" type="video/mp4">
您的浏览器不支持 audio 标签。
</video>
</div>
</div>
...@@ -27,6 +27,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -27,6 +27,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
KEY = 'hw_003'; KEY = 'hw_003';
answerType = 'A'; answerType = 'A';
showGuideAudio;
...@@ -98,6 +99,40 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -98,6 +99,40 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj.picArr = this.picArr; this.item.contentObj.picArr = this.picArr;
} }
if (!this.item.contentObj.optionType) {
this.item.contentObj.optionType = 'A';
}
let tmpFlag = false;
for (let i = 0; i < this.picArr.length; i++) {
const data = this.picArr[i];
if (!data.optionType || !data.answerType) {
tmpFlag = true;
}
if (!data.optionType) {
if (data.pic_url) {
data.optionType = 'B';
} else {
data.optionType = 'A';
}
}
if (!data.answerType) {
if (data.question_pic_url) {
data.answerType = 'B';
} else {
data.answerType = 'A';
}
}
}
if (tmpFlag) {
this.save();
}
console.log('item:' , this.item); console.log('item:' , this.item);
// this.picArr = this.getDefaultPicArr(); // this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr; // this.item.contentObj.picArr = this.picArr;
...@@ -186,6 +221,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -186,6 +221,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
pic_url: '', pic_url: '',
audio_url: '', audio_url: '',
answerType: 'A', answerType: 'A',
optionType: 'A',
// text: '', // text: '',
// radioValue: 'A' // radioValue: 'A'
} }
...@@ -234,5 +270,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -234,5 +270,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
guideBtnClick(value) {
this.showGuideAudio = value;
}
} }
...@@ -261,6 +261,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -261,6 +261,7 @@ export class PlayComponent implements OnInit, OnDestroy {
pic_url: "", pic_url: "",
question: "The answer to the question is B.", question: "The answer to the question is B.",
question_pic_url: "assets/play/title.png", question_pic_url: "assets/play/title.png",
optionType: 'A',
title: (i + 1) title: (i + 1)
}; };
...@@ -341,6 +342,26 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -341,6 +342,26 @@ export class PlayComponent implements OnInit, OnDestroy {
// //
for (let i = 0; i < this.picArr.length; i++) {
const data = this.picArr[i];
if (!data.optionType) {
if (data.pic_url) {
data.optionType = 'B';
} else {
data.optionType = 'A';
}
}
if (!data.answerType) {
if (data.question_pic_url) {
data.answerType = 'B';
} else {
data.answerType = 'A';
}
}
}
} }
...@@ -1268,7 +1289,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1268,7 +1289,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const picData = this.picArr[i]; const picData = this.picArr[i];
let pic; let pic;
if (picData.pic_url) { if (picData.optionType == 'B') {
pic = new MySprite(this.ctx); pic = new MySprite(this.ctx);
pic.init(this.images.get(picData.pic_url)); pic.init(this.images.get(picData.pic_url));
} else { } else {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment