binary
/
openct-tasks
forked from Open-CT/openct-tasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add guidance to poles

This commit is contained in:
scales 2021-06-21 17:42:51 +08:00
parent 6e0e82f49a
commit fca928b8b9
1 changed files with 151 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
bebras/2019/FR-2019-01-poles/index_en.html
View File

@ -2,12 +2,14 @@
<html> <html>
<head> <head>
<meta charset="utf-8"></meta> <meta charset="utf-8">
</meta>
<title>2019-FR-01-poles</title> <title>2019-FR-01-poles</title>
<script> <script>
window.stringsLanguage = 'en'; window.stringsLanguage = 'en';
</script> </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"> <script class="remove" type="text/javascript">
var modulesPath = '../../../_common/modules'; var modulesPath = '../../../_common/modules';
importModules([ importModules([
@ -32,13 +34,14 @@
"fullFeedback": true, "fullFeedback": true,
"acceptedAnswers": [], "acceptedAnswers": [],
"usesRandomSeed": false "usesRandomSeed": false
}; };
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
var taskStrings = { var taskStrings = {
success: "恭喜, 你成功了 !", success: "恭喜, 你成功了 !",
tooManyJumps: function(nbBounces, maxNbBounces) { tooManyJumps: function (nbBounces, maxNbBounces) {
return "小松鼠可以跳跃 " + nbBounces + " 次。<br/>注意，本任务要求小松鼠最多只能跳跃 " + maxNbBounces + " 次哦。"; }, return "小松鼠可以跳跃 " + nbBounces + " 次。<br/>注意，本任务要求小松鼠最多只能跳跃 " + maxNbBounces + " 次哦。";
},
"try": "验证一下" "try": "验证一下"
}; };
@ -49,18 +52,137 @@
margin: 1em auto; margin: 1em auto;
touch-action: none; touch-action: none;
} }
#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;
}
#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> </style>
</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>-->
<div id="taskContent"> <div id="taskContent">
<div id="zone_1"> <div id="zone_1">
<div class="consigne"> <div class="consigne">
@ -76,7 +198,7 @@
</div> </div>
</div> </div>
<div id="zone_2"> <div id="zone_2">
<div id="paper"></div> <div id="paper"></div>
</div> </div>
<div id="error"></div> <div id="error"></div>
</div> </div>
@ -91,6 +213,26 @@
<h2>这是提示信息！折半查找，快速排序</h2> <h2>这是提示信息！折半查找，快速排序</h2>
</div> </div>
<!-- task-solution --> <!-- 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> </body>
</html> </html>