Commit cea8eb1e authored by 李维's avatar 李维

dev commit

parent 24356bfa
<div class="model-content"> <div class="model-content">
<div class="card-config"> <div class="card-config">
<div class="card-item">
<div class="border">
<div class="card-item" style="padding: 0.5vw;" >
<div class="card-item-content border" style="min-width: 1280px">
<div class="card-item-content">
<div class="title" >
题目素材
</div>
<div class="section" >
<div class="section-content">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1; text-align: right; margin-right: 10px;">
<span>显示选项</span><span> :</span>
</div>
<div style="flex:3">
<nz-radio-group [(ngModel)]="item.contentObj.mainQuestion.type" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="'Text'">文字</label>
<label nz-radio [nzValue]="'Image'">图片</label>
<label nz-radio [nzValue]="'LongAudio'">长音频</label>
</nz-radio-group>
</div>
<div style="flex:8">
<div *ngIf="item.contentObj.mainQuestion.type=='Image'">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.contentObj.mainQuestion.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item.contentObj.mainQuestion, 'image_url')"></app-upload-image-with-preview>
</div>
<div *ngIf="item.contentObj.mainQuestion.type=='Text'">
<textarea type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.mainQuestion.text" (blur)="saveItem()" ></textarea>
</div>
<div *ngIf="item.contentObj.mainQuestion.type=='LongAudio'">
<app-audio-recorder [audioUrl]="item.contentObj.mainQuestion.longAudio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item)" ></app-audio-recorder>
</div>
</div>
</div>
</div>
</div>
<div class="section" >
<div class="section-content">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1; text-align: right; margin-right: 10px;">
<span>短音频</span><span> :</span>
</div>
<div style="flex:3">
<app-audio-recorder [audioUrl]="item.contentObj.mainQuestion.longAudio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item)" ></app-audio-recorder>
</div>
<div style="flex:8"></div>
</div>
</div>
</div>
<!-- 上层卡片 -->
<div class="title" >
上层卡片
</div>
<div class="section">
<div class="section-content">
<div *ngFor="let it of item.contentObj.textUp; let i = index" class="card-item" >
<div style="display: flex;">
<div style="flex:1; text-align: right; margin-right: 10px;">
<span>{{i+1}}</span><span> :</span>
</div>
<div style="flex:3">
<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()"/>
</div>
<div style="flex:8" style="margin-left: 10px;">
<span>对应下层卡片</span><span> : </span>
<nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" [(ngModel)]="it.lineTo" (ngModelChange)="save()" style="min-width: 500px;">
<nz-option *ngFor="let option of options;" [nzLabel]="option+1" [nzValue]="option"></nz-option>
</nz-select>
</div>
<div style="flex:4">
<div style="float:right; text-align: left; padding-left: 20px;">
<button style="vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemUp(i)" [disabled]="i==0">
<i nz-icon nzType="up" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
<span style="float: right;">上移</span>
</button>
<button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemDown(i)" [disabled]="i==item.contentObj.textUp.length-1">
<i nz-icon nzType="down" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
<span style="float: right;">下移</span>
</button>
<button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="danger" (click)="deleteItem(item.contentObj.textUp, i)" >
<span>删除</span>
</button>
</div>
</div>
</div>
</div>
<div class="card-item" style="padding: 0.5vw; text-align: right;" >
<button nz-button nzType="primary" (click)="addItem(item.contentObj.textUp)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建卡片
</button>
</div>
</div>
</div>
<!-- 下层卡片 -->
<div class="title" >
下层卡片
</div>
<div class="section" >
<div class="section-content">
<div *ngFor="let it of item.contentObj.textDown; let i = index" class="card-item" >
<div style="display: flex;">
<div style="flex:1; text-align: right; margin-right: 10px;">
<span>{{i+1}}</span><span> :</span>
</div>
<div style="flex:3">
<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()"/>
</div>
<div style="flex:8">
</div>
<div style="flex:4">
<div style="float:right; text-align: left; padding-left: 20px;">
<button style="vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemUp(i)" [disabled]="i==0">
<i nz-icon nzType="up" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
<span style="float: right;">上移</span>
</button>
<button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemDown(i)" [disabled]="i==item.contentObj.textDown.length-1">
<i nz-icon nzType="down" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
<span style="float: right;">下移</span>
</button>
<button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="danger" (click)="deleteItem(item.contentObj.textDown, i)" >
<span>删除</span>
</button>
</div>
</div>
</div>
</div>
<div class="card-item" style="padding: 0.5vw; text-align: right;" >
<button nz-button nzType="primary" (click)="addItem(item.contentObj.textDown)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建卡片
</button>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -5,14 +5,9 @@ ...@@ -5,14 +5,9 @@
.card-config { .card-config {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
flex-direction:column;
.card-item{ .card-item{
flex:1;
margin-bottom: 40px; margin-bottom: 40px;
width: 100%;
.border { .border {
border-radius: 20px; border-radius: 20px;
border-style: dashed; border-style: dashed;
...@@ -26,7 +21,7 @@ ...@@ -26,7 +21,7 @@
text-align: center; text-align: center;
} }
.section{ .section{
border-top: 1px solid ; border-top: 1px dashed ;
padding: 10px 0; padding: 10px 0;
.section-title{ .section-title{
font-size: 24px; font-size: 24px;
...@@ -34,6 +29,7 @@ ...@@ -34,6 +29,7 @@
} }
.section-content{ .section-content{
display: flex; display: flex;
flex-direction: column;
margin: 5px 0 10px 0; margin: 5px 0 10px 0;
} }
} }
......
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
import defauleFormData from '../../assets/play/default/formData/defaultData.js'
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
...@@ -6,14 +7,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -6,14 +7,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
styleUrls: ['./form.component.scss'] styleUrls: ['./form.component.scss']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any; _item: any;
dataArray: Array<Object> = [];
hotZoneItemArr: Array<Object> = [];
bgItem: Object;
KEY = 'DataKey_PU03'; KEY = 'DataKey_PU03';
options = []
set item(item) { set item(item) {
this._item = item; this._item = item;
...@@ -43,7 +42,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -43,7 +42,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj = {}; this.item.contentObj = {};
} }
this.init(); this.init();
this.refresh(); // this.refresh();
this.save()
}, this.KEY); }, this.KEY);
} }
ngOnChanges() { ngOnChanges() {
...@@ -53,96 +53,80 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -53,96 +53,80 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() { ngOnDestroy() {
} }
saveData(e){
this.bgItem = e.bgItem;
this.hotZoneItemArr.length = 0;
e.hotZoneItemArr.forEach(item => {
this.hotZoneItemArr.push(item)
});
this.save();
}
init() { init() {
if (this.item.contentObj.dataArray) { if(!this.item.contentObj || !this.item.contentObj.mainQuestion){
this.dataArray = this.item.contentObj.dataArray; this.item.contentObj = defauleFormData
} else {
this.dataArray = this.getDefaultPicArr();
this.item.contentObj.dataArray = this.dataArray;
}
if (this.item.contentObj.hotZoneItemArr) {
this.hotZoneItemArr = this.item.contentObj.hotZoneItemArr;
} else {
this.hotZoneItemArr = this.getDefaultPicArr();
this.item.contentObj.hotZoneItemArr = this.hotZoneItemArr;
}
if (this.item.contentObj.bgItem) {
this.bgItem = this.item.contentObj.bgItem;
} else {
this.bgItem = {}
this.item.contentObj.bgItem = this.bgItem;
} }
this.options = []
this.item.contentObj.textDown.forEach((item, index) => {
this.options.push(index)
});
} }
cardItemData(){ cardItemData(){
return { return {audio_url:"", type:"text", text:"", image_url:""}
audio_url: "",
image_url: "",
hotZoneIndex: -1
};
} }
cardChoiceData(){ cardChoiceData(){
return { isText: true, text: "", image_url: "" } return { isText: true, text: "", image_url: "" }
} }
getDefaultPicArr() {
let arr = [];
return arr;
}
initData() { initData() {
} }
addChoice(questionIndex) { handleMoveItemUp(index){
// let item = this.cardChoiceData(); if(index!=0){
// this.dataArray[questionIndex].choice.incorrect.push(item); this.item.contentObj.dataArray[index] = this.item.contentObj.dataArray.splice(index-1, 1, this.item.contentObj.dataArray[index])[0];
// this.saveItem(); }else{
this.item.contentObj.dataArray.push(this.item.contentObj.dataArray.shift());
}
this.save()
} }
onImageUploadSuccessByItem(e, item) { handleMoveItemDown(index){
item.image_url = e.url if(index!=this.item.contentObj.dataArray.length-1){
this.save(); this.item.contentObj.dataArray[index] = this.item.contentObj.dataArray.splice(index+1, 1, this.item.contentObj.dataArray[index])[0];
}else{
this.item.contentObj.dataArray.unshift( this.item.contentObj.dataArray.splice(index,1)[0]);
}
this.save()
} }
onAudioUploadSuccessByItem(e, item) { deleteItem(item, index){
item.audio_url = e.url; item.splice(index,1)
this.save(); this.save()
} }
onTitleAudioUploadSuccess(e) { addItem(item, type) {
this.item.contentObj.titleAudio_url = e.url; let newItem = null
this.save(); switch(type){
case "card": newItem = {text:"", lineTo: []}
default: newItem = {text:"", lineTo: []}
} }
this.options = []
this.item.contentObj.textDown.forEach((item, index) => {
this.options.push(index)
});
addItem() { item.push(newItem);
let item = this.cardItemData();
this.dataArray.push(item);
this.saveItem(); this.saveItem();
} }
radioClick(it, radioValue) { onImageUploadSuccessByItem(e, item, key) {
it.radioValue = radioValue; item[key] = e.url
this.saveItem(); this.save();
} }
clickCheckBox() {
this.saveItem(); onAudioUploadSuccessByItem(e, item, key) {
item[key] = e.url
this.save();
} }
saveItem() { saveItem() {
this.save(); this.save();
} }
...@@ -150,7 +134,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -150,7 +134,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
save() { save() {
(<any> window).courseware.setData(this.item, null, this.KEY); (<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh(); this.refresh();
// console.log("保存", this.item) console.log("保存", this.item)
} }
refresh() { refresh() {
......
...@@ -326,8 +326,19 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -326,8 +326,19 @@ export class PlayComponent implements OnInit, OnDestroy {
let enableImage = false; let enableImage = false;
let enableText = false; let enableText = false;
let enableLongAudio =true; let enableLongAudio = false;
let enableShortAudio = true; let enableShortAudio = false;
switch(this.g_formData.mainQuestion.type){
case "Image": enableImage = true; break;
case "Text": enableText = true; break;
case "LongAudio": enableLongAudio = true; break;
default: enableText = true; break;
}
if(this.g_formData.mainQuestion.shortAudio_url){
enableShortAudio = true
}
if(enableImage){ if(enableImage){
// 图片内容 // 图片内容
let imageContent = this.g_cartoon.createImage("default_Image", (w, h)=>{ let imageContent = this.g_cartoon.createImage("default_Image", (w, h)=>{
...@@ -725,16 +736,19 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -725,16 +736,19 @@ export class PlayComponent implements OnInit, OnDestroy {
card.ref.dot = dot; card.ref.dot = dot;
// 链接关系 // 链接关系
card.lineTo = this.g_formData.textUp[index].lineTo.split("-") card.lineTo = this.g_formData.textUp[index].lineTo
card.complete = false card.complete = false
card.checkLink = (id)=>{ card.checkLink = (id)=>{
this.log(id, card.lineTo) this.log(id, card.lineTo)
let index = id.split("-")[2] let index = Number(id.split("-")[2])
this.log(index)
let z = card.lineTo.indexOf(index) let z = card.lineTo.indexOf(index)
if(z==-1){ if(z==-1){
this.log("不正确")
return false return false
}else{ }else{
card.lineTo.splice(index, 1) this.log("正确")
card.lineTo.splice(z, 1)
if(card.lineTo.length==0){ if(card.lineTo.length==0){
card.complete = true; card.complete = true;
} }
......
...@@ -14,9 +14,9 @@ export default { ...@@ -14,9 +14,9 @@ export default {
// {text:"make friends", lineTo:""} // {text:"make friends", lineTo:""}
// ], // ],
textUp:[ textUp:[
{text:"ABCD", lineTo:"1-2-4"},{text:"ABCDEFG", lineTo:"1"},{text:"ABCDEF", lineTo:"2-4"},{text:"ABCD EFG", lineTo:"1-2-3-4"}, {text:"ABCD", lineTo:[1,2,3]},{text:"ABCDEFG", lineTo:[1,2,3]},{text:"ABCDEF", lineTo:[1,2,3]},{text:"ABCD EFG", lineTo:[1,2,3]},
{text:"ABCD", lineTo:"2-4"},{text:"ABCD", lineTo:"1-4"},{text:"ABCD", lineTo:"2-3-4"},{text:"ABCD", lineTo:"1-2-3-4"}, {text:"ABCD", lineTo:[1,2,3]},{text:"ABCD", lineTo:[1,2,3]},{text:"ABCD", lineTo:[1,2,3]},{text:"ABCD", lineTo:[1,2,3]},
{text:"ABCD", lineTo:"2-3"} {text:"ABCD", lineTo:[1,2,3]}
], ],
// textDown:[ // textDown:[
// {text:"it's so much fun", lineTo:""},{text:"lound", lineTo:""},{text:"very happy", lineTo:""},{text:"sun", lineTo:""},{text:"at the park", lineTo:""}, // {text:"it's so much fun", lineTo:""},{text:"lound", lineTo:""},{text:"very happy", lineTo:""},{text:"sun", lineTo:""},{text:"at the park", lineTo:""},
......
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