Commit a969312d authored by 李维's avatar 李维

更新表单结构

parent 1d46c8f2
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<div class="model-content">
<div class="audio-upload">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
点击开始游戏前的引导语
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.audio_url_guide" (audioUploaded)="onAudioUploadSuccessByItem($event, item, 'audio_url_guide')" ></app-audio-recorder>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
进入游戏出现蘑菇后的引导语
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.audio_url_guide_2" (audioUploaded)="onAudioUploadSuccessByItem($event, item, 'audio_url_guide_2')" ></app-audio-recorder>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
胜利结束语
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.audio_url_success" (audioUploaded)="onAudioUploadSuccessByItem($event, item, 'audio_url_success')" ></app-audio-recorder>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
失败结束语
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.audio_url_fail" (audioUploaded)="onAudioUploadSuccessByItem($event, item, 'audio_url_fail')" ></app-audio-recorder>
</div>
</div>
</div>
<div class="card-config">
<div *ngFor="let item of dataArray; let i = index" class="card-item" style="padding: 0.5vw;" >
<div *ngFor="let item of dataArray; let i = index" class="card-item" >
<div class="card-item-content border">
<div class="card-item-content">
<div class="title" >
......@@ -11,40 +45,73 @@
<div class="section-title" >
问题
</div>
<div class="section-content">
<div style="flex:1">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.question.text" (blur)="saveItem()" style="width: 250px;" />
</div>
<div class="section-content" style="flex-direction: column;">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
内容类型
</div>
<div style="flex:5">
<nz-select style="width: 250px;" [(ngModel)]="item.questionContentType" nzAllowClear nzPlaceHolder="请选择内容类型" (ngModelChange)="saveItem()">
<nz-option [nzValue]="1" nzLabel="文字"></nz-option>
<nz-option [nzValue]="2" nzLabel="音频"></nz-option>
<nz-option [nzValue]="3" nzLabel="图片"></nz-option>
<nz-option [nzValue]="4" nzLabel="文字+图片"></nz-option>
</nz-select>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.question.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item.question)" ></app-audio-recorder>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
问题类型
</div>
<div style="flex:5">
<nz-select style="width: 250px;" [(ngModel)]="item.questionType" nzAllowClear nzPlaceHolder="请选择类型" (ngModelChange)="saveItem()">
<nz-option [nzValue]="1" nzLabel="选择"></nz-option>
<nz-option [nzValue]="2" nzLabel="判断对错"></nz-option>
</nz-select>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
答案类型
</div>
<div style="flex:5">
<nz-select style="width: 250px;" [(ngModel)]="item.answerContentType" nzAllowClear nzPlaceHolder="请选择内容类型" (ngModelChange)="saveItem()">
<nz-option [nzValue]="1" nzLabel="文字"></nz-option>
<nz-option [nzValue]="3" nzLabel="图片"></nz-option>
<nz-option [nzValue]="4" nzLabel="文字+图片"></nz-option>
</nz-select>
</div>
</div>
<div *ngIf="item.questionContentType == 1 || item.questionContentType == 4" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.question.text" (blur)="saveItem()" style="width: 250px;" />
</div>
</div>
<div style="display: flex; margin-top: 20px;">
<label nz-checkbox [(ngModel)]="item.useText" (ngModelChange)="saveItem()">使用文本</label>
<label nz-checkbox [(ngModel)]="item.useImage" (ngModelChange)="saveItem()">使用图片</label>
<label nz-checkbox [(ngModel)]="item.userAudio" (ngModelChange)="saveItem()">使用音频</label>
<div *ngIf="item.questionContentType == 2" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.question.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item.question)" ></app-audio-recorder>
</div>
</div>
<div style="flex:1">
<div style="display: flex; ">
<div *ngIf="item.questionContentType == 3 || item.questionContentType == 4" style="flex:1">
<div style="display: flex;">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.question.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item.question)"></app-upload-image-with-preview>
<div style="width: 250px;" >
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.question.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item.question)"></app-upload-image-with-preview>
</div>
</div>
</div>
</div>
......@@ -52,13 +119,14 @@
</div>
<div class="section" >
<div *ngIf="item.questionType == 1" class="section" >
<div class="section-title" >
正确选项
</div>
<div class="section-content">
<div style="flex:10">
<div style="display: flex; margin-bottom: 10px;">
<div *ngIf="item.answerContentType == 1 || item.answerContentType == 4" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
......@@ -67,7 +135,7 @@
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div *ngIf="item.answerContentType == 3 || item.answerContentType == 4" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
......@@ -76,20 +144,14 @@
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<!-- <div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.choice.correct.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item.choice.correct)" ></app-audio-recorder>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<label nz-checkbox [(ngModel)]="item.choice.correct.useText" (ngModelChange)="saveItem()">文本</label>
<label nz-checkbox [(ngModel)]="item.choice.correct.useImage" (ngModelChange)="saveItem()">图片</label>
<label nz-checkbox [(ngModel)]="item.choice.correct.userAudio" (ngModelChange)="saveItem()">音频</label>
</div>
</div> -->
</div>
......@@ -99,20 +161,26 @@
</div>
</div>
<div class="section" >
<div *ngIf="item.questionType == 1" class="section" >
<div class="section-title" >
错误选项
<div *ngIf="item.choice.incorrect.length<3" style="text-align: center; float: right;">
<div *ngIf="item.answerContentType == 4 && item.choice.incorrect.length<3" style="text-align: center; float: right;">
<button nz-button nzType="primary" (click)="addChoice(i)" >
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加
</button>
</div>
<div *ngIf="item.answerContentType != 4 && item.choice.incorrect.length<2" style="text-align: center; float: right;">
<button nz-button nzType="primary" (click)="addChoice(i)" >
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加
</button>
</div>
</div>
<div class="section-content">
<div *ngFor="let choiceItem of item.choice.incorrect; let choiceIndex = index" style="width:220px; height:280px; border:1px solid #CCC; padding:5px; border-radius: 5px; margin: 0 10px;">
<div style="display: flex; margin-bottom: 10px;">
<div *ngFor="let choiceItem of item.choice.incorrect; let choiceIndex = index" style="width:350px; height:280px; border:1px solid #CCC; padding:5px; border-radius: 5px; margin: 0 10px;">
<div *ngIf="item.answerContentType == 1 || item.answerContentType == 4" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
......@@ -121,7 +189,7 @@
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div *ngIf="item.answerContentType == 3 || item.answerContentType == 4" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
......@@ -130,22 +198,16 @@
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<!-- <div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="choiceItem.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item.choiceItem)" ></app-audio-recorder>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<label nz-checkbox [(ngModel)]="choiceItem.useText" (ngModelChange)="saveItem()">文本</label>
<label nz-checkbox [(ngModel)]="choiceItem.useImage" (ngModelChange)="saveItem()">图片</label>
<label nz-checkbox [(ngModel)]="choiceItem.userAudio" (ngModelChange)="saveItem()">音频</label>
</div>
<div *ngIf="choiceIndex>0" style="text-align: center;">
</div> -->
<div *ngIf="item.choice.incorrect.length > 1" style="text-align: center;">
<button style="margin-top: 10px;" nz-button nzType="danger" (click)="deleteChoice(i, choiceIndex)" >
<span>删除此选项</span>
</button>
......@@ -154,6 +216,10 @@
</div>
</div>
<div *ngIf="item.questionType == 2" class="section" >
</div>
<div class="section" >
<div style="text-align: right; padding-right: 20px;">
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItem(i)" >
......@@ -167,11 +233,8 @@
<div class="card-item" style="padding: 0.5vw;" >
<button nz-button nzType="primary" class="add-btn" (click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建卡片组
添加题目
</button>
</div>
</div>
</div>
@import "../style/common_mixin";
.model-content {
padding: 20px;
.audio-upload {
border-radius: 20px;
border-style: dashed;
padding:20px;
margin-bottom: 10px;
}
.card-config {
width: 100%;
height: 100%;
margin-left: 10px;
display: flex;
flex-wrap: wrap;
.card-item{
flex:1;
.border {
border-radius: 20px;
border-style: dashed;
padding:20px;
width: 800px;
}
.card-item-content{
.title {
......
......@@ -66,23 +66,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
text:"",
image_url:"",
audio_url:"",
useText: false,
useImage: false,
useAudio: false,
questionShowType: 1,
questionType: 1, // 1-选择题 2-判断对错
},
choice:{
correct:{ useText: false, useImage: false, useAudio: false, text: "", image_url: "", audio_url: "" },
correct:{ showType: 1, text: "", image_url: "", audio_url: "" },
incorrect:[
{ useText: false, useImage: false, useAudio: false, text: "", image_url: "", audio_url: "" },
{ useText: false, useImage: false, useAudio: false, text: "", image_url: "", audio_url: "" },
{ useText: false, useImage: false, useAudio: false, text: "", image_url: "", audio_url: "" },
{ showType: 1, text: "", image_url: "", audio_url: "" },
{ showType: 1, text: "", image_url: "", audio_url: "" },
{ showType: 1, text: "", image_url: "", audio_url: "" },
]
}
};
}
cardChoiceData(){
return { useText: false, useImage: false, useAudio: false, text: "", image_url: "", audio_url: "" }
return { showType: 1, text: "", image_url: "", audio_url: "" }
}
getDefaultPicArr() {
......@@ -118,8 +117,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
onAudioUploadSuccessByItem(e, item) {
item.audio_url = e.url;
onAudioUploadSuccessByItem(e, item, key="audio_url") {
item[key] = e.url;
this.save();
}
onTitleAudioUploadSuccess(e) {
......
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