forked from Open-CT/openct-tasks
'对poles/inclusions/two-connect/pattern添加步骤引导'
This commit is contained in:
stacker
parent
c646d51411
commit
c689a50a17
|
|
@ -0,0 +1,80 @@
|
||||||
|
#guide-box{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 998;
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area{
|
||||||
|
box-shadow: 1px 1px 100000px 100000px rgb(124 152 209 / 50%);
|
||||||
|
position: fixed;
|
||||||
|
transition: all 500ms;
|
||||||
|
/* padding: 10px 0px; */
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area > .guide-tip-box{
|
||||||
|
height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
bottom:-60px;
|
||||||
|
left: 60px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
|
||||||
|
height: 100%;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0px 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle{
|
||||||
|
/*content:'';
|
||||||
|
display: block;*/
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 12px solid transparent;
|
||||||
|
border-right: 12px solid transparent;
|
||||||
|
border-bottom: 12px solid white;
|
||||||
|
top: -12px;
|
||||||
|
/*left: 30px;*/
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #FDF151;
|
||||||
|
margin: 14px 10px 14px 0px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
|
||||||
|
height: 100%;
|
||||||
|
line-height: 36px;
|
||||||
|
display: inline-block;
|
||||||
|
white-space:nowrap;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
white-space:nowrap;
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
|
||||||
|
padding: 0px 8px;
|
||||||
|
height: 24px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: 5px 0px;
|
||||||
|
border-radius: 6px;
|
||||||
|
line-height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,186 @@
|
||||||
|
/*
|
||||||
|
* @Author: stacker
|
||||||
|
* @Date: 2021-07-06 23:20:58
|
||||||
|
* @LastEditTime: 2021-07-07 23:36:24
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: 步骤引导文件
|
||||||
|
* @FilePath: \bebras-tasks\_common\modules\integrationAPI.01\installationAPI.01\pemFioi\stepGuidance.js
|
||||||
|
*/
|
||||||
|
|
||||||
|
class StepGuidance{
|
||||||
|
/**
|
||||||
|
* elementStepList 步骤元素列表
|
||||||
|
* 元素参数：
|
||||||
|
* {
|
||||||
|
* target: 目标元素:String
|
||||||
|
* tip: 提示信息:String
|
||||||
|
* tips_position:{ 提示信息框位置控制:String
|
||||||
|
* bottom: 提示信息框距离选中框下部位置:String
|
||||||
|
* left: 提示信息框距离选中框左侧位置:String
|
||||||
|
* t_left: 提示信息框三角形位置:String
|
||||||
|
* }
|
||||||
|
* padding: 选中框padding大小:String
|
||||||
|
* level: 元素所属于难度:Array
|
||||||
|
* step:{ 元素所属步骤
|
||||||
|
* easy: 元素在easy难度下数以第几部:Number
|
||||||
|
* medium: 元素在medium难度下数以第几部:Number
|
||||||
|
* hard: 元素在hard难度下数以第几部:Number
|
||||||
|
* }
|
||||||
|
* borderRadius: 选中框圆角大小:Number
|
||||||
|
* isSVG: 元素是否属于SVG元素:Boolean
|
||||||
|
* }
|
||||||
|
*/
|
||||||
|
elementStepList = []
|
||||||
|
level = "easy"
|
||||||
|
guidanceName = ""
|
||||||
|
stepIndex = 0
|
||||||
|
constructor(stepList,guidanceName){
|
||||||
|
let levelHash = window.location.hash?window.location.hash.replace('#',''):'easy'
|
||||||
|
this.level = ['easy','medium','hard'].includes(levelHash)?levelHash:'easy'
|
||||||
|
this.elementStepList = stepList.filter(item=>item.level.includes(this.level))
|
||||||
|
this.guidanceName = guidanceName
|
||||||
|
}
|
||||||
|
init(){
|
||||||
|
if(this.getCookie()){
|
||||||
|
console.log('页面已经加载过指导，不再加载')
|
||||||
|
}else{
|
||||||
|
window.onload = ()=>{
|
||||||
|
this.guidanceBegin()
|
||||||
|
this.updateGuidanceStep()
|
||||||
|
$('#btn-box').on('click','#next-step-btn',()=>{
|
||||||
|
this.stepIndex += 1
|
||||||
|
this.updateGuidanceStep()
|
||||||
|
})
|
||||||
|
$('#btn-box').on('click','#last-step-btn',()=>{
|
||||||
|
this.stepIndex -= 1
|
||||||
|
this.updateGuidanceStep()
|
||||||
|
})
|
||||||
|
$('#btn-box').on('click','#complete-btn',()=>{
|
||||||
|
$('#guide-box').remove()
|
||||||
|
this.setCookie()
|
||||||
|
})
|
||||||
|
$(window).resize(()=>{
|
||||||
|
this.updateGuidanceStep()
|
||||||
|
})
|
||||||
|
$(document).scroll(()=>{
|
||||||
|
this.updateGuidanceStep()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
guidanceBegin(){
|
||||||
|
//载入引导主体
|
||||||
|
if($("#guide-box").length==0){
|
||||||
|
$('body').append(`<div id="guide-box">
|
||||||
|
<div class="guide-area">
|
||||||
|
<div class="guide-tip-box" id="guide-tip">
|
||||||
|
<div class="guide-tip-content">
|
||||||
|
<div class="triangle"></div>
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="tip-info">
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="button-box" id="btn-box"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
updateGuidanceStep(){
|
||||||
|
let elementTarget = this.elementStepList[this.elementStepList.findIndex(item=>item.step[this.level]==this.stepIndex)]
|
||||||
|
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle').css('left',elementTarget.tip_position.t_left)
|
||||||
|
$('#guide-box > .guide-area').css('width',this.getTargetWidth(elementTarget)+'px')
|
||||||
|
.css('height',this.getTargetHeight(elementTarget)+'px')
|
||||||
|
.css('top',this.getTargetTop(elementTarget)+'px')
|
||||||
|
.css('left',this.getTargetLeft(elementTarget)+'px')
|
||||||
|
.css('border-radius',elementTarget.borderRadius+'px')
|
||||||
|
.css('padding',elementTarget.padding)
|
||||||
|
for(let key in elementTarget.tip_position){
|
||||||
|
$('#guide-tip').css(key,elementTarget.tip_position[key])
|
||||||
|
}
|
||||||
|
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementTarget.tips)
|
||||||
|
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
||||||
|
${this.stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
|
||||||
|
${this.stepIndex!=this.elementStepList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
|
||||||
|
${this.elementStepList.length-1==this.stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
||||||
|
`)
|
||||||
|
}
|
||||||
|
getCookie(cookieName=this.guidanceName){
|
||||||
|
var name = cookieName + "=";
|
||||||
|
var ca = document.cookie.split(';');
|
||||||
|
for(var i=0; i<ca.length; i++) {
|
||||||
|
var c = ca[i].trim();
|
||||||
|
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
setCookie(cookieName=this.guidanceName,value='true'){
|
||||||
|
var expdate = new Date(); //初始化时间
|
||||||
|
expdate.setTime(expdate.getTime() + 5 * 60 * 1000); //时间单位毫秒
|
||||||
|
document.cookie = cookieName+"="+value+";expires="+expdate.toGMTString()+";path=/";
|
||||||
|
}
|
||||||
|
getTargetWidth(elementTarget){
|
||||||
|
if(typeof elementTarget.target == 'object'){
|
||||||
|
let value = 0;
|
||||||
|
let leftValue = [2000,0]
|
||||||
|
for(let elementItem of elementTarget.target){
|
||||||
|
let elementLeft = $(elementItem).offset().left
|
||||||
|
if(elementLeft<leftValue[0]){
|
||||||
|
leftValue[0] = elementLeft
|
||||||
|
}
|
||||||
|
|
||||||
|
if(elementLeft>leftValue[1]){
|
||||||
|
leftValue[1] = elementLeft
|
||||||
|
value = 0
|
||||||
|
//value += $(elementItem).width()
|
||||||
|
value += elementTarget.isSVG?$(elementItem).get(0).getBBox().width:$(elementItem).outerWidth()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return value + leftValue[1] - leftValue[0]
|
||||||
|
}
|
||||||
|
return elementTarget.isSVG?$(elementTarget.target).get(0).getBBox().width:$(elementTarget.target).outerWidth()
|
||||||
|
}
|
||||||
|
getTargetHeight(elementTarget) {
|
||||||
|
if(typeof elementTarget.target == 'object'){
|
||||||
|
let value = 0;
|
||||||
|
let topValue = [2000,0]
|
||||||
|
for(let elementItem of elementTarget.target){
|
||||||
|
let elementTop = $(elementItem).offset().top
|
||||||
|
if(elementTop<topValue[0]){
|
||||||
|
topValue[0] = elementTop
|
||||||
|
}
|
||||||
|
|
||||||
|
if(elementTop>topValue[1]){
|
||||||
|
topValue[1] = elementTop
|
||||||
|
value = 0
|
||||||
|
//value += $(elementItem).height()
|
||||||
|
value += elementTarget.isSVG?$(elementItem).get(0).getBBox().height:$(elementItem).outerHeight()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return value + topValue[1] - topValue[0]
|
||||||
|
}
|
||||||
|
return elementTarget.isSVG?$(elementTarget.target).get(0).getBBox().height:$(elementTarget.target).outerHeight()
|
||||||
|
}
|
||||||
|
getTargetTop(elementTarget) {
|
||||||
|
if(typeof elementTarget.target == 'object'){
|
||||||
|
let value = 2000
|
||||||
|
for(let elementItem of elementTarget.target){
|
||||||
|
value = $(elementItem).offset().top<value?$(elementItem).offset().top:value
|
||||||
|
}
|
||||||
|
return value - parseFloat(elementTarget.padding.split(' ')[0].replace('px')) - $(document).scrollTop()
|
||||||
|
}
|
||||||
|
return $(elementTarget.target).offset().top - parseFloat(elementTarget.padding.split(' ')[0].replace('px')) - $(document).scrollTop()
|
||||||
|
}
|
||||||
|
getTargetLeft(elementTarget) {
|
||||||
|
if(typeof elementTarget.target == 'object'){
|
||||||
|
let value = 2000
|
||||||
|
for(let elementItem of elementTarget.target){
|
||||||
|
value = $(elementItem).offset().left<value?$(elementItem).offset().left:value
|
||||||
|
}
|
||||||
|
return value - parseFloat(elementTarget.padding.split(' ')[1].replace('px'))
|
||||||
|
}
|
||||||
|
return $(elementTarget.target).offset().left - parseFloat(elementTarget.padding.split(' ')[1].replace('px'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -305,9 +305,9 @@ h1 .stars {
|
||||||
#popupMessage.noAvatar .message {
|
#popupMessage.noAvatar .message {
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
border: none;
|
border: none;
|
||||||
display: flex;
|
/* display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center; */
|
||||||
}
|
}
|
||||||
#popupMessage p {
|
#popupMessage p {
|
||||||
margin: .5em 0 0;
|
margin: .5em 0 0;
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,61 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
|
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
let elementList = [{
|
||||||
|
target:'#paper > svg',
|
||||||
|
tips:'拖动任意柱子，可以改变柱子的位置。',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 0px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:0,
|
||||||
|
medium:0,
|
||||||
|
hard:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:'#displayHelper_validate',
|
||||||
|
tips:'点击“验证一下”可以验证你的效果~',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 0px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:1,
|
||||||
|
medium:1,
|
||||||
|
hard:1
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
},{
|
||||||
|
target:'#displayHelper_cancel',
|
||||||
|
tips:'你可以随时重新开始呦～',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 0px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:2,
|
||||||
|
medium:2,
|
||||||
|
hard:2
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
}]
|
||||||
|
let stepGuidance = new StepGuidance(elementList,'poles')
|
||||||
|
stepGuidance.init()
|
||||||
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#paper {
|
#paper {
|
||||||
margin: 1em auto;
|
margin: 1em auto;
|
||||||
|
|
@ -56,238 +111,14 @@
|
||||||
#error {
|
#error {
|
||||||
min-height: 1em;
|
min-height: 1em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fullbg {
|
|
||||||
background-color: #7C98D1;
|
|
||||||
opacity: 0.5;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0.5;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1500;
|
|
||||||
filter: alpha(opacity=50);
|
|
||||||
-moz-opacity: 0.5;
|
|
||||||
-khtml-opacity: 0.5;
|
|
||||||
display: block;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
@media (min-width:1200px) {
|
|
||||||
#displayHelper_validate::before {
|
|
||||||
content: '';
|
|
||||||
width: 200%;
|
|
||||||
height: 175%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: -40%;
|
|
||||||
left: 0%;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_validate::after {
|
|
||||||
content: '您可以验证答案是否正确或重新开始作答~';
|
|
||||||
width: 200%;
|
|
||||||
height: 180%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 250%;
|
|
||||||
left: 10%;
|
|
||||||
border-radius: 83px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_saved::after {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 0 25px 30px 25px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent transparent #fff transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 120%;
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#popupMessage.floatingMessage {
|
|
||||||
z-index: 2100;
|
|
||||||
}
|
|
||||||
#paper::before {
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: 0%;
|
|
||||||
right: 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#paper::after {
|
|
||||||
content: '拖动任意柱子，可以改变柱子的位置';
|
|
||||||
width: 288px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 110%;
|
|
||||||
left: 30%;
|
|
||||||
border-radius: 83px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zone_2::after {
|
|
||||||
content: '我知道了！';
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 150%;
|
|
||||||
left: 60%;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width:1199px) {
|
|
||||||
#displayHelper_validate::before {
|
|
||||||
content: '';
|
|
||||||
width: 200%;
|
|
||||||
height: 175%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: -40%;
|
|
||||||
left: 0%;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_validate::after {
|
|
||||||
content: '您可以验证答案是否正确或重新开始作答~';
|
|
||||||
width: 200%;
|
|
||||||
height: 180%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 250%;
|
|
||||||
left: 10%;
|
|
||||||
border-radius: 83px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_saved::after {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 0 25px 30px 25px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent transparent #fff transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 120%;
|
|
||||||
left: 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#popupMessage.floatingMessage {
|
|
||||||
z-index: 2100;
|
|
||||||
}
|
|
||||||
#paper::before {
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: 0%;
|
|
||||||
right: 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#paper::after {
|
|
||||||
content: '拖动任意柱子，可以改变柱子的位置';
|
|
||||||
width: 288px;
|
|
||||||
height: 25px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 5px);
|
|
||||||
left: 30%;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zone_2::after {
|
|
||||||
content: '我知道了！';
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(120% + 160px);
|
|
||||||
left: 60%;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="fullbg">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="task">
|
<div id="task">
|
||||||
<!-- <h1>小松鼠跳柱子</h1>-->
|
<!-- <h1>小松鼠跳柱子</h1>-->
|
||||||
<!-- <div id="tabsContainer"></div>-->
|
<!-- <div id="tabsContainer"></div>-->
|
||||||
|
|
@ -320,24 +151,6 @@
|
||||||
<h2>答案解析</h2>
|
<h2>答案解析</h2>
|
||||||
<h2>这是提示信息！折半查找，快速排序</h2>
|
<h2>这是提示信息！折半查找，快速排序</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- task-solution -->
|
|
||||||
<script>
|
|
||||||
setTimeout(() => {
|
|
||||||
console.log($(window).width());
|
|
||||||
$('#displayHelper_validate').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#displayHelper_saved').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#displayHelper_cancel').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#paper').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#zone_2').addClass('relative').css({'z-index': 2000},{'pointer-events': 'none'});
|
|
||||||
}, 50);
|
|
||||||
$('#zone_2').on('click', function () {
|
|
||||||
$('#zone_2').append("<style>#zone_2::after{content: none}</style>");
|
|
||||||
$('#displayHelper_validate').append("<style>#displayHelper_validate::after,#displayHelper_validate::before{content: none}</style>");
|
|
||||||
$('#displayHelper_saved').append("<style>#displayHelper_saved::after{content: none}</style>");
|
|
||||||
$('#paper').append("<style>#paper::after,#paper::before{content: none}</style>");
|
|
||||||
$('#fullbg').css('display','none');
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -56,208 +56,89 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onload = function(){
|
let elementList = [{
|
||||||
|
target:['#displayHelper_validate','#displayHelper_cancel'],
|
||||||
let levelHash = window.location.hash?window.location.hash.replace('#',''):'easy'
|
tips:'您可以验证答案是否正确或重新开始',
|
||||||
let level = ['easy','medium','hard'].includes(levelHash)?levelHash:'easy'
|
tip_position:{
|
||||||
let stepIndex = 0
|
bottom:'-62px',
|
||||||
$('body').append(`<div id="guide-box">
|
left:'30px',
|
||||||
<div class="guide-area">
|
t_left:'30px'
|
||||||
<div class="guide-tip-box" id="guide-tip">
|
},
|
||||||
<div class="guide-tip-content">
|
padding:'10px 0px',
|
||||||
<div class="triangle"></div>
|
level:['easy','medium','hard'],
|
||||||
<div class="circle"></div>
|
step:{
|
||||||
<div class="tip-info">
|
easy:2,
|
||||||
<span></span>
|
medium:2,
|
||||||
</div>
|
hard:2
|
||||||
<div class="button-box" id="btn-box"></div>
|
},
|
||||||
</div>
|
borderRadius:16,
|
||||||
</div>
|
},{
|
||||||
</div>
|
target:'#paper > svg > circle:nth-of-type(4)',
|
||||||
</div>`)
|
tips:'点击空白小圆圈,可以把小石子放进去',
|
||||||
let elementList = [{
|
tip_position:{
|
||||||
target:['#displayHelper_validate','#displayHelper_cancel'],
|
bottom:'-62px',
|
||||||
tips:'您可以验证答案是否正确或重新开始',
|
left:'0px',
|
||||||
tip_position:{
|
t_left:'30px'
|
||||||
bottom:'-62px',
|
},
|
||||||
left:'30px',
|
padding:'10px 10px',
|
||||||
t_left:'30px'
|
level:['easy'],
|
||||||
},
|
step:{
|
||||||
padding:'10px 0px',
|
easy:0,
|
||||||
level:['easy','medium','hard'],
|
},
|
||||||
step:{
|
borderRadius:16,
|
||||||
easy:2,
|
isSVG:true
|
||||||
medium:2,
|
},{
|
||||||
hard:2
|
target:'#paper > svg > circle:nth-of-type(19)',
|
||||||
},
|
tips:'点击空白小圆圈,可以把小石子放进去',
|
||||||
borderRadius:16,
|
tip_position:{
|
||||||
},{
|
bottom:'-62px',
|
||||||
target:'#paper > svg > circle:nth-of-type(4)',
|
left:'0px',
|
||||||
tips:'点击空白小圆圈,可以把小石子放进去',
|
t_left:'30px'
|
||||||
tip_position:{
|
},
|
||||||
bottom:'-62px',
|
padding:'10px 10px',
|
||||||
left:'0px',
|
level:['hard'],
|
||||||
t_left:'30px'
|
step:{
|
||||||
},
|
hard:0
|
||||||
padding:'10px 10px',
|
},
|
||||||
level:['easy'],
|
borderRadius:16,
|
||||||
step:{
|
isSVG:true
|
||||||
easy:0,
|
},{
|
||||||
},
|
target:'#paper > svg > circle:nth-of-type(8)',
|
||||||
borderRadius:16,
|
tips:'点击空白小圆圈,可以把小石子放进去',
|
||||||
isSVG:true
|
tip_position:{
|
||||||
},{
|
bottom:'-62px',
|
||||||
target:'#paper > svg > circle:nth-of-type(19)',
|
left:'0px',
|
||||||
tips:'点击空白小圆圈,可以把小石子放进去',
|
t_left:'30px'
|
||||||
tip_position:{
|
},
|
||||||
bottom:'-62px',
|
padding:'10px 10px',
|
||||||
left:'0px',
|
level:['medium'],
|
||||||
t_left:'30px'
|
step:{
|
||||||
},
|
medium:0
|
||||||
padding:'10px 10px',
|
},
|
||||||
level:['hard'],
|
borderRadius:16,
|
||||||
step:{
|
isSVG:true
|
||||||
hard:0
|
},{
|
||||||
},
|
target:'#undo',
|
||||||
borderRadius:16,
|
tips:'点击取消,或者点击放有石子的小圆圈可以把小石子取回储备库。',
|
||||||
isSVG:true
|
tip_position:{
|
||||||
},{
|
bottom:'-62px',
|
||||||
target:'#paper > svg > circle:nth-of-type(8)',
|
left:'-320px',
|
||||||
tips:'点击空白小圆圈,可以把小石子放进去',
|
t_left:'360px'
|
||||||
tip_position:{
|
},
|
||||||
bottom:'-62px',
|
padding:'10px 10px',
|
||||||
left:'0px',
|
level:['easy','medium','hard'],
|
||||||
t_left:'30px'
|
step:{
|
||||||
},
|
easy:1,
|
||||||
padding:'10px 10px',
|
medium:1,
|
||||||
level:['medium'],
|
hard:1
|
||||||
step:{
|
},
|
||||||
medium:0
|
borderRadius:16,
|
||||||
},
|
}]
|
||||||
borderRadius:16,
|
let stepGuidance = new StepGuidance(elementList,'registers')
|
||||||
isSVG:true
|
stepGuidance.init()
|
||||||
},{
|
|
||||||
target:'#undo',
|
|
||||||
tips:'点击取消,或者点击放有石子的小圆圈可以把小石子取回储备库。',
|
|
||||||
tip_position:{
|
|
||||||
bottom:'-62px',
|
|
||||||
left:'-320px',
|
|
||||||
t_left:'360px'
|
|
||||||
},
|
|
||||||
padding:'10px 10px',
|
|
||||||
level:['easy','medium','hard'],
|
|
||||||
step:{
|
|
||||||
easy:1,
|
|
||||||
medium:1,
|
|
||||||
hard:1
|
|
||||||
},
|
|
||||||
borderRadius:16,
|
|
||||||
}]
|
|
||||||
elementList = elementList.filter(item=>item.level.includes(level))
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
$('#btn-box').on('click','#next-step-btn',()=>{
|
|
||||||
stepIndex += 1
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
|
||||||
stepIndex -= 1
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
$('#btn-box').on('click','#complete-btn',()=>{
|
|
||||||
$('#guide-box').remove()
|
|
||||||
})
|
|
||||||
$(window).resize(()=>{
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
$(document).scroll(()=>{
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function updateGuide(elementList,itemIndex,stepIndex){
|
|
||||||
let elementItem = elementList[itemIndex]
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle').css('left',elementItem.tip_position.t_left)
|
|
||||||
$('#guide-box > .guide-area').css('width',getTargetWidth(elementItem.target,elementItem.isSVG)+'px')
|
|
||||||
.css('height',getTargetHeight(elementItem.target,elementItem.isSVG)+'px')
|
|
||||||
.css('top',getTargetTop(elementItem.target,parseFloat(elementItem.padding.split(' ')[0].replace('px')),elementItem.isSVG)+'px')
|
|
||||||
.css('left',getTargetLeft(elementItem.target,parseFloat(elementItem.padding.split(' ')[1].replace('px')),elementItem.isSVG)+'px')
|
|
||||||
.css('border-radius',elementItem.borderRadius+'px')
|
|
||||||
.css('padding',elementItem.padding)
|
|
||||||
|
|
||||||
for(let key in elementItem.tip_position){
|
|
||||||
$('#guide-tip').css(key,elementItem.tip_position[key])
|
|
||||||
}
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementItem.tips)
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
|
||||||
${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
|
|
||||||
${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
|
|
||||||
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
|
||||||
`)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetWidth(targetElement,isSVG){
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 0;
|
|
||||||
let leftValue = [2000,0]
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
let elementLeft = $(elementItem).offset().left
|
|
||||||
if(elementLeft<leftValue[0]){
|
|
||||||
leftValue[0] = elementLeft
|
|
||||||
}
|
|
||||||
|
|
||||||
if(elementLeft>leftValue[1]){
|
|
||||||
leftValue[1] = elementLeft
|
|
||||||
value = 0
|
|
||||||
value += $(elementItem).width()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value + leftValue[1] - leftValue[0]
|
|
||||||
}
|
|
||||||
return isSVG?$(targetElement).get(0).getBBox().width:$(targetElement).outerWidth()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetHeight(targetElement,isSVG) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 0;
|
|
||||||
let topValue = [2000,0]
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
let elementTop = $(elementItem).offset().top
|
|
||||||
if(elementTop<topValue[0]){
|
|
||||||
topValue[0] = elementTop
|
|
||||||
}
|
|
||||||
|
|
||||||
if(elementTop>topValue[1]){
|
|
||||||
topValue[1] = elementTop
|
|
||||||
value = 0
|
|
||||||
value += $(elementItem).height()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value + topValue[1] - topValue[0]
|
|
||||||
}
|
|
||||||
return isSVG?$(targetElement).get(0).getBBox().height:$(targetElement).outerHeight()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetTop(targetElement,padding,isSVG) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 2000
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
value = $(elementItem).offset().top<value?$(elementItem).offset().top:value
|
|
||||||
}
|
|
||||||
return value - padding - $(document).scrollTop()
|
|
||||||
}
|
|
||||||
return $(targetElement).offset().top - padding - $(document).scrollTop()
|
|
||||||
}
|
|
||||||
function getTargetLeft(targetElement,padding,isSVG) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 2000
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
value = $(elementItem).offset().left<value?$(elementItem).offset().left:value
|
|
||||||
}
|
|
||||||
return value - padding
|
|
||||||
}
|
|
||||||
return $(targetElement).offset().left - padding
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#paper {
|
#paper {
|
||||||
|
|
@ -274,88 +155,9 @@
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
#guide-box{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 998;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area{
|
|
||||||
box-shadow: 1px 1px 100000px 100000px rgb(124 152 209 / 50%);
|
|
||||||
position: fixed;
|
|
||||||
transition: all 500ms;
|
|
||||||
/* padding: 10px 0px; */
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box{
|
|
||||||
height: 36px;
|
|
||||||
position: absolute;
|
|
||||||
bottom:-60px;
|
|
||||||
left: 60px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
|
|
||||||
height: 100%;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0px 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle{
|
|
||||||
/*content:'';
|
|
||||||
display: block;*/
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 12px solid transparent;
|
|
||||||
border-right: 12px solid transparent;
|
|
||||||
border-bottom: 12px solid white;
|
|
||||||
top: -12px;
|
|
||||||
/*left: 30px;*/
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
margin: 14px 10px 14px 0px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
|
|
||||||
height: 100%;
|
|
||||||
line-height: 36px;
|
|
||||||
display: inline-block;
|
|
||||||
white-space:nowrap;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
white-space:nowrap;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
|
|
||||||
padding: 0px 8px;
|
|
||||||
height: 24px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin: 5px 0px;
|
|
||||||
border-radius: 6px;
|
|
||||||
line-height: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,91 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
let elementList = [{
|
||||||
|
target:'#rectangles > svg > path:nth-of-type(1)',
|
||||||
|
tips:'拖动每个矩形的蓝色角，可以改变矩形的大小~',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'0px',
|
||||||
|
t_left:'15px'
|
||||||
|
},
|
||||||
|
padding:'10px 15px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:0,
|
||||||
|
medium:0,
|
||||||
|
hard:0
|
||||||
|
},
|
||||||
|
borderRadius:8,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:['#current > svg > rect:nth-of-type(2)','#current > svg > rect:nth-of-type(3)','#current > svg > rect:nth-of-type(4)'],
|
||||||
|
tips:'你的图形会随着你拖动矩形而改变~',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'40px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 15px',
|
||||||
|
level:['easy'],
|
||||||
|
step:{
|
||||||
|
easy:1
|
||||||
|
},
|
||||||
|
borderRadius:8,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:['#current > svg > rect:nth-of-type(2)','#current > svg > rect:nth-of-type(4)','#current > svg > rect:nth-of-type(8)'],
|
||||||
|
tips:'你的图形会随着你拖动矩形而改变~',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'40px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 15px',
|
||||||
|
level:['medium'],
|
||||||
|
step:{
|
||||||
|
medium:1,
|
||||||
|
},
|
||||||
|
borderRadius:8,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:['#current > svg > rect:nth-of-type(3)','#current > svg > rect:nth-of-type(9)'],
|
||||||
|
tips:'你的图形会随着你拖动矩形而改变~',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'40px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 15px',
|
||||||
|
level:['hard'],
|
||||||
|
step:{
|
||||||
|
hard:1
|
||||||
|
},
|
||||||
|
borderRadius:8,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:['#displayHelper_validate','#displayHelper_cancel'],
|
||||||
|
tips:'你可以点击“验证一下”验证你的答案是否正确,也可以重新开始作答。',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 0px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:2,
|
||||||
|
medium:2,
|
||||||
|
hard:2
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
}]
|
||||||
|
let stepGuidance = new StepGuidance(elementList,'inclusions')
|
||||||
|
stepGuidance.init()
|
||||||
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#diagrams {
|
#diagrams {
|
||||||
margin: 1em 0 1em 0;
|
margin: 1em 0 1em 0;
|
||||||
|
|
@ -80,295 +165,12 @@
|
||||||
height: 2em;
|
height: 2em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fullbg {
|
|
||||||
background-color: #7C98D1;
|
|
||||||
opacity: 0.5;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0.5;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1500;
|
|
||||||
filter: alpha(opacity=50);
|
|
||||||
-moz-opacity: 0.5;
|
|
||||||
-khtml-opacity: 0.5;
|
|
||||||
display: block;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
@media (min-width:1200px) {
|
|
||||||
#displayHelper_validate::before {
|
|
||||||
content: '';
|
|
||||||
width: 200%;
|
|
||||||
height: 175%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: -40%;
|
|
||||||
left: 0%;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_validate::after {
|
|
||||||
content: '您可以验证答案是否正确或重新开始作答~';
|
|
||||||
width: 200%;
|
|
||||||
height: 180%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 250%;
|
|
||||||
left: 10%;
|
|
||||||
border-radius: 83px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_saved::after {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 0 25px 30px 25px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent transparent #fff transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 120%;
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#popupMessage.floatingMessage {
|
|
||||||
z-index: 2100;
|
|
||||||
}
|
|
||||||
#current::before {
|
|
||||||
content: '';
|
|
||||||
width: 70%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: 0%;
|
|
||||||
left: 15%;
|
|
||||||
}
|
|
||||||
#current_guide::before {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width:12px 20px 12px 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent #fff transparent transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: -29px;
|
|
||||||
left: 213px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#current_guide::after {
|
|
||||||
content: '你的图形会随着你拖动的矩形而改变~';
|
|
||||||
width: 288px;
|
|
||||||
height: 30px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: -32px;
|
|
||||||
left: 220px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
#zone_2::after {
|
|
||||||
content: '我知道了！';
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 120%;
|
|
||||||
left: 60%;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#rectangles::after {
|
|
||||||
content: '拖动每个矩形的蓝色角，可以改变矩形的大小~';
|
|
||||||
width: 300px;
|
|
||||||
height: 30px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 53%;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width:1199px) {
|
|
||||||
#displayHelper_validate::before {
|
|
||||||
content: '';
|
|
||||||
width: 200%;
|
|
||||||
height: 175%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: -40%;
|
|
||||||
left: 0%;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_validate::after {
|
|
||||||
content: '您可以验证答案是否正确或重新开始作答~';
|
|
||||||
width: 200%;
|
|
||||||
height: 180%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 250%;
|
|
||||||
left: 10%;
|
|
||||||
border-radius: 83px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_saved::after {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 0 25px 30px 25px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent transparent #fff transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 120%;
|
|
||||||
left: 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#popupMessage.floatingMessage {
|
|
||||||
z-index: 2100;
|
|
||||||
}
|
|
||||||
#current::before {
|
|
||||||
content: '';
|
|
||||||
width: 70%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: 0%;
|
|
||||||
left: 15%;
|
|
||||||
}
|
|
||||||
#current_guide::before {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width:12px 20px 12px 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent #fff transparent transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: -29px;
|
|
||||||
left: 213px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#current_guide::after {
|
|
||||||
content: '你的图形会随着你拖动的矩形而改变~';
|
|
||||||
width: 288px;
|
|
||||||
height: 30px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: -32px;
|
|
||||||
left: 220px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
#zone_2::after {
|
|
||||||
content: '我知道了！';
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(120% + 120px);
|
|
||||||
left: 60%;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#rectangles::after {
|
|
||||||
content: '拖动每个矩形的蓝色角，可以改变矩形的大小~';
|
|
||||||
width: 300px;
|
|
||||||
height: 30px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 53%;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="fullbg">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="task">
|
<div id="task">
|
||||||
<!-- <h1>嵌套的矩形</h1>-->
|
<!-- <h1>嵌套的矩形</h1>-->
|
||||||
<!-- <div id="tabsContainer"></div>-->
|
<!-- <div id="tabsContainer"></div>-->
|
||||||
|
|
@ -420,28 +222,6 @@
|
||||||
<h2>答案解析</h2>
|
<h2>答案解析</h2>
|
||||||
<h2>这是提示信息！计算机图形学-碰撞检测算法</h2>
|
<h2>这是提示信息！计算机图形学-碰撞检测算法</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- task-solution -->
|
|
||||||
<script>
|
|
||||||
setTimeout(() => {
|
|
||||||
$('.consigne').remove();
|
|
||||||
$('#displayHelper_validate').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#displayHelper_saved').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#displayHelper_cancel').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#current').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#current_guide').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#rectangles').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#zone_2').addClass('relative').css({ 'z-index': 2100 }, { 'pointer-events': 'none' });
|
|
||||||
}, 50);
|
|
||||||
$('#zone_2').on('click', function () {
|
|
||||||
$('#zone_2').append("<style>#zone_2::after{content: none}</style>");
|
|
||||||
$('#displayHelper_validate').append("<style>#displayHelper_validate::after,#displayHelper_validate::before{content: none}</style>");
|
|
||||||
$('#displayHelper_saved').append("<style>#displayHelper_saved::after{content: none}</style>");
|
|
||||||
$('#current').append("<style>#current::before{content: none}</style>");
|
|
||||||
$('#current_guide').append("<style>#current_guide::after,#current_guide::before{content: none}</style>");
|
|
||||||
$('#rectangles').append("<style>#rectangles::after{content: none}</style>");
|
|
||||||
$('#fullbg').css('display', 'none');
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,76 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style class="">
|
|
||||||
|
<script src="task.js"></script>
|
||||||
|
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
let elementList = [{
|
||||||
|
target:['#paper > svg > circle:nth-of-type(8)','#paper > svg > circle:nth-of-type(9)'],
|
||||||
|
tips:'点击任意两朵花，它们之间就会出现一个新的管道，表示水可以通过。',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'0px',
|
||||||
|
t_left:'15px'
|
||||||
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['easy'],
|
||||||
|
step:{
|
||||||
|
easy:0,
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:['#paper > svg > circle:nth-of-type(13)','#paper > svg > circle:nth-of-type(17)'],
|
||||||
|
tips:'点击任意两朵花，它们之间就会出现一个新的管道，表示水可以通过。',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'0px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['medium'],
|
||||||
|
step:{
|
||||||
|
medium:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:['#paper > svg > circle:nth-of-type(14)','#paper > svg > circle:nth-of-type(20)'],
|
||||||
|
tips:'点击任意两朵花，它们之间就会出现一个新的管道，表示水可以通过。',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'0px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 10px',
|
||||||
|
level:['hard'],
|
||||||
|
step:{
|
||||||
|
hard:0,
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:['#displayHelper_validate','#displayHelper_cancel'],
|
||||||
|
tips:'你可以点击“验证一下”验证你的答案是否正确,也可以重新开始。',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 0px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:1,
|
||||||
|
medium:1,
|
||||||
|
hard:1
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
}]
|
||||||
|
let stepGuidance = new StepGuidance(elementList,'two-connect')
|
||||||
|
stepGuidance.init()
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
#paper { /* IE8 */
|
#paper { /* IE8 */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 1em auto 0 auto;
|
margin: 1em auto 0 auto;
|
||||||
|
|
@ -57,232 +126,11 @@
|
||||||
.paper-instr td {
|
.paper-instr td {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
#fullbg {
|
|
||||||
background-color: #7C98D1;
|
|
||||||
opacity: 0.5;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0.5;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1500;
|
|
||||||
filter: alpha(opacity=50);
|
|
||||||
-moz-opacity: 0.5;
|
|
||||||
-khtml-opacity: 0.5;
|
|
||||||
display: block;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width:1200px) {
|
|
||||||
#displayHelper_validate::before {
|
|
||||||
content: '';
|
|
||||||
width: 200%;
|
|
||||||
height: 175%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: -40%;
|
|
||||||
left: 0%;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_validate::after {
|
|
||||||
content: '您可以验证答案是否正确或重新开始作答~';
|
|
||||||
width: 200%;
|
|
||||||
height: 180%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 250%;
|
|
||||||
left: 10%;
|
|
||||||
border-radius: 83px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_saved::after {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 0 25px 30px 25px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent transparent #fff transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 120%;
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#popupMessage.floatingMessage {
|
|
||||||
z-index: 2100;
|
|
||||||
}
|
|
||||||
#zone_2::after {
|
|
||||||
content: '我知道了！';
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 130%;
|
|
||||||
left: 60%;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
#paper::before {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width:12px 20px 12px 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent #fff transparent transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(110% - 17px);
|
|
||||||
left: 148px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#paper::after {
|
|
||||||
content: '点击任意两朵花，它们之间会出现一个新的管道，表示水可以通过~';
|
|
||||||
width: 500px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(110% - 32px);
|
|
||||||
left: 160px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width:1199px) {
|
|
||||||
#displayHelper_validate::before {
|
|
||||||
content: '';
|
|
||||||
width: 200%;
|
|
||||||
height: 175%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: -40%;
|
|
||||||
left: 0%;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_validate::after {
|
|
||||||
content: '您可以验证答案是否正确或重新开始作答~';
|
|
||||||
width: 200%;
|
|
||||||
height: 180%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 250%;
|
|
||||||
left: 10%;
|
|
||||||
border-radius: 83px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_saved::after {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 0 25px 30px 25px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent transparent #fff transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 120%;
|
|
||||||
left: 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#popupMessage.floatingMessage {
|
|
||||||
z-index: 2100;
|
|
||||||
}
|
|
||||||
#zone_2::after {
|
|
||||||
content: '我知道了！';
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(120% + 130px);
|
|
||||||
left: 60%;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
#paper::before {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width:12px 20px 12px 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent #fff transparent transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% - 28px);
|
|
||||||
left: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#paper::after {
|
|
||||||
content: '点击任意两朵花，它们之间会出现一个新的管道，表示水可以通过~';
|
|
||||||
width: 500px;
|
|
||||||
height: 30px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% - 32px);
|
|
||||||
left: 160px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
||||||
<script src="task.js"></script>
|
<link rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="fullbg">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="task">
|
<div id="task">
|
||||||
<!-- <h1>浇花</h1>-->
|
<!-- <h1>浇花</h1>-->
|
||||||
<!-- <div id="tabsContainer"></div> <!– will contain the versions tabs –>-->
|
<!-- <div id="tabsContainer"></div> <!– will contain the versions tabs –>-->
|
||||||
|
|
@ -326,7 +174,7 @@
|
||||||
<div id="solution">
|
<div id="solution">
|
||||||
<h2>Solution 离散数学-图论-节点的度</h2>
|
<h2>Solution 离散数学-图论-节点的度</h2>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<!-- <script>
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$('#displayHelper_validate').addClass('relative').css('z-index', 2000);
|
$('#displayHelper_validate').addClass('relative').css('z-index', 2000);
|
||||||
$('#displayHelper_saved').addClass('relative').css('z-index', 2000);
|
$('#displayHelper_saved').addClass('relative').css('z-index', 2000);
|
||||||
|
|
@ -341,6 +189,6 @@
|
||||||
$('#paper').append("<style>#paper::after,#paper::before{content: none}</style>");
|
$('#paper').append("<style>#paper::after,#paper::before{content: none}</style>");
|
||||||
$('#fullbg').css('display','none');
|
$('#fullbg').css('display','none');
|
||||||
})
|
})
|
||||||
</script>
|
</script> -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -50,6 +50,74 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
|
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
let elementList = [{
|
||||||
|
target:'#paper > svg > path:nth-of-type(17)',
|
||||||
|
tips:'将蓝色的图形复制拖拽到下方的图案上~',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'0px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'15px 15px',
|
||||||
|
level:['easy'],
|
||||||
|
step:{
|
||||||
|
easy:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:'#paper > svg > path:nth-of-type(15)',
|
||||||
|
tips:'将蓝色的图形复制拖拽到下方的图案上~',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'0px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'15px 15px',
|
||||||
|
level:['medium'],
|
||||||
|
step:{
|
||||||
|
medium:0,
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:'#paper > svg > path:nth-of-type(18)',
|
||||||
|
tips:'将蓝色的图形复制拖拽到下方的图案上~',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'0px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'15px 15px',
|
||||||
|
level:['hard'],
|
||||||
|
step:{
|
||||||
|
hard:0
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
isSVG:true
|
||||||
|
},{
|
||||||
|
target:['#displayHelper_validate','#displayHelper_cancel'],
|
||||||
|
tips:'你可以点击“验证一下”验证你的答案是否正确，或重新开始作答。',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
|
left:'30px',
|
||||||
|
t_left:'30px'
|
||||||
|
},
|
||||||
|
padding:'10px 0px',
|
||||||
|
level:['easy','medium','hard'],
|
||||||
|
step:{
|
||||||
|
easy:1,
|
||||||
|
medium:1,
|
||||||
|
hard:1
|
||||||
|
},
|
||||||
|
borderRadius:16,
|
||||||
|
}]
|
||||||
|
let stepGuidance = new StepGuidance(elementList,'patterns')
|
||||||
|
stepGuidance.init()
|
||||||
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#paper {
|
#paper {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
|
|
@ -58,227 +126,10 @@
|
||||||
#error {
|
#error {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#fullbg {
|
|
||||||
background-color: #7C98D1;
|
|
||||||
opacity: 0.5;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0.5;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1500;
|
|
||||||
filter: alpha(opacity=50);
|
|
||||||
-moz-opacity: 0.5;
|
|
||||||
-khtml-opacity: 0.5;
|
|
||||||
display: block;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
@media (min-width:1200px) {
|
|
||||||
#displayHelper_validate::before {
|
|
||||||
content: '';
|
|
||||||
width: 200%;
|
|
||||||
height: 175%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: -40%;
|
|
||||||
left: 0%;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_validate::after {
|
|
||||||
content: '您可以验证答案是否正确或重新开始作答~';
|
|
||||||
width: 200%;
|
|
||||||
height: 180%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 250%;
|
|
||||||
left: 10%;
|
|
||||||
border-radius: 83px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_saved::after {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 0 25px 30px 25px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent transparent #fff transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 120%;
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#popupMessage.floatingMessage {
|
|
||||||
z-index: 2100;
|
|
||||||
}
|
|
||||||
#zone_2::after {
|
|
||||||
content: '我知道了！';
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 130%;
|
|
||||||
left: 60%;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
#paper::before {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width:12px 20px 12px 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent #fff transparent transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: -11px;
|
|
||||||
left: 183px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#paper::after {
|
|
||||||
content: '将蓝色的图形复制拖拽到下方的图案上~';
|
|
||||||
width: 288px;
|
|
||||||
height: 28px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: -14px;
|
|
||||||
left: 190px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width:1199px) {
|
|
||||||
#displayHelper_validate::before {
|
|
||||||
content: '';
|
|
||||||
width: 200%;
|
|
||||||
height: 175%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
top: -40%;
|
|
||||||
left: 0%;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_validate::after {
|
|
||||||
content: '您可以验证答案是否正确或重新开始作答~';
|
|
||||||
width: 200%;
|
|
||||||
height: 180%;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: 250%;
|
|
||||||
left: 10%;
|
|
||||||
border-radius: 83px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#displayHelper_saved::after {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width: 0 25px 30px 25px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent transparent #fff transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 120%;
|
|
||||||
left: 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#popupMessage.floatingMessage {
|
|
||||||
z-index: 2100;
|
|
||||||
}
|
|
||||||
#zone_2::after {
|
|
||||||
content: '我知道了！';
|
|
||||||
width: 150px;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(120% + 140px);
|
|
||||||
left: 60%;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
#paper::before {
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-width:12px 20px 12px 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent #fff transparent transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: -11px;
|
|
||||||
left: 183px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#paper::after {
|
|
||||||
content: '将蓝色的图形复制拖拽到下方的图案上~';
|
|
||||||
width: 288px;
|
|
||||||
height: 28px;
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
z-index: 1500;
|
|
||||||
position: absolute;
|
|
||||||
top: -14px;
|
|
||||||
left: 190px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -314,23 +165,6 @@
|
||||||
<h2>答案解析</h2>
|
<h2>答案解析</h2>
|
||||||
<h2>这是提示信息！排列组合</h2>
|
<h2>这是提示信息！排列组合</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- task-solution -->
|
|
||||||
<script>
|
|
||||||
setTimeout(() => {
|
|
||||||
$('#displayHelper_validate').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#displayHelper_saved').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#displayHelper_cancel').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#paper').addClass('relative').css('z-index', 2000);
|
|
||||||
$('#zone_2').addClass('relative').css({'z-index': 2000},{'pointer-events': 'none'});
|
|
||||||
}, 50);
|
|
||||||
$('#zone_2').on('click', function () {
|
|
||||||
$('#zone_2').append("<style>#zone_2::after{content: none}</style>");
|
|
||||||
$('#displayHelper_validate').append("<style>#displayHelper_validate::after,#displayHelper_validate::before{content: none}</style>");
|
|
||||||
$('#displayHelper_saved').append("<style>#displayHelper_saved::after{content: none}</style>");
|
|
||||||
$('#paper').append("<style>#paper::after,#paper::before{content: none}</style>");
|
|
||||||
$('#fullbg').css('display','none');
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -55,213 +55,96 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
|
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onload = function(){
|
let elementList = [{
|
||||||
let levelHash = window.location.hash?window.location.hash.replace('#',''):'easy'
|
target:'#displayHelper_validate',
|
||||||
let level = ['easy','medium','hard'].includes(levelHash)?levelHash:'easy'
|
tips:'点击“试一试”来验证你的想法，不限次数~',
|
||||||
let stepIndex = 0
|
tip_position:{
|
||||||
$('body').append(`<div id="guide-box">
|
bottom:'-62px',
|
||||||
<div class="guide-area">
|
left:'30px',
|
||||||
<div class="guide-tip-box" id="guide-tip">
|
},
|
||||||
<div class="guide-tip-content">
|
padding:'10px 0px',
|
||||||
<div class="circle"></div>
|
level:['easy'],
|
||||||
<div class="tip-info">
|
step:{
|
||||||
<span></span>
|
easy:2,
|
||||||
</div>
|
},
|
||||||
<div class="button-box" id="btn-box"></div>
|
borderRadius:16
|
||||||
</div>
|
},{
|
||||||
</div>
|
target:'#nbStamps_select',
|
||||||
</div>
|
tips:'点击选择邮票数量',
|
||||||
</div>`)
|
padding:'10px 20px',
|
||||||
let elementList = [{
|
tip_position:{
|
||||||
target:'#displayHelper_validate',
|
bottom:'-62px',
|
||||||
tips:'点击“试一试”来验证你的想法，不限次数~',
|
left:'30px',
|
||||||
tip_position:{
|
},
|
||||||
bottom:'-62px',
|
level:['easy','medium','hard'],
|
||||||
left:'30px',
|
step:{
|
||||||
},
|
easy:0,
|
||||||
padding:'10px 0px',
|
medium:1,
|
||||||
level:['easy'],
|
hard:1
|
||||||
step:{
|
},
|
||||||
easy:2,
|
borderRadius:16
|
||||||
},
|
},{
|
||||||
borderRadius:16
|
target:'#stampsPaper > svg',
|
||||||
},{
|
tips:'点击改变每张邮票颜色',
|
||||||
target:'#nbStamps_select',
|
padding:'10px 10px',
|
||||||
tips:'点击选择邮票数量',
|
tip_position:{
|
||||||
padding:'10px 20px',
|
bottom:'-62px',
|
||||||
tip_position:{
|
left:'30px',
|
||||||
bottom:'-62px',
|
},
|
||||||
left:'30px',
|
level:['easy','medium','hard'],
|
||||||
},
|
step:{
|
||||||
level:['easy','medium','hard'],
|
easy:1,
|
||||||
step:{
|
medium:2,
|
||||||
easy:0,
|
hard:2
|
||||||
medium:1,
|
},
|
||||||
hard:1
|
borderRadius:16
|
||||||
},
|
},{
|
||||||
borderRadius:16
|
target:['#paper > svg > rect:nth-of-type(1)','#paper > svg > rect:nth-of-type(2)'],
|
||||||
},{
|
tips:'点击滚筒，可以选中其中的一个，再去修改它的参数。',
|
||||||
target:'#stampsPaper > svg',
|
padding:'10px 10px',
|
||||||
tips:'点击改变每张邮票颜色',
|
tip_position:{
|
||||||
padding:'10px 10px',
|
bottom:'-62px',
|
||||||
tip_position:{
|
left:'30px',
|
||||||
bottom:'-62px',
|
},
|
||||||
left:'30px',
|
level:['medium','hard'],
|
||||||
},
|
step:{
|
||||||
level:['easy','medium','hard'],
|
medium:0,
|
||||||
step:{
|
hard:0
|
||||||
easy:1,
|
},
|
||||||
medium:2,
|
borderRadius:16
|
||||||
hard:2
|
},{
|
||||||
},
|
target:'#parameters > tbody > tr:nth-of-type(3)',
|
||||||
borderRadius:16
|
tips:'点击选择当前选中的滚筒滚动的起始和终止位置',
|
||||||
},{
|
padding:'10px 10px',
|
||||||
target:['#paper > svg > rect:nth-of-type(1)','#paper > svg > rect:nth-of-type(2)'],
|
tip_position:{
|
||||||
tips:'点击滚筒，可以选中其中的一个，再去修改它的参数。',
|
bottom:'-62px',
|
||||||
padding:'10px 10px',
|
left:'30px',
|
||||||
tip_position:{
|
},
|
||||||
bottom:'-62px',
|
level:['medium','hard'],
|
||||||
left:'30px',
|
step:{
|
||||||
},
|
medium:3,
|
||||||
level:['medium','hard'],
|
hard:3
|
||||||
step:{
|
},
|
||||||
medium:0,
|
borderRadius:16
|
||||||
hard:0
|
},{
|
||||||
},
|
target:['#displayHelper_validate','#displayHelper_cancel'],
|
||||||
borderRadius:16
|
tips:'当你设置好每个滚筒的参数之后，可以点击“试一试”验证你的答案，也可以重新开始。',
|
||||||
},{
|
padding:'10px 10px',
|
||||||
target:'#parameters > tbody > tr:nth-of-type(3)',
|
tip_position:{
|
||||||
tips:'点击选择当前选中的滚筒滚动的起始和终止位置',
|
bottom:'-62px',
|
||||||
padding:'10px 10px',
|
left:'30px',
|
||||||
tip_position:{
|
},
|
||||||
bottom:'-62px',
|
level:['medium','hard'],
|
||||||
left:'30px',
|
step:{
|
||||||
},
|
medium:4,
|
||||||
level:['medium','hard'],
|
hard:4
|
||||||
step:{
|
},
|
||||||
medium:3,
|
borderRadius:16
|
||||||
hard:3
|
}]
|
||||||
},
|
let stepGuidance = new StepGuidance(elementList,'roller')
|
||||||
borderRadius:16
|
stepGuidance.init()
|
||||||
},{
|
|
||||||
target:['#displayHelper_validate','#displayHelper_cancel'],
|
|
||||||
tips:'当你设置好每个滚筒的参数之后，可以点击“试一试”验证你的答案，也可以重新开始。',
|
|
||||||
padding:'10px 10px',
|
|
||||||
tip_position:{
|
|
||||||
bottom:'-62px',
|
|
||||||
left:'30px',
|
|
||||||
},
|
|
||||||
level:['medium','hard'],
|
|
||||||
step:{
|
|
||||||
medium:4,
|
|
||||||
hard:4
|
|
||||||
},
|
|
||||||
borderRadius:16
|
|
||||||
}]
|
|
||||||
elementList = elementList.filter(item=>item.level.includes(level))
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
$('#btn-box').on('click','#next-step-btn',()=>{
|
|
||||||
stepIndex += 1
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
|
||||||
stepIndex -= 1
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
$('#btn-box').on('click','#complete-btn',()=>{
|
|
||||||
$('#guide-box').remove()
|
|
||||||
})
|
|
||||||
$(window).resize(()=>{
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
$(document).scroll(()=>{
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function updateGuide(elementList,itemIndex,stepIndex){
|
|
||||||
let elementItem = elementList[itemIndex]
|
|
||||||
$('#guide-box > .guide-area').css('width',getTargetWidth(elementItem.target)+'px')
|
|
||||||
.css('height',getTargetHeight(elementItem.target)+'px')
|
|
||||||
.css('top',getTargetTop(elementItem.target,parseFloat(elementItem.padding.split(' ')[0].replace('px')))+'px')
|
|
||||||
.css('left',getTargetLeft(elementItem.target,parseFloat(elementItem.padding.split(' ')[1].replace('px')))+'px')
|
|
||||||
.css('border-radius',elementItem.borderRadius+'px')
|
|
||||||
.css('padding',elementItem.padding)
|
|
||||||
|
|
||||||
for(let key in elementItem.tip_position){
|
|
||||||
$('#guide-tip').css(key,elementItem.tip_position[key])
|
|
||||||
}
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementItem.tips)
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
|
||||||
${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
|
|
||||||
${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
|
|
||||||
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
|
||||||
`)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetWidth(targetElement){
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 0;
|
|
||||||
let leftValue = [2000,0]
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
let elementLeft = $(elementItem).offset().left
|
|
||||||
if(elementLeft<leftValue[0]){
|
|
||||||
leftValue[0] = elementLeft
|
|
||||||
}
|
|
||||||
|
|
||||||
if(elementLeft>leftValue[1]){
|
|
||||||
leftValue[1] = elementLeft
|
|
||||||
value = 0
|
|
||||||
value += $(elementItem).width()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value + leftValue[1] - leftValue[0]
|
|
||||||
}
|
|
||||||
return $(targetElement).width()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetHeight(targetElement) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 0;
|
|
||||||
let topValue = [2000,0]
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
let elementTop = $(elementItem).offset().top
|
|
||||||
if(elementTop<topValue[0]){
|
|
||||||
topValue[0] = elementTop
|
|
||||||
}
|
|
||||||
|
|
||||||
if(elementTop>topValue[1]){
|
|
||||||
topValue[1] = elementTop
|
|
||||||
value = 0
|
|
||||||
value += $(elementItem).height()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value + topValue[1] - topValue[0]
|
|
||||||
}
|
|
||||||
return $(targetElement).height()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetTop(targetElement,padding) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 2000
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
value = $(elementItem).offset().top<value?$(elementItem).offset().top:value
|
|
||||||
}
|
|
||||||
return value - padding - $(document).scrollTop()
|
|
||||||
}
|
|
||||||
return $(targetElement).offset().top - padding - $(document).scrollTop()
|
|
||||||
}
|
|
||||||
function getTargetLeft(targetElement,padding) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 2000
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
value = $(elementItem).offset().left<value?$(elementItem).offset().left:value
|
|
||||||
}
|
|
||||||
return value - padding
|
|
||||||
}
|
|
||||||
return $(targetElement).offset().left - padding
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#parameters {
|
#parameters {
|
||||||
|
|
@ -293,88 +176,9 @@
|
||||||
width: 4em;
|
width: 4em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
}
|
}
|
||||||
#guide-box{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 998;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area{
|
|
||||||
box-shadow: 1px 1px 100000px 100000px rgb(124 152 209 / 50%);
|
|
||||||
position:absolute;
|
|
||||||
transition: all 500ms;
|
|
||||||
/* padding: 10px 0px; */
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box{
|
|
||||||
height: 36px;
|
|
||||||
position: absolute;
|
|
||||||
bottom:-60px;
|
|
||||||
left: 60px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
|
|
||||||
height: 100%;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0px 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
|
|
||||||
content:'';
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 12px solid transparent;
|
|
||||||
border-right: 12px solid transparent;
|
|
||||||
border-bottom: 12px solid white;
|
|
||||||
top: -12px;
|
|
||||||
left: 30px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
margin: 14px 10px 14px 0px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
|
|
||||||
height: 100%;
|
|
||||||
line-height: 36px;
|
|
||||||
display: inline-block;
|
|
||||||
white-space:nowrap;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
white-space:nowrap;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
|
|
||||||
padding: 0px 8px;
|
|
||||||
height: 24px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin: 5px 0px;
|
|
||||||
border-radius: 6px;
|
|
||||||
line-height: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -56,208 +56,87 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
|
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onload = function(){
|
let elementList = [{
|
||||||
let levelHash = window.location.hash?window.location.hash.replace('#',''):'easy'
|
target:'#paper > svg > circle:nth-of-type(8)',
|
||||||
let level = ['easy','medium','hard'].includes(levelHash)?levelHash:'easy'
|
tips:'点击转动杠杆，改变轨道方向',
|
||||||
let stepIndex = 0
|
tip_position:{
|
||||||
$('body').append(`<div id="guide-box">
|
bottom:'-62px',
|
||||||
<div class="guide-area">
|
left:'30px',
|
||||||
<div class="guide-tip-box" id="guide-tip">
|
t_left:'30px'
|
||||||
<div class="guide-tip-content">
|
},
|
||||||
<div class="triangle"></div>
|
padding:'10px 10px',
|
||||||
<div class="circle"></div>
|
level:['easy'],
|
||||||
<div class="tip-info">
|
step:{
|
||||||
<span></span>
|
easy:0
|
||||||
</div>
|
},
|
||||||
<div class="button-box" id="btn-box"></div>
|
borderRadius:16,
|
||||||
</div>
|
isSVG:true
|
||||||
</div>
|
},{
|
||||||
</div>
|
target:'#paper > svg > circle:nth-of-type(11)',
|
||||||
</div>`)
|
tips:'点击转动杠杆，改变轨道方向',
|
||||||
|
tip_position:{
|
||||||
|
bottom:'-62px',
|
||||||
let elementList = [{
|
left:'30px',
|
||||||
target:'#paper > svg > circle:nth-of-type(8)',
|
t_left:'30px'
|
||||||
tips:'点击转动杠杆，改变轨道方向',
|
},
|
||||||
tip_position:{
|
padding:'10px 10px',
|
||||||
bottom:'-62px',
|
level:['medium'],
|
||||||
left:'30px',
|
step:{
|
||||||
t_left:'30px'
|
medium:0
|
||||||
},
|
},
|
||||||
padding:'10px 10px',
|
borderRadius:16,
|
||||||
level:['easy'],
|
isSVG:true
|
||||||
step:{
|
},{
|
||||||
easy:0
|
target:'#paper > svg > circle:nth-of-type(23)',
|
||||||
},
|
tips:'点击转动杠杆，改变轨道方向',
|
||||||
borderRadius:16,
|
tip_position:{
|
||||||
isSVG:true
|
bottom:'-62px',
|
||||||
},{
|
left:'30px',
|
||||||
target:'#paper > svg > circle:nth-of-type(11)',
|
t_left:'30px'
|
||||||
tips:'点击转动杠杆，改变轨道方向',
|
},
|
||||||
tip_position:{
|
padding:'10px 10px',
|
||||||
bottom:'-62px',
|
level:['hard'],
|
||||||
left:'30px',
|
step:{
|
||||||
t_left:'30px'
|
hard:0
|
||||||
},
|
},
|
||||||
padding:'10px 10px',
|
borderRadius:16,
|
||||||
level:['medium'],
|
isSVG:true
|
||||||
step:{
|
},{
|
||||||
medium:0
|
target:'#paper > svg > circle:nth-of-type(5)',
|
||||||
},
|
tips:'点击单个轮子，使其断开或连接单个轮子',
|
||||||
borderRadius:16,
|
tip_position:{
|
||||||
isSVG:true
|
bottom:'-62px',
|
||||||
},{
|
left:'30px',
|
||||||
target:'#paper > svg > circle:nth-of-type(23)',
|
t_left:'30px'
|
||||||
tips:'点击转动杠杆，改变轨道方向',
|
},
|
||||||
tip_position:{
|
padding:'10px 10px',
|
||||||
bottom:'-62px',
|
level:['easy','medium'],
|
||||||
left:'30px',
|
step:{
|
||||||
t_left:'30px'
|
easy:1,
|
||||||
},
|
medium:1,
|
||||||
padding:'10px 10px',
|
},
|
||||||
level:['hard'],
|
borderRadius:16,
|
||||||
step:{
|
isSVG:true
|
||||||
hard:0
|
},{
|
||||||
},
|
target:'#paper > svg > circle:nth-of-type(12)',
|
||||||
borderRadius:16,
|
tips:'点击单个轮子，使其断开或连接单个轮子',
|
||||||
isSVG:true
|
tip_position:{
|
||||||
},{
|
bottom:'-62px',
|
||||||
target:'#paper > svg > circle:nth-of-type(5)',
|
left:'30px',
|
||||||
tips:'点击单个轮子，使其断开或连接单个轮子',
|
t_left:'30px'
|
||||||
tip_position:{
|
},
|
||||||
bottom:'-62px',
|
padding:'10px 10px',
|
||||||
left:'30px',
|
level:['hard'],
|
||||||
t_left:'30px'
|
step:{
|
||||||
},
|
hard:1
|
||||||
padding:'10px 10px',
|
},
|
||||||
level:['easy','medium'],
|
borderRadius:16,
|
||||||
step:{
|
isSVG:true
|
||||||
easy:1,
|
}]
|
||||||
medium:1,
|
let stepGuidance = new StepGuidance(elementList,'align-strips')
|
||||||
},
|
stepGuidance.init()
|
||||||
borderRadius:16,
|
|
||||||
isSVG:true
|
|
||||||
},{
|
|
||||||
target:'#paper > svg > circle:nth-of-type(12)',
|
|
||||||
tips:'点击单个轮子，使其断开或连接单个轮子',
|
|
||||||
tip_position:{
|
|
||||||
bottom:'-62px',
|
|
||||||
left:'30px',
|
|
||||||
t_left:'30px'
|
|
||||||
},
|
|
||||||
padding:'10px 10px',
|
|
||||||
level:['hard'],
|
|
||||||
step:{
|
|
||||||
hard:1
|
|
||||||
},
|
|
||||||
borderRadius:16,
|
|
||||||
isSVG:true
|
|
||||||
}]
|
|
||||||
elementList = elementList.filter(item=>item.level.includes(level))
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
$('#btn-box').on('click','#next-step-btn',()=>{
|
|
||||||
stepIndex += 1
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
|
||||||
stepIndex -= 1
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
$('#btn-box').on('click','#complete-btn',()=>{
|
|
||||||
$('#guide-box').remove()
|
|
||||||
})
|
|
||||||
$(window).resize(()=>{
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
$(document).scroll(()=>{
|
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function updateGuide(elementList,itemIndex,stepIndex){
|
|
||||||
let elementItem = elementList[itemIndex]
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle').css('left',elementItem.tip_position.t_left)
|
|
||||||
$('#guide-box > .guide-area').css('width',getTargetWidth(elementItem.target,elementItem.isSVG)+'px')
|
|
||||||
.css('height',getTargetHeight(elementItem.target,elementItem.isSVG)+'px')
|
|
||||||
.css('top',getTargetTop(elementItem.target,parseFloat(elementItem.padding.split(' ')[0].replace('px')),elementItem.isSVG)+'px')
|
|
||||||
.css('left',getTargetLeft(elementItem.target,parseFloat(elementItem.padding.split(' ')[1].replace('px')),elementItem.isSVG)+'px')
|
|
||||||
.css('border-radius',elementItem.borderRadius+'px')
|
|
||||||
.css('padding',elementItem.padding)
|
|
||||||
|
|
||||||
for(let key in elementItem.tip_position){
|
|
||||||
$('#guide-tip').css(key,elementItem.tip_position[key])
|
|
||||||
}
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementItem.tips)
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
|
||||||
${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
|
|
||||||
${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
|
|
||||||
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
|
||||||
`)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetWidth(targetElement,isSVG){
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 0;
|
|
||||||
let leftValue = [2000,0]
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
let elementLeft = $(elementItem).offset().left
|
|
||||||
if(elementLeft<leftValue[0]){
|
|
||||||
leftValue[0] = elementLeft
|
|
||||||
}
|
|
||||||
|
|
||||||
if(elementLeft>leftValue[1]){
|
|
||||||
leftValue[1] = elementLeft
|
|
||||||
value = 0
|
|
||||||
value += $(elementItem).width()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value + leftValue[1] - leftValue[0]
|
|
||||||
}
|
|
||||||
return isSVG?$(targetElement).get(0).getBBox().width:$(targetElement).outerWidth()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetHeight(targetElement,isSVG) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 0;
|
|
||||||
let topValue = [2000,0]
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
let elementTop = $(elementItem).offset().top
|
|
||||||
if(elementTop<topValue[0]){
|
|
||||||
topValue[0] = elementTop
|
|
||||||
}
|
|
||||||
|
|
||||||
if(elementTop>topValue[1]){
|
|
||||||
topValue[1] = elementTop
|
|
||||||
value = 0
|
|
||||||
value += $(elementItem).height()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value + topValue[1] - topValue[0]
|
|
||||||
}
|
|
||||||
return isSVG?$(targetElement).get(0).getBBox().height:$(targetElement).outerHeight()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetTop(targetElement,padding,isSVG) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 2000
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
value = $(elementItem).offset().top<value?$(elementItem).offset().top:value
|
|
||||||
}
|
|
||||||
return value - padding - $(document).scrollTop()
|
|
||||||
}
|
|
||||||
return $(targetElement).offset().top - padding - $(document).scrollTop()
|
|
||||||
}
|
|
||||||
function getTargetLeft(targetElement,padding,isSVG) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 2000
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
value = $(elementItem).offset().left<value?$(elementItem).offset().left:value
|
|
||||||
}
|
|
||||||
return value - padding
|
|
||||||
}
|
|
||||||
return $(targetElement).offset().left - padding
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#paper {
|
#paper {
|
||||||
|
|
@ -269,88 +148,9 @@
|
||||||
.actions-descr li {
|
.actions-descr li {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
#guide-box{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 998;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area{
|
|
||||||
box-shadow: 1px 1px 100000px 100000px rgb(124 152 209 / 50%);
|
|
||||||
position: fixed;
|
|
||||||
transition: all 500ms;
|
|
||||||
/* padding: 10px 0px; */
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box{
|
|
||||||
height: 36px;
|
|
||||||
position: absolute;
|
|
||||||
bottom:-60px;
|
|
||||||
left: 60px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
|
|
||||||
height: 100%;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0px 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle{
|
|
||||||
/*content:'';
|
|
||||||
display: block;*/
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 12px solid transparent;
|
|
||||||
border-right: 12px solid transparent;
|
|
||||||
border-bottom: 12px solid white;
|
|
||||||
top: -12px;
|
|
||||||
/*left: 30px;*/
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
margin: 14px 10px 14px 0px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
|
|
||||||
height: 100%;
|
|
||||||
line-height: 36px;
|
|
||||||
display: inline-block;
|
|
||||||
white-space:nowrap;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
white-space:nowrap;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
|
|
||||||
padding: 0px 8px;
|
|
||||||
height: 24px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin: 5px 0px;
|
|
||||||
border-radius: 6px;
|
|
||||||
line-height: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -51,253 +51,100 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="task.js"></script>
|
<script type="text/javascript" src="task.js"></script>
|
||||||
|
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onload = function(){
|
let elementList = [{
|
||||||
let levelHash = window.location.hash?window.location.hash.replace('#',''):'easy'
|
target:['#displayHelper_validate','#displayHelper_cancel'],
|
||||||
let level = ['easy','medium','hard'].includes(levelHash)?levelHash:'easy'
|
tips:'点击“验证一下”验证你的答案是否正确，或重新开始~',
|
||||||
let stepIndex = 0
|
tip_position:{
|
||||||
$('body').append(`<div id="guide-box">
|
bottom:'-62px',
|
||||||
<div class="guide-area">
|
left:'30px',
|
||||||
<div class="guide-tip-box" id="guide-tip">
|
t_left:'30px'
|
||||||
<div class="guide-tip-content">
|
},
|
||||||
<div class="triangle"></div>
|
padding:'10px 0px',
|
||||||
<div class="circle"></div>
|
level:['easy','medium','hard'],
|
||||||
<div class="tip-info">
|
step:{
|
||||||
<span></span>
|
easy:1,
|
||||||
</div>
|
medium:2,
|
||||||
<div class="button-box" id="btn-box"></div>
|
hard:2
|
||||||
</div>
|
},
|
||||||
</div>
|
borderRadius:16,
|
||||||
</div>
|
},{
|
||||||
</div>`)
|
target:'#paper > svg > rect:nth-of-type(17)',
|
||||||
let elementList = [{
|
tips:'点击形状可以变为不同的形状',
|
||||||
target:'#displayHelper_validate',
|
tip_position:{
|
||||||
tips:'点击“试一试”来验证你的想法，不限次数~',
|
bottom:'-62px',
|
||||||
tip_position:{
|
left:'30px',
|
||||||
bottom:'-62px',
|
t_left:'30px'
|
||||||
left:'30px',
|
},
|
||||||
t_left:'30px'
|
padding:'10px 10px',
|
||||||
},
|
level:['easy'],
|
||||||
padding:'10px 0px',
|
step:{
|
||||||
level:['easy','medium','hard'],
|
easy:0,
|
||||||
step:{
|
},
|
||||||
easy:1,
|
borderRadius:16,
|
||||||
medium:1,
|
isSVG:true
|
||||||
hard:1
|
},{
|
||||||
},
|
target:['#paper > svg > rect:nth-of-type(2)','#paper > svg > rect:nth-of-type(3)'],
|
||||||
borderRadius:16,
|
tips:'点击形状可以变为不同的形状',
|
||||||
},{
|
tip_position:{
|
||||||
target:'#paper > svg > rect:nth-of-type(17)',
|
bottom:'-62px',
|
||||||
tips:'点击形状可以变为不同的形状',
|
left:'30px',
|
||||||
tip_position:{
|
t_left:'30px'
|
||||||
bottom:'-62px',
|
},
|
||||||
left:'30px',
|
padding:'10px 10px',
|
||||||
t_left:'30px'
|
level:['medium','hard'],
|
||||||
},
|
step:{
|
||||||
padding:'10px 10px',
|
medium:0,
|
||||||
level:['easy','medium','hard'],
|
hard:0
|
||||||
step:{
|
},
|
||||||
easy:0,
|
borderRadius:16,
|
||||||
medium:0,
|
isSVG:true
|
||||||
hard:0
|
},{
|
||||||
},
|
target:['#paper > svg > rect:nth-of-type(12)','#paper > svg > rect:nth-of-type(13)'],
|
||||||
borderRadius:16,
|
tips:'点击“+”或“-”，增加或减少形状',
|
||||||
isSVG:true
|
tip_position:{
|
||||||
}]
|
bottom:'-62px',
|
||||||
elementList = elementList.filter(item=>item.level.includes(level))
|
left:'30px',
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
t_left:'30px'
|
||||||
$('#btn-box').on('click','#next-step-btn',()=>{
|
},
|
||||||
stepIndex += 1
|
padding:'10px 10px',
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
level:['medium'],
|
||||||
})
|
step:{
|
||||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
medium:1,
|
||||||
stepIndex -= 1
|
},
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
borderRadius:16,
|
||||||
})
|
isSVG:true
|
||||||
$('#btn-box').on('click','#complete-btn',()=>{
|
},{
|
||||||
$('#guide-box').remove()
|
target:['#paper > svg > rect:nth-of-type(14)','#paper > svg > rect:nth-of-type(15)'],
|
||||||
})
|
tips:'点击“+”或“-”，增加或减少形状',
|
||||||
$(window).resize(()=>{
|
tip_position:{
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
bottom:'-62px',
|
||||||
})
|
left:'30px',
|
||||||
$(document).scroll(()=>{
|
t_left:'30px'
|
||||||
updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
|
},
|
||||||
})
|
padding:'10px 10px',
|
||||||
}
|
level:['hard'],
|
||||||
function updateGuide(elementList,itemIndex,stepIndex){
|
step:{
|
||||||
let elementItem = elementList[itemIndex]
|
hard:1,
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle').css('left',elementItem.tip_position.t_left)
|
},
|
||||||
$('#guide-box > .guide-area').css('width',getTargetWidth(elementItem.target,elementItem.isSVG)+'px')
|
borderRadius:16,
|
||||||
.css('height',getTargetHeight(elementItem.target,elementItem.isSVG)+'px')
|
isSVG:true
|
||||||
.css('top',getTargetTop(elementItem.target,parseFloat(elementItem.padding.split(' ')[0].replace('px')),elementItem.isSVG)+'px')
|
}]
|
||||||
.css('left',getTargetLeft(elementItem.target,parseFloat(elementItem.padding.split(' ')[1].replace('px')),elementItem.isSVG)+'px')
|
let stepGuidance = new StepGuidance(elementList,'shape-compression')
|
||||||
.css('border-radius',elementItem.borderRadius+'px')
|
stepGuidance.init()
|
||||||
.css('padding',elementItem.padding)
|
|
||||||
|
|
||||||
for(let key in elementItem.tip_position){
|
|
||||||
$('#guide-tip').css(key,elementItem.tip_position[key])
|
|
||||||
}
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementItem.tips)
|
|
||||||
$('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
|
|
||||||
${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
|
|
||||||
${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
|
|
||||||
${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
|
||||||
`)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetWidth(targetElement,isSVG){
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 0;
|
|
||||||
let leftValue = [2000,0]
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
let elementLeft = $(elementItem).offset().left
|
|
||||||
if(elementLeft<leftValue[0]){
|
|
||||||
leftValue[0] = elementLeft
|
|
||||||
}
|
|
||||||
|
|
||||||
if(elementLeft>leftValue[1]){
|
|
||||||
leftValue[1] = elementLeft
|
|
||||||
value = 0
|
|
||||||
value += $(elementItem).width()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value + leftValue[1] - leftValue[0]
|
|
||||||
}
|
|
||||||
return isSVG?$(targetElement).get(0).getBBox().width:$(targetElement).outerWidth()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetHeight(targetElement,isSVG) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 0;
|
|
||||||
let topValue = [2000,0]
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
let elementTop = $(elementItem).offset().top
|
|
||||||
if(elementTop<topValue[0]){
|
|
||||||
topValue[0] = elementTop
|
|
||||||
}
|
|
||||||
|
|
||||||
if(elementTop>topValue[1]){
|
|
||||||
topValue[1] = elementTop
|
|
||||||
value = 0
|
|
||||||
value += $(elementItem).height()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return value + topValue[1] - topValue[0]
|
|
||||||
}
|
|
||||||
return isSVG?$(targetElement).get(0).getBBox().height:$(targetElement).outerHeight()
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTargetTop(targetElement,padding,isSVG) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 2000
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
value = $(elementItem).offset().top<value?$(elementItem).offset().top:value
|
|
||||||
}
|
|
||||||
return value - padding - $(document).scrollTop()
|
|
||||||
}
|
|
||||||
return $(targetElement).offset().top - padding - $(document).scrollTop()
|
|
||||||
}
|
|
||||||
function getTargetLeft(targetElement,padding,isSVG) {
|
|
||||||
if(typeof targetElement == 'object'){
|
|
||||||
let value = 2000
|
|
||||||
for(let elementItem of targetElement){
|
|
||||||
value = $(elementItem).offset().left<value?$(elementItem).offset().left:value
|
|
||||||
}
|
|
||||||
return value - padding
|
|
||||||
}
|
|
||||||
return $(targetElement).offset().left - padding
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#paper {
|
#paper {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
#error {
|
#error {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
|
||||||
#guide-box{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 998;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area{
|
|
||||||
box-shadow: 1px 1px 100000px 100000px rgb(124 152 209 / 50%);
|
|
||||||
position: fixed;
|
|
||||||
transition: all 500ms;
|
|
||||||
/* padding: 10px 0px; */
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box{
|
|
||||||
height: 36px;
|
|
||||||
position: absolute;
|
|
||||||
bottom:-60px;
|
|
||||||
left: 60px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
|
|
||||||
height: 100%;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0px 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle{
|
|
||||||
/*content:'';
|
|
||||||
display: block;*/
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 12px solid transparent;
|
|
||||||
border-right: 12px solid transparent;
|
|
||||||
border-bottom: 12px solid white;
|
|
||||||
top: -12px;
|
|
||||||
/*left: 30px;*/
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: #FDF151;
|
|
||||||
margin: 14px 10px 14px 0px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
|
|
||||||
height: 100%;
|
|
||||||
line-height: 36px;
|
|
||||||
display: inline-block;
|
|
||||||
white-space:nowrap;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
white-space:nowrap;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
|
|
||||||
padding: 0px 8px;
|
|
||||||
height: 24px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin: 5px 0px;
|
|
||||||
border-radius: 6px;
|
|
||||||
line-height: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
<link rel="stylesheet" type="text/css" href="../public-style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
#popupMessage > .container > .buttonsWrapper{
|
#popupMessage > .container > .buttonsWrapper{
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#popupMessage > .container > .buttonsWrapper > button{
|
#popupMessage > .container > .buttonsWrapper > button{
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue