Commit cea8eb1e authored by 李维's avatar 李维

dev commit

parent 24356bfa
<div class="model-content">
<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>
......
......@@ -5,14 +5,9 @@
.card-config {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
flex-direction:column;
.card-item{
flex:1;
margin-bottom: 40px;
width: 100%;
.border {
border-radius: 20px;
border-style: dashed;
......@@ -26,7 +21,7 @@
text-align: center;
}
.section{
border-top: 1px solid ;
border-top: 1px dashed ;
padding: 10px 0;
.section-title{
font-size: 24px;
......@@ -34,6 +29,7 @@
}
.section-content{
display: flex;
flex-direction: column;
margin: 5px 0 10px 0;
}
}
......
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
import defauleFormData from '../../assets/play/default/formData/defaultData.js'
@Component({
selector: 'app-form',
......@@ -6,14 +7,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any;
dataArray: Array<Object> = [];
hotZoneItemArr: Array<Object> = [];
bgItem: Object;
KEY = 'DataKey_PU03';
options = []
set item(item) {
this._item = item;
......@@ -43,7 +42,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj = {};
}
this.init();
this.refresh();
// this.refresh();
this.save()
}, this.KEY);
}
ngOnChanges() {
......@@ -53,96 +53,80 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() {
}
saveData(e){
this.bgItem = e.bgItem;
this.hotZoneItemArr.length = 0;
e.hotZoneItemArr.forEach(item => {
this.hotZoneItemArr.push(item)
});
this.save();
}
init() {
if (this.item.contentObj.dataArray) {
this.dataArray = this.item.contentObj.dataArray;
} 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;
if(!this.item.contentObj || !this.item.contentObj.mainQuestion){
this.item.contentObj = defauleFormData
}
this.options = []
this.item.contentObj.textDown.forEach((item, index) => {
this.options.push(index)
});
}
cardItemData(){
return {
audio_url: "",
image_url: "",
hotZoneIndex: -1
};
return {audio_url:"", type:"text", text:"", image_url:""}
}
cardChoiceData(){
return { isText: true, text: "", image_url: "" }
}
getDefaultPicArr() {
let arr = [];
return arr;
}
initData() {
}
addChoice(questionIndex) {
// let item = this.cardChoiceData();
// this.dataArray[questionIndex].choice.incorrect.push(item);
// this.saveItem();
handleMoveItemUp(index){
if(index!=0){
this.item.contentObj.dataArray[index] = this.item.contentObj.dataArray.splice(index-1, 1, this.item.contentObj.dataArray[index])[0];
}else{
this.item.contentObj.dataArray.push(this.item.contentObj.dataArray.shift());
}
this.save()
}
onImageUploadSuccessByItem(e, item) {
item.image_url = e.url
this.save();
handleMoveItemDown(index){
if(index!=this.item.contentObj.dataArray.length-1){
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) {
item.audio_url = e.url;
this.save();
deleteItem(item, index){
item.splice(index,1)
this.save()
}
onTitleAudioUploadSuccess(e) {
this.item.contentObj.titleAudio_url = e.url;
this.save();
addItem(item, type) {
let newItem = null
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() {
let item = this.cardItemData();
this.dataArray.push(item);
item.push(newItem);
this.saveItem();
}
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
onImageUploadSuccessByItem(e, item, key) {
item[key] = e.url
this.save();
}
clickCheckBox() {
this.saveItem();
onAudioUploadSuccessByItem(e, item, key) {
item[key] = e.url
this.save();
}
saveItem() {
this.save();
}
......@@ -150,7 +134,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
save() {
(<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh();
// console.log("保存", this.item)
console.log("保存", this.item)
}
refresh() {
......
......@@ -326,8 +326,19 @@ export class PlayComponent implements OnInit, OnDestroy {
let enableImage = false;
let enableText = false;
let enableLongAudio =true;
let enableShortAudio = true;
let enableLongAudio = false;
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){
// 图片内容
let imageContent = this.g_cartoon.createImage("default_Image", (w, h)=>{
......@@ -725,16 +736,19 @@ export class PlayComponent implements OnInit, OnDestroy {
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.checkLink = (id)=>{
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)
if(z==-1){
this.log("不正确")
return false
}else{
card.lineTo.splice(index, 1)
this.log("正确")
card.lineTo.splice(z, 1)
if(card.lineTo.length==0){
card.complete = true;
}
......
......@@ -14,9 +14,9 @@ export default {
// {text:"make friends", lineTo:""}
// ],
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:"2-4"},{text:"ABCD", lineTo:"1-4"},{text:"ABCD", lineTo:"2-3-4"},{text:"ABCD", lineTo:"1-2-3-4"},
{text:"ABCD", lineTo:"2-3"}
{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:[1,2,3]},{text:"ABCD", lineTo:[1,2,3]},{text:"ABCD", lineTo:[1,2,3]},{text:"ABCD", lineTo:[1,2,3]},
{text:"ABCD", lineTo:[1,2,3]}
],
// textDown:[
// {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