Commit 253254ac authored by Chen Jiping's avatar Chen Jiping

fix:完成模板开发

parent 39b85803
......@@ -20,6 +20,10 @@ export function getDefaultExercises() {
export class AnswerBean extends Obj {
letterArr = [];
start = -1;
letterStart = -1;
}
export function getDefaultAnswer(){
......@@ -33,21 +37,15 @@ export function getDefaultAnswer(){
export class LetterBean extends Obj {
key = '';
bold = '0';
fontColor = '#363333';
isFill = '0';
}
export function getDefaultLetter() {
let letter = new LetterBean();
letter.key = 'K-' + new Date().getTime();
return letter;
}
......@@ -8,4 +8,16 @@
}
.gridStyle {
width: '50%'
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../assets/font/GOTHIC.TTF") ;
}
\ No newline at end of file
......@@ -51,7 +51,23 @@
(blur)="saveContent(data)"></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="20">
<div *ngFor="let letter of data.letterArr; let j = index" style="float: left;">
<div *ngIf="(letter.bold == '0')" style="float: left;">
<label
[ngStyle]="{'float': 'left','font-size': '21px','font-family': 'GOTHIC','color':letter.fontColor, 'margin-right': '2px'}">{{letter.val
== ' ' ? '&nbsp;' : letter.val}}</label>
</div>
<div *ngIf="(letter.bold == '1')" style="float: left;">
<label
[ngStyle]="{'float': 'left','font-size': '21px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}">{{letter.val
== ' ' ? '&nbsp;' : letter.val}}</label>
</div>
</div>
</nz-form-control>
</nz-form-item>
<div *ngFor="let answer of data.answerArr; let m=index">
<nz-card nzType="inner" nzTitle="{{ m == 0 ? '正确选项': '错误选项'}}">
<nz-form-item *ngIf="m == 0">
......@@ -67,11 +83,11 @@
<nz-form-control [nzSpan]="20">
<div *ngFor="let letter of answer.letterArr; let j = index" style="float: left;">
<div *ngIf="(letter.bold == '0')" style="float: left;">
<a style="float: left;font-size: 42px;font-family: FuturaBT-Bold; color:#363333; margin-right: 2px"
<a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHIC','color':letter.fontColor, 'margin-right': '2px'}"
(click)="clickLetter(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
</div>
<div *ngIf="(letter.bold == '1')" style="float: left;">
<a style="float: left;font-size: 42px;font-family: FuturaBT-Bold; color:#581578; margin-right: 2px;font-weight: bold;"
<a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}"
(click)="clickLetter(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
</div>
</div>
......@@ -82,8 +98,8 @@
<nz-form-control [nzSpan]="20">
<div *ngFor="let letter of answer.letterArr; let j = index" style="float: left;">
<div *ngIf="(answer.from &lt;= j && answer.to &gt;= j)" style="float: left;">
<a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'FuturaBT-Bold','color':letter.fontColor, 'margin-right': '2px','font-weight': 'bold'}"
(click)="clickLetter2( answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
<a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}"
(click)="clickLetter2(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
</div>
</div>
</nz-form-control>
......
......@@ -39,7 +39,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if (data) {
this.item = data;
}
console.log(data);
console.log(JSON.stringify(data));
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
......@@ -119,25 +119,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1);
}
addLetterItem(item) {
let letter = getDefaultLetter();
item.letterArr.push(letter);
item.letterArr = [...item.letterArr];
this.save();
}
delLetter(item, index) {
if (index !== -1) {
item.letterArr.splice(index, 1);
item.letterArr = [...item.letterArr];
this.save();
}
}
saveContent(item) {
const reset = (answer) => {
......@@ -161,20 +142,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item.oldVal = val;
let letterArr = [];
for (let j = 0; j < val.length; ++j) {
let letter = getDefaultLetter();
letter.val = val.charAt(j);
letterArr.push(letter);
}
let jsonStr = JSON.stringify(letterArr);
for (let i = 0; i < item.answerArr.length; ++i) {
let answer = item.answerArr[i];
reset(answer);
for (let j = 0; j < val.length; ++j) {
let letter = getDefaultLetter();
letter.val = val.charAt(j);
answer.letterArr = JSON.parse(jsonStr);
answer.letterArr.push(letter);
}
}
item.letterArr = JSON.parse(jsonStr);
}
}
else {
......@@ -185,6 +174,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
reset(answer);
}
item.letterArr = [];
}
this.save();
......@@ -211,24 +202,48 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
private setLetter(exercises) {
clickLetter(exercises, item, i) {
let letterArr = exercises.letterArr;
if(!this.checkIntersection(exercises, item, i)){
return;
for(let i = 0; i < letterArr.length; ++ i){
letterArr[i].fontColor = '#363333';
letterArr[i].bold = '0'
}
let letterArr = item.letterArr;
for (let i = 0; i < exercises.answerArr.length; ++i) {
if (!item.start || item.start == -1) {
let item = exercises.answerArr[i];
for (let i = 0; i < letterArr.length; ++i) {
let from = item.from;
let to = item.to;
for (let i = from; i <= to; ++i) {
if(!i || i == -1){
continue;
}
letterArr[i].bold = '0';
letterArr[i].fontColor = '#363333';
let letter = item.letterArr[i];
letterArr[i].fontColor = letter.fontColor;
letterArr[i].bold = letter.bold;
}
}
this.save();
}
clickLetter(exercises, item, i) {
if (!this.checkIntersection(exercises, item, i)) {
return;
}
let letterArr = item.letterArr;
if (!item.start || item.start == -1) {
item.start = i;
letterArr[i].bold = '1';
letterArr[i].fontColor = '#581578';
......@@ -258,14 +273,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
item.start = -1;
}
this.save();
this.setLetter(exercises);
}
}
private checkIntersection(exercises, item, index){
private checkIntersection(exercises, item, index) {
let result = false;
......@@ -273,16 +288,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
let answer = exercises.answerArr[i];
if(answer == item){
if (answer == item) {
continue;
}
if(answer.from <= index && answer.to >= index){
if (answer.from <= index && answer.to >= index) {
result = true;
}
}
if(result){
if (result) {
let id = this.message.error('所选内容有交叉,请重新选择', { nzDuration: 0 }).messageId;
setTimeout(() => {
this.message.remove(id);
......@@ -294,7 +309,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
return true;
}
clickLetter2(item, i) {
clickLetter2(exercises, item, i) {
let letterArr = item.letterArr;
......@@ -332,108 +347,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
item.letterStart = -1;
}
this.save();
}
boldOptionChange(item) {
if (item.bold == '0') {
item.fontColor = "#363333";
this.setLetter(exercises);
}
else {
item.fontColor = "#0fad51";
}
this.save();
}
letterOptionChange(item) {
if (item.letterFlag == '0') {
item.letterArr = [];
}
else {
item.letterArr = [];
}
this.save();
}
private setOptionArr(exercises) {
const getOptionArr = (flag) => {
let tempArr = [];
for (let i = 0; i < this.item.letterArr.length; ++i) {
let letter = this.item.letterArr[i];
if (!letter || !letter.val) {
continue;
}
let index = letter.val.indexOf("-");
if (index == -1) {
tempArr.push(letter);
}
else {
let pattern;
if (flag == 'r') {
pattern = /^-.+(?<!-)$/;
}
else if (flag == 'm') {
pattern = /^-.+-$/;
}
else {
pattern = /^(?!-).+-$/;
}
if (pattern.test(letter.val)) {
tempArr.push(letter);
}
}
}
return tempArr;
}
if (!exercises.optionArr) {
exercises.optionArr = [];
}
let tempArr = [];
let val = exercises.val ? exercises.val : "";
const chr = val.split(/\s+|\?|\.|\,|\!/);
for (const c of chr) {
let index = c.indexOf("_");
if (index == -1) {
continue;
}
if (index == 0) {
tempArr = getOptionArr('l')
}
else if (index > 0 && index < c.length - 1) {
tempArr = getOptionArr('m');
}
else {
tempArr = getOptionArr('r');
}
}
exercises.optionArr = [...tempArr];
}
check(value, maxLength: number) {
if (!value) {
......@@ -461,49 +382,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
return false;
}
}
private refreshExercises(item, letter, flag) {
let key = letter.key;
//改变单词对应的值
let letterArr = item.letterArr;
if (!letterArr) {
return;
}
for (let j = 0; j < letterArr.length; ++j) {
let tLetter = letterArr[j];
if (tLetter.isFill != '1') {
continue;
}
if (flag == 'R') {
tLetter.val = letter.val.replace(/\-/g, '');
tLetter.key = key;
item.key = key;
}
else {
if (tLetter.key == key && letter.val) {
if (flag == 'U') {
tLetter.val = letter.val.replace(/\-/g, '');
}
else if (flag == 'D') {
tLetter.val = '_';
tLetter.key = '';
tLetter.isFill = '1';
item.key = '';
}
}
}
}
}
}
import { text } from "@fortawesome/fontawesome-svg-core";
import { faAlignRight } from "@fortawesome/free-solid-svg-icons";
import { Listening } from "./Listening";
import { getMaxScale, jelly, jellyPop, Label, Label2, LabelText, Line, MySprite, RichText, ShapeCircle, ShapeRect, ShapeRectNew, tweenChange } from "./Unit";
import { getMaxScale, getMinScale, jelly, jellyPop, Label, Label2, LabelText, Line, MySprite, RichText, ShapeCircle, ShapeRect, ShapeRectNew, Text, tweenChange } from "./Unit";
export class Exercises {
data;
......@@ -15,7 +16,7 @@ export class Exercises {
answer: ShapeRect;
answerLabel;
answerLabel: RichText;
scaleX = 1;
......@@ -25,11 +26,17 @@ export class Exercises {
indexLabelBg: ShapeCircle;
pic: MySprite;
answered = false;
showed = false;
underline : Line;
underline: Line;
audioPos = {x:0, y :0};
circle : MySprite;
init(images, indexBgColor, data, scaleX = 1, scaleY = 1) {
......@@ -55,13 +62,33 @@ export class Exercises {
h = this.answer.height > h ? this.answer.height : h;
this.bg.setSize(w, h);
this.answer.y = (h - this.answer.height) / 2;
this.indexLabelBg.y = this.answer.y + this.indexLabelBg.radius;
let labelH = (this.answerLabel.fontSize) * this.scaleY;
if(this.pic){
this.pic.y = this.answer.y + this.answerLabel.endPos.offY * this.scaleY + labelH / 2;
this.audioPos.x = this.pic.x + this.pic.getBoundingBox().width / 2 + 3 * this.scaleX;
this.audioPos.y = this.pic.y;
}
else{
this.audioPos.x = this.answer.x + this.answerLabel.endPos.offX * this.scaleX + 3 * this.scaleX;
this.audioPos.y = this.answer.y + this.answerLabel.endPos.offY * this.scaleY + labelH / 2;
}
}
initBg() {
const bg = new ShapeRect();
bg.alpha = 0;
bg.fillColor = "#dbd0e7";
bg.alpha = 1;
this.bg = bg;
}
......@@ -72,7 +99,6 @@ export class Exercises {
indexBg.fillColor = "#763c92";
indexBg.setRadius(r);
indexBg.x = 56 * this.scaleX + r;
indexBg.y = r + 43 * this.scaleY;
this.bg.addChild(indexBg);
this.indexLabelBg = indexBg;
......@@ -93,31 +119,78 @@ export class Exercises {
initExercises() {
let startX = 17 * this.scaleX + this.indexLabelBg.width / 2 + this.indexLabelBg.x;
let y = 0;
let startX = 17 * this.scaleX + this.indexLabelBg.radius + this.indexLabelBg.x;
let answer = this.getAnswerView(this.data.answer);
let answer = this.getAnswerView(this.data);
answer.x = startX;
answer.y = y;
this.answer = answer;
this.bg.addChild(answer);
let mH = 100 * this.scaleY;
let mW = 100 * this.scaleX;
if(this.data.picUrl){
const pic = new MySprite();
pic.init(this.images.get(this.data.picUrl));
let scale = getMinScale(pic,mW, mH);
scale = Math.floor(scale * 100) / 100;
pic.setScaleXY(scale > this.scaleX ? this.scaleX : scale);
pic.x = answer.x + this.answerLabel.endPos.offX * this.scaleX + pic.getBoundingBox().width / 2;
this.pic = pic;
this.bg.addChild(pic);
}
}
getAnswerView(answerData) {
getAnswerView(data) {
const getTextArr = () => {
let textArr = [];
let from = data.answerArr[0].from;
let to = data.answerArr[0].to;
let flag = 'R';
for (let i = 0; i < data.letterArr.length; ++i) {
let text = new Text();
text.val = data.letterArr[i].val;
text.fontColor = data.letterArr[i].fontColor;
if (i >= from && i <= to) {
text.ext01 = flag;
}
if (text.val == '/') {
text.fontColor = '#af62d4';
text.bold = true;
}
if (data.letterArr[i].bold == '1') {
text.bold = true;
}
textArr.push(text);
}
return textArr;
}
const text = new RichText();
text.fontColor = "#363333";
text.fontSize = 48;
text.fontName = "MMB";
text.text = this.data.val;
text.fontSize = 42;
text.fontName = "GOTHIC";
text.boldFontName = 'GOTHICB';
text.textArr = getTextArr();
text.disH = 20 * this.scaleX;
text.width = 1056 * this.scaleX;
text.maxWidth = 980 * this.scaleX;
text.setScaleXY(this.scaleX);
text.refreshSize();
this.answerLabel = text;
......@@ -125,10 +198,10 @@ export class Exercises {
const bg = new ShapeRect();
bg.setSize(text.getBoundingBox().width, text.getBoundingBox().height);
bg.fillColor="#432300"
bg.fillColor = "#432300"
bg.alpha = 0;
text.y = bg.height / 2;
text.y = bg.height / 2 - text.disH / 2;
text.x = 0;
bg.addChild(text);
......@@ -137,8 +210,7 @@ export class Exercises {
check(curLetterItem, mx, my) {
check(mx, my) {
const checkPointInRect = (x, y, rect) => {
if (x >= rect.x && x <= rect.x + rect.width) {
......@@ -149,35 +221,58 @@ export class Exercises {
return false;
}
if (!curLetterItem) {
return false;
}
let rect = this.answer.getBoundingBox();
let textArr = this.answerLabel.textArr;
let rect = this.answer.getBoundingBox();
rect.width = 0;
let offsetX = 0;
let width = 60 * this.scaleX;
let offsetY = 0;
let x = this.answerLabel.linePos.x * this.scaleX;
let start;
rect.x += x;
rect.width = width;
let h = (this.answerLabel.fontSize + this.answerLabel.disH / 2) * this.scaleY;
//console.log(rect, fillText);
for (let i = 0; i < textArr.length; ++i) {
if (textArr[i].ext01 == 'R') {
start = i;
offsetX = textArr[i].x;
break;
}
}
if (checkPointInRect(mx, my, rect) && curLetterItem.data.key == this.data.key) {
for (let i = start; i < textArr.length; ++i) {
this.answered = true;
this.answerLabel.fillVal = curLetterItem.data.val.replace(/\-/g, '');
this.answerLabel.answered = true;
if(this.underline){
this.underline.visible = false;
if (textArr[i].ext01 == 'R') {
rect.width += textArr[i].width;
offsetY = textArr[i].y;
}
return true;
}
else {
rect.y += offsetY * this.scaleY;
rect.x += offsetX * this.scaleX;
rect.width = rect.width * this.scaleX;
if (!checkPointInRect(mx, my, rect)) {
return false;
}
const circle = new MySprite();
circle.init(this.images.get('circle'));
circle.scaleY = this.scaleY;
circle.scaleX = (rect.width + 30* this.scaleX) / circle.width;
circle.x = this.answer.x + offsetX * this.scaleY + rect.width / 2;
circle.y = this.answer.y + offsetY * this.scaleY + h / 2;
this.circle = circle;
this.bg.addChild(circle);
this.answered = true;
return true;
}
}
\ No newline at end of file
}
\ No newline at end of file
......@@ -62,7 +62,7 @@ export class Listening {
}
play(callback = null){
console.log('playing:', this.playing);
if(!this.playing){
this.playAudio(callback);
return this.audio;
......@@ -82,7 +82,12 @@ export class Listening {
}
playAudio(callback = null){
if(!this.audio){
if(callback){
callback();
}
return;
}
this.btnPlay.alpha = 0;
this.btnStop.alpha = 1;
......
This diff is collapsed.
This diff is collapsed.
......@@ -29,6 +29,12 @@
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../assets/font/GOTHIC.TTF") ;
}
@font-face
{
font-family: 'MMB';
......
......@@ -17,7 +17,7 @@ import { Exercises } from './Exercises.spreat';
import { getDefaultExercises } from '../bean/Exercises';
import { getDefaultTile } from '../bean/TitleBean';
import { exception } from 'console';
import { defaultVal } from './default';
......@@ -105,8 +105,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = data;
}
else {
let defaultData = '{"title":{"part1":"C","part2":"Read and point"},"letterArr":[{"key":"K-1612945850419","isFill":"0","val":"-dis"},{"key":"K-1612945972128","isFill":"0","val":"-aw-"},{"key":"K-1612947526926","isFill":"0","val":"ph"},{"key":"K-1612947527364","isFill":"0","val":"-aw-"},{"key":"K-1612947541415","isFill":"0","val":"-ch"},{"key":"K-1612947545454","isFill":"0","val":"-ed"},{"key":"K-1612947548919","isFill":"0","val":"pre-"}],"exercisesArr":[{"letterArr":[{"key":"K-1613141016560","isFill":"0","val":"Hello,My name is chenjp.Hello My n"},{"key":"K-1613141016560","isFill":"1","val":"_"},{"key":"K-1613141016560","isFill":"0","val":"e is chenjp.Hello,"}],"key":"K-1612947526926","answer":{"letterArr":[{"key":"","isFill":"0","val":"name"},{"key":"K-1612705253202","isFill":"1","val":"pah","val2":"pah"}]},"index":1,"val":"Hello,My name is chenjp.Hello My n_e is chenjp.Hello,","audioUrl":"http://staging-teach.cdn.ireadabc.com/8970ccce02d3a37640c80e02626fefb8.mp3"},{"key":"K-1612945850419","answer":{},"index":2,"val":"I _agree with my dad about it.","letterArr":[{"key":"K-1612946396917","isFill":"0","val":"I "},{"key":"K-1612945850419","isFill":"1","val":"dis"},{"key":"K-1612946396917","isFill":"0","val":"agree with my dad about it."}],"audioUrl":"http://staging-teach.cdn.ireadabc.com/ef597f87e534ab2c73f4f9ed34eb26fa.mp3"},{"key":"K-1612947545454","answer":{},"index":3,"val":"He received the best treat_ for a cold yesterday.","letterArr":[{"key":"K-1613141079966","isFill":"0","val":"He received the best treat"},{"key":"K-1613141079966","isFill":"1","val":"_"},{"key":"K-1613141079966","isFill":"0","val":" for a cold yesterday."}],"audioUrl":"http://staging-teach.cdn.ireadabc.com/55addbbc6a4da4a63bc22988063bdded.mp3"},{"key":"K-1612947541415","answer":{},"index":4,"val":"He received the best treat_ for a cold yesterday.","letterArr":[{"key":"K-1613141080944","isFill":"0","val":"He received the best treat"},{"key":"K-1612947541415","isFill":"1","val":"ch"},{"key":"K-1613141080944","isFill":"0","val":" for a cold yesterday."}],"audioUrl":"http://staging-teach.cdn.ireadabc.com/71eb8fcc0895873363840db7bc0c5883.mp3"}]}';
this.data = JSON.parse(defaultData);
this.data = defaultVal;
}
//console.log('data:', JSON.stringify(data));
......@@ -481,7 +480,14 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initImg() {
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
let exercises = this.data.exercisesArr[i];
if (exercises.picUrl) {
this.addUrlToImages(exercises.picUrl);
}
}
}
/**
......@@ -514,9 +520,17 @@ export class PlayComponent implements OnInit, OnDestroy {
let exercises = this.data.exercisesArr[i];
if (exercises.answer && exercises.audioUrl) {
if(exercises.audioUrl){
this.addUrlToAudioObj(exercises.audioUrl);
}
for(let j = 0; j < exercises.answerArr.length; ++ j){
let answer = exercises.answerArr[j];
if(answer && answer.audioUrl){
this.addUrlToAudioObj(answer.audioUrl);
}
}
}
}
......@@ -749,6 +763,28 @@ export class PlayComponent implements OnInit, OnDestroy {
});
}
return;
}
let target;
let callback;
for (let i = 0; i < this.exercisesArr.length; ++i) {
let exercises = this.exercisesArr[i];
if (this.checkClickTarget(exercises.bg)) {
target = exercises;
callback = this.clickExercies.bind(this);
break;
}
}
if (target) {
callback(target);
return;
}
}
......@@ -780,18 +816,44 @@ export class PlayComponent implements OnInit, OnDestroy {
}
private clickExercies(curExer) {
if (!curExer) {
private clickExercies(target) {
if (!target) {
return;
}
if (curExer.answered) {
if (this.checkClickTarget(curExer.answer)) {
this.playAudio(curExer.data.audioUrl, true);
if (target.answered) {
if(this.checkClickTarget(target.circle)){
this.playAudio(target.data.answerArr[0].audioUrl, true);
return;
}
if (this.checkClickTarget(target.answer)) {
this.playAudio(target.data.audioUrl, true);
}
return;
}
if (!target.check(this.mx, this.my)) {
return;
}
let audioPos = target.audioPos;
let listening = new Listening(this.audioObj[target.data.audioUrl], this.images);
listening.init(this.mapScale, this.mapScale, 'play_1', 'stop_1');
listening.bg.x = audioPos.x;
listening.bg.y = audioPos.y - listening.bg.height / 2;
target.bg.addChild(listening.bg);
this.listeningArr.push(listening);
this.playAudio("right", true, () => {
this.playAudio(target.data.answerArr[0].audioUrl, true);
});
this.canTouch = true;
}
}
......@@ -5,6 +5,7 @@ const res = [
['play_1', "assets/play/play_1.png"],
['stop_1', "assets/play/stop_1.png"],
['index_bg', "assets/play/index_bg.png"],
['circle', "assets/play/circle.png"],
];
......
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