Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
H
hw_online_008
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
hw_online_008
Commits
62edde1c
Commit
62edde1c
authored
Mar 03, 2020
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add syncPage
parent
2d4d3d00
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
172 additions
and
154 deletions
+172
-154
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+1
-1
custom-hot-zone.component.ts
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
+26
-138
form.component.html
src/app/form/form.component.html
+3
-3
form.component.scss
src/app/form/form.component.scss
+49
-2
play.component.ts
src/app/play/play.component.ts
+92
-9
index.html
src/index.html
+1
-1
No files found.
src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
62edde1c
...
...
@@ -75,7 +75,7 @@
<div
class=
"save-box"
>
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
(
click
)="
saveClick
()"
[
disabled
]="
saveDisabled
"
>
<i
nz-icon
type=
"save"
></i>
Save
</button>
...
...
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
62edde1c
...
...
@@ -14,6 +14,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// @Input()
// bgItem = null;
_bgItem
=
null
;
...
...
@@ -27,7 +29,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
return
this
.
_bgItem
;
}
@
Input
()
//
@Input()
imgItemArr
=
null
;
@
Input
()
...
...
@@ -35,7 +37,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@
Input
()
//
@Input()
hotZoneArr
=
null
;
...
...
@@ -80,9 +82,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
oldPos
;
saveDisabled
=
true
;
curItem
;
bg
:
MySprite
;
bg
;
changeSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
...
...
@@ -103,7 +105,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
initListener
();
// this.init();
this
.
update
();
}
...
...
@@ -123,6 +124,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
console
.
log
(
'
e:
'
,
e
);
this
.
bgItem
.
url
=
e
.
url
;
this
.
refreshBackground
();
this
.
saveDisabled
=
false
;
}
refreshBackground
(
callBack
=
null
)
{
...
...
@@ -165,22 +168,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
refreshHotZoneId
();
console
.
log
(
'
hotZoneArr:
'
,
this
.
hotZoneArr
);
}
onImgUploadSuccessByImg
(
e
,
img
)
{
img
.
pic_url
=
e
.
url
;
this
.
refreshImage
(
img
);
this
.
saveDisabled
=
false
;
}
refreshImage
(
img
)
{
this
.
hideAllLineDash
();
img
.
picItem
=
this
.
getPicItem
(
img
);
this
.
refreshImageId
();
}
refreshHotZoneId
()
{
...
...
@@ -195,16 +189,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
refreshImageId
()
{
for
(
let
i
=
0
;
i
<
this
.
imgArr
.
length
;
i
++
)
{
this
.
imgArr
[
i
].
id
=
i
;
if
(
this
.
imgArr
[
i
].
picItem
)
{
this
.
imgArr
[
i
].
picItem
.
text
=
'
Image-
'
+
(
i
+
1
);
}
}
}
getHotZoneItem
(
saveData
=
null
)
{
...
...
@@ -226,7 +211,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
scaleY
=
saveRect
.
height
/
item
.
height
;
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
item
[
'
key
'
]
=
saveData
.
key
;
}
if
(
!
item
[
'
key
'
])
{
item
[
'
key
'
]
=
Date
.
now
().
toString
();
}
item
.
showLineDash
();
...
...
@@ -236,51 +226,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
getPicItem
(
img
,
saveData
=
null
)
{
const
item
=
new
EditorItem
(
this
.
ctx
);
item
.
load
(
img
.
pic_url
).
then
(
img
=>
{
let
maxW
,
maxH
;
if
(
this
.
bg
)
{
maxW
=
this
.
bg
.
width
*
this
.
bg
.
scaleX
;
maxH
=
this
.
bg
.
height
*
this
.
bg
.
scaleY
;
}
else
{
maxW
=
this
.
canvasWidth
;
maxH
=
this
.
canvasHeight
;
}
let
scaleX
=
maxW
/
3
/
item
.
width
;
let
scaleY
=
maxH
/
3
/
item
.
height
;
if
(
item
.
height
*
scaleX
<
this
.
canvasHeight
)
{
item
.
setScaleXY
(
scaleX
);
}
else
{
item
.
setScaleXY
(
scaleY
);
}
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
if
(
saveData
)
{
const
saveRect
=
saveData
.
rect
;
item
.
setScaleXY
(
saveRect
.
width
/
item
.
width
);
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
}
else
{
item
.
showLineDash
();
}
});
return
item
;
}
onAudioUploadSuccessByImg
(
e
,
img
)
{
img
.
audio_url
=
e
.
url
;
}
deleteItem
(
e
,
i
)
{
// this.imgArr.splice(i , 1);
...
...
@@ -288,6 +234,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
refreshHotZoneId
();
this
.
saveDisabled
=
false
;
}
...
...
@@ -381,46 +329,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initImgArr
()
{
console
.
log
(
'
this.imgItemArr:
'
,
this
.
imgItemArr
);
let
curBgRect
;
if
(
this
.
bg
)
{
curBgRect
=
this
.
bg
.
getBoundingBox
();
}
else
{
curBgRect
=
{
x
:
0
,
y
:
0
,
width
:
this
.
canvasWidth
,
height
:
this
.
canvasHeight
};
}
let
oldBgRect
=
this
.
bgItem
.
rect
;
if
(
!
oldBgRect
)
{
oldBgRect
=
curBgRect
;
}
const
rate
=
curBgRect
.
width
/
oldBgRect
.
width
;
console
.
log
(
'
rate:
'
,
rate
);
this
.
imgArr
=
[];
const
arr
=
this
.
imgItemArr
.
concat
();
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
const
img
=
{
pic_url
:
data
.
pic_url
};
data
.
rect
.
x
*=
rate
;
data
.
rect
.
y
*=
rate
;
data
.
rect
.
width
*=
rate
;
data
.
rect
.
height
*=
rate
;
data
.
rect
.
x
+=
curBgRect
.
x
;
data
.
rect
.
y
+=
curBgRect
.
y
;
img
[
'
picItem
'
]
=
this
.
getPicItem
(
img
,
data
);
img
[
'
audio_url
'
]
=
arr
[
i
].
audio_url
;
this
.
imgArr
.
push
(
img
);
}
this
.
refreshImageId
();
}
initData
()
{
...
...
@@ -492,6 +400,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
curItem
.
y
+=
addY
;
}
this
.
saveDisabled
=
false
;
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
}
...
...
@@ -550,10 +460,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// s = lenW / this.curItem.width;
//
// } else {
if
(
lenH
<
minLen
)
{
lenH
=
minLen
;
}
s
=
lenH
/
this
.
curItem
.
height
;
if
(
lenH
<
minLen
)
{
lenH
=
minLen
;
}
s
=
lenH
/
this
.
curItem
.
height
;
// }
...
...
@@ -596,20 +506,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeCurItem
(
item
)
{
this
.
hideAllLineDash
();
this
.
curItem
=
item
;
this
.
curItem
.
showLineDash
();
}
hideAllLineDash
()
{
for
(
let
i
=
0
;
i
<
this
.
imgArr
.
length
;
i
++
)
{
if
(
this
.
imgArr
[
i
].
picItem
)
{
this
.
imgArr
[
i
].
picItem
.
hideLineDash
();
}
}
}
update
()
{
...
...
@@ -761,6 +663,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick
()
{
this
.
saveDisabled
=
true
;
const
bgItem
=
this
.
bgItem
;
if
(
this
.
bg
)
{
bgItem
[
'
rect
'
]
=
this
.
bg
.
getBoundingBox
();
...
...
@@ -770,30 +675,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// const imgItemArr = [];
// const imgArr = this.imgArr;
// for (let i = 0; i < imgArr.length; i++) {
//
// const imgItem = {
// id: imgArr[i].id,
// pic_url: imgArr[i].pic_url,
// audio_url: imgArr[i].audio_url,
// };
// if (imgArr[i].picItem) {
// imgItem['rect'] = imgArr[i].picItem.getBoundingBox();
// imgItem['rect'].x -= bgItem['rect'].x;
// imgItem['rect'].y -= bgItem['rect'].y;
// }
// imgItemArr.push(imgItem);
// }
const
hotZoneItemArr
=
[];
const
hotZoneArr
=
this
.
hotZoneArr
;
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
const
hotZoneItem
=
{
index
:
hotZoneArr
[
i
].
index
,
key
:
hotZoneArr
[
i
].
key
};
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
getBoundingBox
();
hotZoneItem
[
'
rect
'
].
x
=
Math
.
round
(
(
hotZoneItem
[
'
rect
'
].
x
-
bgItem
[
'
rect
'
].
x
)
*
100
)
/
100
;
...
...
src/app/form/form.component.html
View file @
62edde1c
...
...
@@ -17,10 +17,10 @@
<div
style=
"padding: 2vw"
>
<div
style=
"display: flex; align-items: center; width:
7
0%"
>
<div
style=
"display: flex; align-items: center; width:
8
0%"
>
<span
style=
"padding-right: 5px; width: 1
2
0px;"
>
question-{{i + 1}}:
</span>
<input
type=
"text"
nz-input
placeholder=
""
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveItem
()"
>
<span
style=
"padding-right: 5px; width: 1
6
0px;"
>
question-{{i + 1}}:
</span>
<input
type=
"text"
nz-input
placeholder=
""
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveItem
()"
>
<button
style=
"margin-left: 10px;"
nz-button
nzType=
"danger"
(
click
)="
deleteItem
(
it
)"
>
<i
nz-icon
type=
"close"
></i>
</button>
...
...
src/app/form/form.component.scss
View file @
62edde1c
@import
'../style/common_mixin'
;
.model-content
{
width
:
100%
;
height
:
100%
;
//width: 100%;
//height: 100%;
.item-box
{
width
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
flex-direction
:
column
;
padding
:
10px
;
padding-bottom
:
5vw
;
padding-top
:
5vw
;
}
.pic-sound-box
{
width
:
50%
;
display
:
flex
;
//align-items: center;
flex-direction
:
column
}
.add-btn-box
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
//width: 180px;
height
:
20vw
;
//background: #FFDC00;
padding
:
10px
;
padding-top
:
5vw
;
}
}
src/app/play/play.component.ts
View file @
62edde1c
...
...
@@ -105,6 +105,8 @@ export class PlayComponent implements OnInit, OnDestroy {
// 是否游戏进行中
isGaming
;
serverAllUser
;
@
HostListener
(
'
window:resize
'
,
[
'
$event
'
])
onResize
(
event
)
{
this
.
winResizeEventStream
.
next
();
...
...
@@ -116,7 +118,14 @@ export class PlayComponent implements OnInit, OnDestroy {
ngOnInit
()
{
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
getData
((
data
)
=>
{
getData
((
data
,
aspect
)
=>
{
if
(
aspect
)
{
console
.
log
(
'
aspect :
'
,
aspect
);
this
.
serverAllUser
=
aspect
.
all_user
;
}
if
(
window
[
'
air
'
].
airClassInfo
.
user
.
classRole
==
'
tea
'
)
{
this
.
teachFlag
=
true
;
}
...
...
@@ -296,6 +305,7 @@ export class PlayComponent implements OnInit, OnDestroy {
console
.
log
(
'
in initData
'
,
this
.
data
);
this
.
canTouch
=
true
;
this
.
gameEndFlag
=
false
;
this
.
curPageIndex
=
0
;
this
.
endPageArr
=
[];
...
...
@@ -473,6 +483,33 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
refreshAnswerNum
();
this
.
initCover
();
this
.
initTeacherPage
();
this
.
syncPage
();
}
syncPage
()
{
const
allUser
=
this
.
serverAllUser
;
if
(
allUser
)
{
console
.
log
(
'
allUser:
'
,
allUser
);
for
(
let
i
=
0
;
i
<
allUser
.
length
;
i
++
)
{
const
userData
=
allUser
[
i
];
if
(
userData
.
user
.
classRole
==
'
tea
'
)
{
if
(
userData
.
aspect
)
{
const
aspect
=
JSON
.
parse
(
userData
.
aspect
);
console
.
log
(
'
aspect:
'
,
aspect
);
if
(
aspect
.
startFlag
)
{
this
.
isGaming
=
true
;
}
}
break
;
}
}
}
}
teacherPageArr
;
...
...
@@ -634,6 +671,7 @@ export class PlayComponent implements OnInit, OnDestroy {
label
.
y
=
(
this
.
bgRect
.
y
-
this
.
bgRect
.
height
/
2
*
this
.
bgRect
.
scaleY
)
/
2
;
label
.
fontColor
=
'
#fff143
'
;
label
.
setShadow
(
0
,
5
,
5
,
'
rgba(0,0,0,0.3)
'
);
label
.
anchorX
=
0
;
this
.
titleLabel
=
label
;
this
.
renderArr
.
push
(
label
);
...
...
@@ -711,11 +749,15 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
playAudio
(
'
tip
'
,
true
);
this
.
showAudio
();
});
}
else
{
this
.
titleLabel
.
text
=
data
.
text
;
}
this
.
titleLabel
.
refreshSize
();
}
...
...
@@ -750,7 +792,12 @@ export class PlayComponent implements OnInit, OnDestroy {
const
data
=
this
.
picArr
[
this
.
curPageIndex
];
const
audio
=
this
.
audioObj
[
data
.
audio_url
];
if
(
audio
)
{
audio
.
play
();
try
{
audio
.
play
();
}
catch
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
}
}
}
...
...
@@ -826,7 +873,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
sendServerEvent
(
key
,
data
=
null
)
{
console
.
log
(
`event:
${
key
}
, data:
${
data
}
`
);
console
.
log
(
'
data:
'
,
data
);
const
c
=
(
<
any
>
window
).
courseware
;
c
.
sendEvent
(
key
,
data
);
}
...
...
@@ -902,29 +949,49 @@ export class PlayComponent implements OnInit, OnDestroy {
const
c
=
(
<
any
>
window
).
courseware
;
const
that
=
this
;
if
(
this
.
teachFlag
)
{
c
.
onEvent
(
'
start_game
'
,
function
()
{
c
.
onEvent
(
'
start_game
'
,
function
(
data
,
next
)
{
console
.
log
(
'
show teacher page
'
);
that
.
isGaming
=
true
;
that
.
teacherPage
.
visible
=
true
;
next
();
});
c
.
onEvent
(
'
score_data
'
,
function
(
data
)
{
c
.
onEvent
(
'
score_data
'
,
function
(
data
,
next
)
{
that
.
addTeacherPageData
(
data
);
next
();
});
}
else
{
c
.
onEvent
(
'
start_game
'
,
function
()
{
c
.
onEvent
(
'
start_game
'
,
function
(
data
,
next
)
{
that
.
isGaming
=
true
;
this
.
showAudio
();
next
();
});
// todo 学生的游戏开始
}
}
titleLabelClicked
()
{
this
.
showAudio
();
}
// todo
mapDown
(
event
)
{
if
(
this
.
gameEndFlag
)
{
return
;
}
(
window
as
any
).
test
=
this
;
// 如果游戏未开始,并且是老师身份,则点击时开始游戏
if
(
!
this
.
isGaming
&&
this
.
teachFlag
&&
this
.
checkClickTarget
(
this
.
startBtn
))
{
this
.
sendServerEvent
(
'
start_game
'
,
{});
this
.
sendServerEvent
(
'
start_game
'
,
{
startFlag
:
true
});
return
;
}
if
(
!
this
.
isGaming
)
{
...
...
@@ -933,6 +1000,9 @@ export class PlayComponent implements OnInit, OnDestroy {
if
(
!
this
.
canTouch
)
{
return
;
}
this
.
canTouch
=
false
;
if
(
this
.
teacherPage
.
visible
)
{
if
(
this
.
checkClickTarget
(
this
.
arrowL
))
{
this
.
changePage
(
-
1
);
...
...
@@ -951,6 +1021,11 @@ export class PlayComponent implements OnInit, OnDestroy {
return
;
}
}
if
(
this
.
checkClickTarget
(
this
.
titleLabel
))
{
this
.
titleLabelClicked
();
return
;
}
this
.
clickWrong
();
}
...
...
@@ -980,7 +1055,6 @@ export class PlayComponent implements OnInit, OnDestroy {
const
options
=
data
.
options
;
if
(
options
[
index
]
&&
options
[
index
].
checked
)
{
console
.
log
(
'
right
'
);
this
.
setServerPicArr
(
data
);
this
.
showFrame
(
index
);
}
else
{
console
.
log
(
'
wrong
'
);
...
...
@@ -1091,11 +1165,16 @@ export class PlayComponent implements OnInit, OnDestroy {
return
;
}
this
.
setServerPicArr
(
null
);
this
.
curPageIndex
++
;
this
.
refreshPageLabel
();
if
(
this
.
curPageIndex
>=
this
.
picArr
.
length
)
{
this
.
gameEnd
();
return
;
...
...
@@ -1159,6 +1238,8 @@ export class PlayComponent implements OnInit, OnDestroy {
setTimeout
(()
=>
{
this
.
showPetalFlag
=
false
;
},
5000
);
this
.
gameEndFlag
=
true
;
}
update
()
{
...
...
@@ -1513,13 +1594,15 @@ export class PlayComponent implements OnInit, OnDestroy {
return
new
Promise
((
resolve
,
reject
)
=>
{
const
audio
=
new
Audio
();
audio
.
oncanplay
=
(
a
)
=>
{
resolve
();
};
audio
.
onerror
=
()
=>
{
reject
();
};
audio
.
src
=
url
;
audio
.
load
();
resolve
();
});
}
...
...
src/index.html
View file @
62edde1c
...
...
@@ -7,7 +7,7 @@
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<link
rel=
"icon"
type=
"image/x-icon"
href=
"favicon.ico"
>
<script
type=
"text/javascript"
src=
"https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"
></script>
<script
type=
"text/javascript"
src=
"https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air
_online
.js"
></script>
</head>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment