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;
......
import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window {
interface AirWindow extends Window {
air: any;
curCtx: any;
curImages: any;
......@@ -223,7 +223,7 @@ export class MySprite extends Sprite {
this._offCtx.drawImage(this.img, 0, 0);
if (this._maskSpr) {
this._offCtx.globalCompositeOperation = 'destination-in';
this._offCtx.drawImage(this._maskSpr.img, this._maskSpr.x + this._maskSpr._offX - this._offX , this._maskSpr.y + this._maskSpr._offY - this._offY);
this._offCtx.drawImage(this._maskSpr.img, this._maskSpr.x + this._maskSpr._offX - this._offX, this._maskSpr.y + this._maskSpr._offY - this._offY);
}
this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
......@@ -247,11 +247,11 @@ export class MySprite extends Sprite {
}
updateChildren() {
updateChildren() {
if (this.children.length <= 0) { return; }
for (const child of this.children) {
for (const child of this.children) {
if (child === this) {
if (this.visible) {
this.drawSelf();
......@@ -306,14 +306,14 @@ export class MySprite extends Sprite {
if (this.children[i]) {
if (this.children[i] !== this) {
this.children.splice(i, 1);
i --;
i--;
}
}
}
}
_changeChildAlpha(alpha) {
for (const child of this.children) {
for (const child of this.children) {
if (child !== this) {
child.alpha = alpha;
}
......@@ -400,7 +400,7 @@ export class MySprite extends Sprite {
}
return {px, py, sx, sy};
return { px, py, sx, sy };
};
......@@ -412,7 +412,7 @@ export class MySprite extends Sprite {
const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy);
return {x, y, width, height};
return { x, y, width, height };
}
}
......@@ -442,10 +442,10 @@ export class ColorSpr extends MySprite {
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) {
for (let i = 0; i < c.height; i++) {
for (let j = 0; j < c.width; j++) {
const x = (i * 4) * c.width + ( j * 4 );
const x = (i * 4) * c.width + (j * 4);
const r = c.data[x];
const g = c.data[x + 1];
const b = c.data[x + 2];
......@@ -488,10 +488,10 @@ export class GrayscaleSpr extends MySprite {
const rect = this.getBoundingBox();
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) {
for (let i = 0; i < c.height; i++) {
for (let j = 0; j < c.width; j++) {
const x = (i * 4) * c.width + ( j * 4 );
const x = (i * 4) * c.width + (j * 4);
const r = c.data[x];
const g = c.data[x + 1];
const b = c.data[x + 2];
......@@ -548,7 +548,7 @@ export class BitMapLabel extends MySprite {
this.height = h;
let offX = -totalW / 2;
for (const label of labelArr) {
for (const label of labelArr) {
label.x = offX;
offX += label.width;
}
......@@ -749,35 +749,35 @@ export class LabelText {
return this._underLine;
}
set visiable(visiable){
set visiable(visiable) {
this._visiable = visiable;
}
get visiable(){
get visiable() {
return this._visiable;
}
set fill(file){
set fill(file) {
this._fill = file;
}
get fill(){
get fill() {
return this._fill;
}
set width(width){
set width(width) {
this._width = width;
}
get width(){
get width() {
return this._width;
}
set x(val){
set x(val) {
this._x = val;
}
get x(){
get x() {
return this._x;
}
}
......@@ -823,20 +823,20 @@ export class Label2 extends MySprite {
for (let i = 0; i < this.textArr.length; ++i) {
if(this.textArr[i].underLine){
count ++;
if (this.textArr[i].underLine) {
count++;
continue;
}
text += this.textArr[i].val;
}
if(count > 0){
this._width = this.ctx.measureText(text).width + 36 * count + 4 * (count - 1);
if (count > 0) {
this._width = this.ctx.measureText(text).width + 36 * count + 4 * (count - 1);
}
else{
else {
this._width = this.ctx.measureText(text).width;
}
this._height = this.fontSize;
this.refreshAnchorOff();
......@@ -895,7 +895,7 @@ export class Label2 extends MySprite {
var startX = 0;
for (let i = 0; i < this.textArr.length; ++i) {
var text = this.textArr[i];
let width = this.ctx.measureText(text.val).width;
......@@ -925,16 +925,16 @@ export class Label2 extends MySprite {
tempStartX += (36 - width) / 2;
dW = 36 ;
dW = 36;
if(this.textArr[i + 1] && this.textArr[i + 1].underLine){
dW += 4 ;
if (this.textArr[i + 1] && this.textArr[i + 1].underLine) {
dW += 4;
}
}
else{
else {
dW = width;
}
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
......@@ -947,15 +947,15 @@ export class Label2 extends MySprite {
this.ctx.strokeStyle = this.outlineColor;
this.ctx.strokeText(text.val, tempStartX, 0);
}
}
this.ctx.fillStyle = text.fontColor ? text.fontColor : this.fontColor;
if(text.visiable){
this.ctx.fillText(text.val, tempStartX, 0);
if (text.visiable) {
this.ctx.fillText(text.val, tempStartX, 0);
}
startX += dW;
}
......@@ -979,7 +979,7 @@ export class RichTextOld extends Label {
for (const word of words) {
const re = new RegExp(word, 'g');
newText = newText.replace( re, `#${word}#`);
newText = newText.replace(re, `#${word}#`);
// newText = newText.replace(word, `#${word}#`);
}
......@@ -1075,36 +1075,95 @@ export class RichTextOld extends Label {
}
export class Text {
private _val: string;
private _fontColor = "#000000";
private _bold = false;
export class RichText extends Label {
private _width = 0;
private _x = 0;
disH = 10;
offW = 0;
private _y = 0;
private _ext01;
set val(val) {
this._val = val;
}
get val() {
return this._val;
}
set fontColor(fontColor) {
this._fontColor = fontColor;
}
get fontColor() {
return this._fontColor;
}
underlineWidth = 0;
set bold(bold) {
this._bold = bold;
}
get bold() {
return this._bold;
}
set width(width) {
this._width = width;
}
get width() {
return this._width;
}
get x() {
return this._x;
}
set x(x) {
this._x = x;
}
get y() {
return this._y;
}
set y(y) {
this._y = y;
}
get ext01() {
return this._ext01;
}
underlineHeight = 0;
set ext01(ext01) {
this._ext01 = ext01;
}
}
underlineColor = "#000000";
linePos = {x : 0, y : 0};
export class RichText extends Label {
fillIndex = 0;
fillFontColor = "#000000";
disH = 10;
offW = 0;
text1 = "";
boldFontName = 'Verdana';
text2 = ""
//显示内容
textArr: Array<Text> = [];
answered = false;
fillVal = "";
endPos = { offX: 0, offY: 0 };
audioPos = {x : 0, y : 0};
maxWidth
constructor(ctx?: any) {
super(ctx);
......@@ -1112,99 +1171,115 @@ export class RichText extends Label {
// this.dataArr = dataArr;
}
private getContent() {
const getBlank = () => {
let blank = new Text();
blank.val = ' ';
blank.width = this.ctx.measureText(blank.val).width * this.scaleX;
return blank;
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
const selfW = this.width;
const selfW = this.maxWidth;
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW - 2 * this.offW;
for (const c of chr) {
let index = c.indexOf("_");
if(index != -1){
let w1 = this.ctx.measureText(c.substring(0, index)).width;
let w2 = this.ctx.measureText(c.substring(index + 1)).width;
let w3 = this.ctx.measureText(c.substring(index + 1) + c).width;
let tempArr = [];
let tW1 = w1 + this.underlineWidth + w2;
let tW2 = w1 + this.underlineWidth + w3;
let tempStr = "";
for (let i = 0; i < this.textArr.length; ++i) {
let text = this.textArr[i];
let c = this.textArr[i].val;
if(tW1 * this.scaleX < w && tW2 * this.scaleX <= w){
temp += ' ' + c;
if (text.val != ' ') {
if (text.bold) {
this.ctx.font = `${this.fontSize}px ${this.boldFontName}`;
}
else{
row.push(temp);
temp = ' ' + c;
else {
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
}
this.textArr[i].width = this.ctx.measureText(c).width * this.scaleX;
tempStr += text.val;
tempArr.push(this.textArr[i]);
continue
}
else{
if (this.ctx.measureText(temp).width * this.scaleX < w && this.ctx.measureText(temp + (c)).width * this.scaleX <= w) {
temp += ' ' + c;
} else {
row.push(temp);
temp = ' ' + c;
}
}
if (this.ctx.measureText(temp).width * this.scaleX < w && this.ctx.measureText(temp + (tempStr)).width * this.scaleX <= w) {
temp += ' ' + tempStr;
tempArr.push(getBlank());
tempArr.push(this.textArr[i]);
} else {
row.push(tempArr);
temp = ' ' + tempStr;
tempArr = [];
tempArr.push(getBlank());
tempArr.push(this.textArr[i]);
}
tempStr = "";
}
if (temp != ' ') {
row.push(temp);
row.push(tempArr);
}
this._height = this.fontSize * row.length + (row.length - 1) * this.disH;
return row;
}
const disH = (this.fontSize + this.disH);
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
const row = this.getContent();
const x = 0;
this._height = this.fontSize * row.length + (row.length - 1) * this.disH;
let mW = 0;
const disH = (this.fontSize + this.disH);
let x = 0;
for (let b = 0; b < row.length; b++) {
let index = row[b].indexOf("_");
if(index != -1){
this.fillIndex = b;
let tW = 0;
let text1 = row[b].substring(0, index);
let textArr = row[b];
this.text1 = text1;
for (let i = 0; i < textArr.length; ++i) {
this.text2 = row[b].substring(index + 1);
tW += textArr[i].width;
let w = this.ctx.measureText(text1).width;
textArr[i].x = x;
textArr[i].y = b * disH;
x += textArr[i].width;
}
this.linePos.x = x + w;
this.linePos.y = (b + 1) * disH;
if (tW > mW) {
mW = tW;
}
//最后一行,取末尾坐标
if(b == row.length - 1){
this.audioPos.x = this.ctx.measureText(row[b]).width;
this.audioPos.y = b * disH;
if(this.answered && this.fillIndex == b){
let val = this.text1 + this.fillVal + this.text2;
this.audioPos.x = this.ctx.measureText(val).width;
}
if(b == row.length - 1){
this.endPos.offX = x;
this.endPos.offY = b * disH;
}
x = 0;
}
this._width = mW;
this.ctx.restore();
}
drawText() {
if (!this.text) {
if (!this.textArr) {
return;
}
......@@ -1212,121 +1287,50 @@ export class RichText extends Label {
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'bottom';
this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor;
const selfW = this.width;
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW - 2 * this.offW;
const row = this.getContent();
const disH = (this.fontSize + this.disH);
for (const c of chr) {
let index = c.indexOf("_");
if(index != -1){
let w1 = this.ctx.measureText(c.substring(0, index)).width;
let w2 = this.ctx.measureText(c.substring(index + 1)).width;
let w3 = this.ctx.measureText(c.substring(index + 1) + c).width;
let tW1 = w1 + this.underlineWidth + w2;
let tW2 = w1 + this.underlineWidth + w3;
if(tW1 * this.scaleX < w && tW2 * this.scaleX <= w){
temp += ' ' + c;
}
else{
row.push(temp);
temp = ' ' + c;
}
}
else{
if (this.ctx.measureText(temp).width * this.scaleX < w && this.ctx.measureText(temp + (c)).width * this.scaleX <= w) {
temp += ' ' + c;
} else {
row.push(temp);
temp = ' ' + c;
}
}
}
if (temp != ' ') {
row.push(temp);
}
const x = 0;
let x = 0;
const y = -row.length * disH / 2;
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor;
for (let b = 0; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔
let textArr = row[b];
for (let i = 0; i < textArr.length; ++i) {
this.ctx.strokeText(textArr[i].val, x, y + (b + 1) * disH); // 每行字体y坐标间隔
x += textArr[i].width;
}
x = 0;
}
}
x = 0;
// this.ctx.fillStyle = '#ff7600';
for (let b = 0; b < row.length; b++) {
if(this.answered){
if(b == this.fillIndex){
let w = this.ctx.measureText(this.text1).width;
this.ctx.fillText(this.text1, x, y + (b + 1) * disH); // 每行字体y坐标间隔
this.ctx.fillStyle = this.fillFontColor;
let textArr = row[b];
this.ctx.fillText(this.fillVal, x + w, y + (b + 1) * disH); // 每行字体y坐标间隔
let w2 = this.ctx.measureText(this.fillVal).width;
this.ctx.fillStyle = this.fontColor;
this.ctx.fillText(this.text2, x + w + w2, y + (b + 1) * disH); // 每行字体y坐标间隔
}
else{
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔
}
}
else{
let index = row[b].indexOf("_");
if(index != -1){
let text1 = row[b].substring(0, index);
let w = this.ctx.measureText(text1).width;
let text2 = row[b].substring(index + 1);
this.ctx.fillText(text1, x, y + (b + 1) * disH); // 每行字体y坐标间隔
this.ctx.fillText(text2, x + w + this.underlineWidth, y + (b + 1) * disH); // 每行字体y坐标间隔
this.linePos.x = x + w;
this.linePos.y = y + (b + 1) * disH;
let lineY = y + (b + 1) * disH;
this.ctx.save();
this.ctx.beginPath();
this.ctx.moveTo(x + w, lineY);
this.ctx.lineTo(x + w + this.underlineWidth, lineY);
this.ctx.lineWidth = this.underlineHeight;
this.ctx.strokeStyle = this.underlineColor;
this.ctx.stroke();
this.ctx.restore();
for (let i = 0; i < textArr.length; ++i) {
if (textArr[i].bold) {
this.ctx.font = `${this.fontSize}px ${this.boldFontName}`;
}
else{
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔
else {
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
}
this.ctx.fillStyle = textArr[i].fontColor;
this.ctx.fillText(textArr[i].val, x, y + (b + 1) * disH); // 每行字体y坐标间隔
textArr[i].x = x;
textArr[i].y = b * disH;
x += textArr[i].width;
}
x = 0;
}
}
......@@ -1592,7 +1596,7 @@ export class MyAnimation extends MySprite {
}
showAllFrame() {
for (const frame of this.frameArr ) {
for (const frame of this.frameArr) {
frame.alpha = 1;
}
}
......@@ -1623,7 +1627,7 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = false;
}
this.frameIndex ++;
this.frameIndex++;
if (this.frameIndex >= this.frameArr.length) {
if (this.loop) {
this.frameIndex = 0;
......@@ -1631,7 +1635,7 @@ export class MyAnimation extends MySprite {
this.restartFlag = false;
this.frameIndex = 0;
} else {
this.frameIndex -- ;
this.frameIndex--;
this.playEnd();
return;
}
......@@ -1673,25 +1677,25 @@ export class MyAnimation extends MySprite {
}
export class Line extends MySprite{
export class Line extends MySprite {
lineColor = '#ffffff';
lineWidth = 10;
setLine(length){
setLine(length) {
this.width = length;
}
drawLine() {
this.ctx.save();
this.ctx.beginPath();
this.ctx.lineWidth = this.lineWidth;
this.ctx.strokeStyle = this.lineColor;
this.ctx.strokeStyle = this.lineColor;
this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY);
this.ctx.stroke();
this.ctx.restore();
}
......@@ -1728,7 +1732,7 @@ export function createTween(item, obj, time = 0.8, callBack = null, easing = nul
tween.easing(easing);
}
if (update) {
tween.onUpdate( (a, b) => {
tween.onUpdate((a, b) => {
update(a, b);
});
}
......@@ -1740,7 +1744,7 @@ export function tweenQueue(arr) {
const showOneTween = () => {
const tween = arr.shift();
if (arr.length > 0) {
tween.onComplete( () => {
tween.onComplete(() => {
showOneTween();
});
}
......@@ -1780,7 +1784,7 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
export function scaleItem(item, scale, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ scaleX: scale, scaleY: scale}, time * 1000);
const tween = new TWEEN.Tween(item).to({ scaleX: scale, scaleY: scale }, time * 1000);
if (callBack) {
tween.onComplete(() => {
......@@ -1798,7 +1802,7 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul
export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
const tween = new TWEEN.Tween(item).to({ x, y }, time * 1000);
if (callBack) {
tween.onComplete(() => {
......@@ -1841,7 +1845,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) {
}
const tween = new TWEEN.Tween(item)
.to({alpha: 0}, time * 1000)
.to({ alpha: 0 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
......@@ -1868,7 +1872,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
item.visible = true;
const tween = new TWEEN.Tween(item)
.to({alpha: 1}, time * 1000)
.to({ alpha: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
......@@ -1888,7 +1892,7 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul
const tween = new TWEEN.Tween(item)
.to({alpha}, time * 1000)
.to({ alpha }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
......@@ -1908,7 +1912,7 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({alpha: 1, scale: 1}, time * 1000)
.to({ alpha: 1, scale: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
......@@ -1928,7 +1932,7 @@ export function randomSortByArr(arr) {
const newArr = [];
const tmpArr = arr.concat();
while (tmpArr.length > 0) {
const randomIndex = Math.floor( tmpArr.length * Math.random() );
const randomIndex = Math.floor(tmpArr.length * Math.random());
newArr.push(tmpArr[randomIndex]);
tmpArr.splice(randomIndex, 1);
}
......@@ -1952,7 +1956,7 @@ export function getPosByAngle(angle, len) {
const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len;
return {x, y};
return { x, y };
}
......@@ -2008,12 +2012,12 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0);
a += 90;
const obj = {r, a};
const obj = { r, a };
item._circleAngle = a;
const targetA = a + addR;
const tween = new TWEEN.Tween(item).to({_circleAngle: targetA}, time * 1000);
const tween = new TWEEN.Tween(item).to({ _circleAngle: targetA }, time * 1000);
if (callBack) {
tween.onComplete(() => {
......@@ -2024,7 +2028,7 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
tween.easing(easing);
}
tween.onUpdate( (item, progress) => {
tween.onUpdate((item, progress) => {
// console.log(item._circleAngle);
const r = obj.r;
......@@ -2047,7 +2051,7 @@ export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
const len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
return len;
}
......@@ -2078,8 +2082,9 @@ export function formatTime(fmt, date) {
};
if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }
for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
}
}
return fmt;
......@@ -2117,8 +2122,8 @@ export function jelly(item, time = 0.7) {
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
const t = tweenChange(item, { scaleX: data[0], scaleY: data[1] }, data[2], () => {
index++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
......@@ -2153,8 +2158,8 @@ export function jellyPop(item, time) {
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
const t = tweenChange(item, { scaleX: data[0], scaleY: data[1] }, data[2], () => {
index++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
......@@ -2181,7 +2186,7 @@ export function jellyPop(item, time) {
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
for (let i = 0; i < num; i ++) {
for (let i = 0; i < num; i++) {
const particle = new MySprite();
particle.init(img);
......@@ -2295,7 +2300,7 @@ export class MyVideo extends MySprite {
element;
initVideoElement(videoElement) {
initVideoElement(videoElement) {
this.element = videoElement;
this.width = this.element.videoWidth;
......
const defaultVal = {
"title":{
"part1":"C",
"part2":"Read and point"
},
"exercisesArr":[
{
"answerArr":[
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"b"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"o"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"c"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"c"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/f95fd3997cdd67abd51a1ab45efd855d.mp3",
"from":25,
"to":31,
"letterFrom":-1,
"letterTo":-1
},
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"b"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"c"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"c"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"i"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"n"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"o"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"from":35,
"to":44,
"letterFrom":35,
"letterTo":36
}
],
"index":1,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/919b2c150b41b3306869ebe78ecb70b3.mp3",
"val":"The story in the book is correct / incorrect.",
"oldVal":"The story in the book is correct / incorrect.",
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"b"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"o"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"i"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"n"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"o"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
],
"picUrl":"http://staging-teach.cdn.ireadabc.com/9d7bdb483c7690728f0658022753c8ed.png"
},
{
"answerArr":[
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"y"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/b44fa51172b19b555fda30717c773027.mp3",
"from":11,
"to":18,
"letterFrom":-1,
"letterTo":-1
},
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"u"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"n"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"from":22,
"to":28,
"letterFrom":22,
"letterTo":23
}
],
"index":2,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/8970ccce02d3a37640c80e02626fefb8.mp3",
"picUrl":"http://staging-teach.cdn.ireadabc.com/c9147ba4f6865137f78a9a6331c81151.png",
"val":"My shoe is tied yet / untied.",
"oldVal":"My shoe is tied yet / untied.",
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"y"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"u"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"n"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
]
},
{
"answerArr":[
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"p"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"g"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"g"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"m"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"i"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"s"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"l"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"a"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/30621df106455523573e3871a5a5c598.mp3",
"from":78,
"to":85,
"letterFrom":78,
"letterTo":80
},
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"p"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"g"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"l"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"a"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"u"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"s"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"g"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"h"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"m"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"from":62,
"to":74,
"letterFrom":-1,
"letterTo":-1
}
],
"index":3,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/71eb8fcc0895873363840db7bc0c5883.mp3",
"picUrl":"http://staging-teach.cdn.ireadabc.com/c4a540d4be404cc04cd0460c9cad1ecc.png",
"val":"Misa always talk with partners when she as a guide. That will lead us right / mislead.",
"oldVal":"Misa always talk with partners when she as a guide. That will lead us right / mislead.",
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"p"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"g"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"l"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"a"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"u"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"s"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"g"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"h"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"m"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"i"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"s"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"l"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"a"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
]
}
]
};
export {defaultVal}
\ No newline at end of file
......@@ -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