forked from Open-CT/openct-tasks
add guidance to poles
This commit is contained in:
scales
parent
6e0e82f49a
commit
fca928b8b9
|
|
@ -2,12 +2,14 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8"></meta>
|
||||
<meta charset="utf-8">
|
||||
</meta>
|
||||
<title>2019-FR-01-poles</title>
|
||||
<script>
|
||||
window.stringsLanguage = 'en';
|
||||
</script>
|
||||
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1_M.js" id="import-modules"></script>
|
||||
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1_M.js"
|
||||
id="import-modules"></script>
|
||||
<script class="remove" type="text/javascript">
|
||||
var modulesPath = '../../../_common/modules';
|
||||
importModules([
|
||||
|
|
@ -37,8 +39,9 @@
|
|||
<script type="text/javascript">
|
||||
var taskStrings = {
|
||||
success: "恭喜, 你成功了 !",
|
||||
tooManyJumps: function(nbBounces, maxNbBounces) {
|
||||
return "小松鼠可以跳跃 " + nbBounces + " 次。<br/>注意，本任务要求小松鼠最多只能跳跃 " + maxNbBounces + " 次哦。"; },
|
||||
tooManyJumps: function (nbBounces, maxNbBounces) {
|
||||
return "小松鼠可以跳跃 " + nbBounces + " 次。<br/>注意，本任务要求小松鼠最多只能跳跃 " + maxNbBounces + " 次哦。";
|
||||
},
|
||||
"try": "验证一下"
|
||||
|
||||
};
|
||||
|
|
@ -49,18 +52,137 @@
|
|||
margin: 1em auto;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
#error {
|
||||
min-height: 1em;
|
||||
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;
|
||||
}
|
||||
|
||||
#displayHelper_validate::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 180%;
|
||||
background-color: rgba(255, 255, 255);
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: -40%;
|
||||
right: 0%;
|
||||
border-radius: 83px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#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: 90%;
|
||||
height: 30%;
|
||||
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: 200%;
|
||||
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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="fullbg">
|
||||
|
||||
</div>
|
||||
<div id="task">
|
||||
<!-- <h1>小松鼠跳柱子</h1>-->
|
||||
<!-- <div id="tabsContainer"></div>-->
|
||||
<!-- <h1>小松鼠跳柱子</h1>-->
|
||||
<!-- <div id="tabsContainer"></div>-->
|
||||
<div id="taskContent">
|
||||
<div id="zone_1">
|
||||
<div class="consigne">
|
||||
|
|
@ -91,6 +213,26 @@
|
|||
<h2>这是提示信息！折半查找，快速排序</h2>
|
||||
</div>
|
||||
<!-- task-solution -->
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
$('#displayHelper_validate').addClass('relative').css('z-index', 2000);
|
||||
$('#displayHelper_saved').addClass('relative').css('z-index', 2000);
|
||||
$('#paper').addClass('relative').css('z-index', 2000);
|
||||
$('#zone_2').addClass('relative').css({'z-index': 2100},{'pointer-events': 'none'});
|
||||
// $('#displayHelper_validate').append("<style>#displayHelper_validate::after{}</style>");
|
||||
|
||||
}, 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');
|
||||
})
|
||||
// console.log($('#displayHelper_validate'));
|
||||
// console.log($('#displayHelper_validate').html())
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue