Commit 8f522f36 authored by Tt's avatar Tt

文本高亮完成

parent f80ce26d
No preview for this file type
......@@ -66,12 +66,14 @@ export class ComponentBase {
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key, it = this.item) {
onAudioUploadSuccess(e, key, it = this.item, audioName = null) {
let url = e.url;
let sp = url.split(".mp3");
let u = sp[0] + "_l.mp3";
it[key] = u;
it["audioName"] = e.name || "";
if(!audioName)audioName = key += "Name"
it.audioName = e.name || "";
console.log(e.name,audioName)
this.save();
}
......
......@@ -84,119 +84,179 @@
<div style="padding: 10px;background-color: #fff;">
<div class="border-dashed" style="margin: 20px;width: 1300px;">
<span style="margin-right: 20px;font-size: 18px;font-weight: bold;">提示开关 </span>
<nz-radio-group [ngModel]="item.tipSwitch" (ngModelChange)="customRadioChange($event, item,'tipSwitch')"
style="font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;">
<label nz-radio nzValue="1"></label>
<label nz-radio nzValue="0"></label>
</nz-radio-group>
<div *ngIf="item.tipSwitch == 1">
<span style="font-size: 20px;">提示动画: </span>
<app-upload-dragon-bone style="width: 100%" (save)="onDragonBoneSave($event,item)"
[skeJsonData]="item.imgAni.ske" [texJsonData]="item.imgAni.tex" [texPngData]="item.imgAni.png">
</app-upload-dragon-bone>
<div name="开始音频">
<span style="font-size: 20px;">开始音频: </span>
<div style="display:flex ;">
<div>
<span style="font-size: 20px;">提示背景: </span>
<div style="width:300px">
<app-upload-image-with-preview [picUrl]="item.tipBg"
(imageUploaded)="onImageUploadSuccess($event,'tipBg', item)"></app-upload-image-with-preview>
<app-audio-recorder [audioUrl]="item.auidoStart"
(audioUploaded)="onAudioUploadSuccess($event, 'auidoStart')">
</app-audio-recorder>
</div>
<div style="margin: 5px">
<span>{{ item.auidoStartName}}</span>
</div>
</div>
</div>
<div name="结束音频">
<span style="font-size: 20px;">结束音频: </span>
<div style="display:flex ;">
<div>
<span style="font-size: 20px;">提示内容: </span>
<input *ngIf="item.tipType == 'scroll'" type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
<div *ngIf="item.tipType == 'page'">
<div *ngFor="let page of item.tipPage; let m = index" style="margin-bottom: 5px; ">
<div style="display: flex;">
<div style="font-size: 20px;line-height:32px">页{{m+1}}</div>
<input style="width:700px;margin-left: 10px;" type="text" nz-input [(ngModel)]="page.title"
(blur)="save()">
<div style="margin-left: 20px;">
<app-audio-recorder [audioUrl]="page.audio"
(audioUploaded)="onAudioUploadSuccess($event, 'audio',page)">
<app-audio-recorder [audioUrl]="item.auidoEnd" (audioUploaded)="onAudioUploadSuccess($event, 'auidoEnd')">
</app-audio-recorder>
</div>
<button class="btn-red" style="width: 100px; height: 32px;margin-left: 20px;" nz-button nzType="default"
nzDanger (click)="removePage(m)">删除</button>
</div>
<div style="margin: 5px">
<span>{{ item.auidoEndName}}</span>
</div>
<button class="btn-blue" style="width: 150px; height: 32px;" nz-button nzType="default" nzDanger
(click)="addPage()">+增加提示内容</button>
</div>
</div>
<!-- <span style="font-size: 20px;">提示音频: </span>
<div name="肉饼引导音频">
<span style="font-size: 20px;">肉饼引导音频: </span>
<div style="display:flex ;">
<div>
<app-audio-recorder [audioUrl]="item.audio" (audioUploaded)="onAudioUploadSuccess($event, 'audio')">
<app-audio-recorder [audioUrl]="item.auidoMeet" (audioUploaded)="onAudioUploadSuccess($event, 'auidoMeet')">
</app-audio-recorder>
</div>
<div style="margin: 5px">
<span>{{ item.audioName}}</span>
<span>{{ item.auidoMeetName}}</span>
</div>
</div>
</div> -->
</div>
<div name="蔬菜引导音频">
<span style="font-size: 20px;">蔬菜引导音频: </span>
<div style="display:flex ;">
<div>
<app-audio-recorder [audioUrl]="item.auidoVegetable"
(audioUploaded)="onAudioUploadSuccess($event, 'auidoVegetable')">
</app-audio-recorder>
</div>
<div style="margin: 5px">
<span>{{ item.auidoVegetableName}}</span>
</div>
</div>
</div>
<div name="第一次完成音频">
<span style="font-size: 20px;">第一次完成音频: </span>
<div style="display:flex ;">
<div>
<span style="font-size: 20px;">游戏背景: </span>
<div style="width:300px">
<app-upload-image-with-preview [picUrl]="item.image"
(imageUploaded)="onImageUploadSuccess($event,'image', item)"></app-upload-image-with-preview>
<app-audio-recorder [audioUrl]="item.auidoFinish"
(audioUploaded)="onAudioUploadSuccess($event, 'auidoFinish')">
</app-audio-recorder>
</div>
<div style="margin: 5px">
<span>{{ item.auidoFinishName}}</span>
</div>
</div>
<div style="display: flex; align-items: center; ">
<h2> 题目分值: </h2>
</div>
<input type="text" nz-input [(ngModel)]="item.questionScore" (blur)="save()">
<span style="font-size: 20px;">结束动画: </span>
<!-- 切换开关
<span style="margin-right: 20px;font-size: 18px;font-weight: bold;">提示开关 </span>
<nz-radio-group [ngModel]="item.tipSwitch" (ngModelChange)="customRadioChange($event, item,'tipSwitch')"
style="font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;">
<label nz-radio nzValue="1">开</label>
<label nz-radio nzValue="0">关</label>
</nz-radio-group> -->
<!-- 龙骨 <span style="font-size: 20px;">提示动画: </span>
<app-upload-dragon-bone style="width: 100%" (save)="onDragonBoneSave($event,item)"
[skeJsonData]="item.endImgAni.ske" [texJsonData]="item.endImgAni.tex" [texPngData]="item.endImgAni.png">
</app-upload-dragon-bone>
<span style="font-size: 20px;">结束动画文本: </span>
<input type="text" nz-input [(ngModel)]="item.endImgTitle" (blur)="save()">
<div style="display: flex; align-items: center; ">
<h2> 跳转页面: </h2>
[skeJsonData]="item.imgAni.ske" [texJsonData]="item.imgAni.tex" [texPngData]="item.imgAni.png">
</app-upload-dragon-bone> -->
<!--图片
<span style="font-size: 20px;">提示背景: </span>
<div style="width:300px">
<app-upload-image-with-preview [picUrl]="item.tipBg"
(imageUploaded)="onImageUploadSuccess($event,'tipBg', item)"></app-upload-image-with-preview>
</div> -->
</div>
<input type="text" nz-input [(ngModel)]="item.jumpIdx" (blur)="save()">
<div style=" margin: 20px;width: 1000px;">
<div *ngFor="let question of item.questions; let i = index">
<div style="display: flex;margin-top: 20px;">
<div class="border-solid" style="min-width: 1000px;">
<div class="word-type-title">
题目{{i+1}}
</div>
<div name="题目标题">
<div style="width: 200px">
<span style="font-size: 20px;">题目标题</span>
<input type="text" nz-input [(ngModel)]="question.title" (blur)="save()">
</div>
</div>
<div class="border-dashed" style="margin: 20px;width: 1300px;">
<span style="font-size: 20px;">锦囊: </span>
<input type="text" nz-input [(ngModel)]="item.tips" (blur)="save()">
<div style="margin-top: 20px;">
<div name="题干部分">
<div class="word-type-option-title">
题干类型:
</div>
<div class="border-dashed" style="margin: 20px;width: 1300px;">
<h2>正文(空格分隔选词,回车换行):</h2>
<textarea rows="4" nz-input [(ngModel)]="item.contentMain" (blur)="changeMain()"></textarea>
<div style="margin-top: 5px;">
<nz-radio-group [(ngModel)]="question.mainType" (ngModelChange)="save()">
<label nz-radio nzValue="empty">
<span [style]="{color:question.mainType=='empty' ? '#169BD5':'#000'}"></span>
</label>
<label nz-radio nzValue="img">
<span [style]="{color:question.mainType=='img' ? '#169BD5':'#000'}">图片</span>
</label>
<label nz-radio nzValue="text">
<span [style]="{color:question.mainType=='text' ? '#169BD5':'#000'}">文字</span>
</label>
<label nz-radio nzValue="img_text">
<span [style]="{color:question.mainType=='img_text' ? '#169BD5':'#000'}">文字+图片</span>
</label>
</nz-radio-group>
</div>
<div>
<div class="option-img">
<div *ngIf="question.mainType=='img' || question.mainType =='img_text'" style="width: 200px;">
<span style="font-size: 20px;">图片:</span>
<app-upload-image-with-preview [picUrl]="question.mainImage"
(imageUploaded)="onImageUploadSuccess($event, 'mainImage',question)">
</app-upload-image-with-preview>
</div>
</div>
<div class="option-text">
<div class="border-dashed" style="margin: 20px;width: 1300px;">
<h2>点击文本设置空格:</h2>
<span *ngFor="let cont of item.contentArr; let i = index" style="margin-bottom: 5px; ">
<span *ngIf="cont.block" class="option-title-line" (click)="onBlock(cont,false)" [innerHtml]="cont.text"></span>
<span *ngIf="!cont.block" class="option-title" (click)="onBlock(cont,true)" [innerHtml]="cont.text"></span>
<div *ngIf="question.mainType=='text' || question.mainType =='img_text'" style="width: 1000px">
<span style="font-size: 20px;">文本:</span>
<div class="border-dashed" style="width: 900px;">
<h2>空格分隔选词:</h2>
<textarea rows="4" nz-input [(ngModel)]="question.mainText" (blur)="changeMain(i)"></textarea>
</div>
<div class="border-dashed" style="width: 900px;">
<h2>点击文本设置高亮:</h2>
<span *ngFor="let cont of question.mainTextArr; let i = index" style="margin-bottom: 5px; ">
<span *ngIf="cont.block" class="option-title-line" (click)="onBlock(cont,false)"
[innerHtml]="cont.text"></span>
<span *ngIf="!cont.block" class="option-title" (click)="onBlock(cont,true)"
[innerHtml]="cont.text"></span>
</span>
</div>
</div>
<div class="border-dashed" style="margin: 20px;width: 1300px;">
<h2>空格是否校验对错:</h2>
<div *ngFor="let cont of item.contentArr; let i = index" style="margin-bottom: 5px; ">
<div *ngIf="cont.block" class="border-solid" style="display: flex;">
<span style="margin-right: 20px;font-size: 18px;font-weight: bold;">{{cont.text}} </span>
<nz-radio-group [ngModel]="cont.check" (ngModelChange)="customRadioChange($event, cont,'check')"
style="font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;">
<label nz-radio nzValue="1">检查对错</label>
<label nz-radio nzValue="0">无对错</label>
</nz-radio-group>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 20px;">
<button class="btn-blue" style="width: 1000px; height: 50px;" nz-button nzType="default" nzDanger
(click)="addQuestion()">+增加题目</button>
</div>
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="null" [nzContent]="modalContent" [nzFooter]="modalFooter"
(nzOnCancel)="handleCancel()">
......@@ -210,4 +270,9 @@
<button nz-button nzType="primary" (click)="handleOk()">确定</button>
</ng-template>
</nz-modal>
</div>
\ No newline at end of file
</div>
</div>
</div>
\ No newline at end of file
......@@ -13,122 +13,24 @@ let replaceAll = function (str, s1, s2) {
})
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "wood_input";
// 1.猫动画可替换。
// 2.文本内容可替换。//字体随内容缩小。
// 3.语音替换。
// 4.背景可替换
// 5.3~10选项内容。
// 6.配置对应的坐标。
customTypeGroupArr = [
// {
// name: '发音动画',
// rect: true,
// animaSmall: true,
// audio: true,
// },
// {
// name: '发音图片',
// pic: true,
// audio: true,
// },
// {
// name: '发音区块',
// rect: true,
// audio: true,
// },
// {
// name: '变化文本',
// action: {
// type: 'text',
// option: [
// ['fontColor', '#000000'],
// ['fontSize', '100'],
// ['opacity', '0', '100']
// ]
// },
// },
// {
// name: '变化图片',
// action: {
// type: 'pic',
// option: [
// // ['scale', '1'],
// ['opacity', '0', '100']
// ]
// },
// },
// {
// name: '变化动画',
// action: {
// type: 'anima',
// option: [
// // ['scale', '1'],
// ['opacity', '0', '100']
// ]
// },
// },
{
name: '选项图片',
drag: true,
pic: true,
// audio: true,
},
// {
// name: '选项文本',
// drag: true,
// audio: true,
// action: {
// type: 'text',
// option: [
// ['fontColor', '#000000'],
// ['fontSize', '100'],
// ]
// },
// },
// {
// name: '拖拽结束区',
// rect: true,
// }
]
saveKey = "dg28_drag";
item = {
imgAni: {
ske: {},
tex: {},
png: {}
},
tipSwitch: 1,//提示功能开关
tipType: "page",
tipBg: '',
tipPage: [{ title: '', audio: '' }],
title: "",
audio: "",
audioName: "",
image: '',
jumpIdx: '',
endImgAni: {
ske: {},
tex: {},
png: {}
},
endImgTitle: "",
// 开始音频
auidoStart: "",
auidoStartName: "",
// 结束音频
auidoEnd: "",
auidoEndName: "",
// 肉饼引导音频
auidoMeet: "",
auidoMeetName: "",
// 蔬菜引导音频
auidoVegetable: "",
auidoVegetableName: "",
// 第一次完成音频
auidoFinish: "",
auidoFinishName: "",
points: "",
tips: '',
questionScore: 0,//分数
questions: [],
questionText: "",
......@@ -158,7 +60,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
console.log(new MetaFormCreator().create());
if (this.item.questions.length == 0) {
this.addquestion();
this.addQuestion();
}
}
......@@ -187,14 +89,6 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
}
removePage(idx) {
this.item.tipPage.splice(idx, 1);
this.save();
}
addPage() {
this.item.tipPage.push({ title: "", audio: "" })
this.save();
}
removequestion(idx) {
this.openDelete("确定删除题目?", () => {
......@@ -203,14 +97,15 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
})
}
addquestion() {
addQuestion() {
// 题目自带一堆东西不用添加选项部分
this.item.questions.push({
options: [],
type: "img"
title: "",//大标题
mainType: "",//题干类型
mainText: "",//题干文字
mainTextArr: [],//题干文字高亮
mainImage: "",//题干图片
});
while (this.item.questions[0].options.length < 3) {
this.addoption(0);
}
this.save();
}
ngChange(i, j) {
......@@ -229,10 +124,13 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this.save();
}
changeMain() {
changeMain(i) {
let question = this.item.questions[i]
//输出的数据可以识别到\n的换行符
let arr = this.item.contentMain.split(" ");
let oldArr = this.item.contentArr.concat();
let contentMain = question.mainText;
let contentArr = question.mainTextArr || [];
let arr = contentMain.split(" ");
let oldArr = contentArr.concat();
let contetArr = arr.map(ar => {
let obj = {
text: replaceAll(`${ar}`, "\n", "<br/>"),
......@@ -249,7 +147,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
}
return obj;
})
this.item.contentArr = contetArr;
question.mainTextArr = contetArr;
console.log(contetArr)
this.save();
}
......
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