forked from Open-CT/openct-tasks
add guidance to poles\connect\inclusions\patterns
This commit is contained in:
parent
fca928b8b9
commit
9faa3c018d
|
@ -76,18 +76,18 @@
|
||||||
|
|
||||||
#displayHelper_validate::before {
|
#displayHelper_validate::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 100%;
|
width: 200%;
|
||||||
height: 180%;
|
height: 175%;
|
||||||
background-color: rgba(255, 255, 255);
|
background-color: rgba(255, 255, 255);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -40%;
|
top: -40%;
|
||||||
right: 0%;
|
left: 0%;
|
||||||
border-radius: 83px;
|
border-radius: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#displayHelper_validate::after {
|
#displayHelper_validate::after {
|
||||||
content: '点击验证,可以验证你的效果~';
|
content: '您可以验证答案是否正确或重新开始作答~';
|
||||||
width: 200%;
|
width: 200%;
|
||||||
height: 180%;
|
height: 180%;
|
||||||
background-color: rgba(255, 255, 255);
|
background-color: rgba(255, 255, 255);
|
||||||
|
@ -121,7 +121,9 @@
|
||||||
.relative {
|
.relative {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
#popupMessage.floatingMessage {
|
||||||
|
z-index: 2100;
|
||||||
|
}
|
||||||
#paper::before {
|
#paper::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -135,8 +137,8 @@
|
||||||
|
|
||||||
#paper::after {
|
#paper::after {
|
||||||
content: '拖动任意柱子,可以改变柱子的位置';
|
content: '拖动任意柱子,可以改变柱子的位置';
|
||||||
width: 90%;
|
width: 288px;
|
||||||
height: 30%;
|
height: 60px;
|
||||||
background-color: rgba(255, 255, 255);
|
background-color: rgba(255, 255, 255);
|
||||||
z-index: 1500;
|
z-index: 1500;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -160,7 +162,7 @@
|
||||||
background-color: #FDF151;
|
background-color: #FDF151;
|
||||||
z-index: 1500;
|
z-index: 1500;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 200%;
|
top: 150%;
|
||||||
left: 60%;
|
left: 60%;
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
@ -217,10 +219,9 @@
|
||||||
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);
|
||||||
|
$('#displayHelper_cancel').addClass('relative').css('z-index', 2000);
|
||||||
$('#paper').addClass('relative').css('z-index', 2000);
|
$('#paper').addClass('relative').css('z-index', 2000);
|
||||||
$('#zone_2').addClass('relative').css({'z-index': 2100},{'pointer-events': 'none'});
|
$('#zone_2').addClass('relative').css({'z-index': 2000},{'pointer-events': 'none'});
|
||||||
// $('#displayHelper_validate').append("<style>#displayHelper_validate::after{}</style>");
|
|
||||||
|
|
||||||
}, 50);
|
}, 50);
|
||||||
$('#zone_2').on('click', function () {
|
$('#zone_2').on('click', function () {
|
||||||
$('#zone_2').append("<style>#zone_2::after{content: none}</style>");
|
$('#zone_2').append("<style>#zone_2::after{content: none}</style>");
|
||||||
|
@ -229,8 +230,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');
|
||||||
})
|
})
|
||||||
// console.log($('#displayHelper_validate'));
|
|
||||||
// console.log($('#displayHelper_validate').html())
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -2,12 +2,14 @@
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8"></meta>
|
<meta charset="utf-8">
|
||||||
|
</meta>
|
||||||
<title>2019-FR-06-inclusion</title>
|
<title>2019-FR-06-inclusion</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([
|
||||||
|
@ -33,7 +35,7 @@
|
||||||
"fullFeedback": true,
|
"fullFeedback": true,
|
||||||
"acceptedAnswers": [],
|
"acceptedAnswers": [],
|
||||||
"usesRandomSeed": false
|
"usesRandomSeed": false
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var taskStrings = {
|
var taskStrings = {
|
||||||
|
@ -46,59 +48,221 @@
|
||||||
#diagrams {
|
#diagrams {
|
||||||
margin: 1em 0 1em 0;
|
margin: 1em 0 1em 0;
|
||||||
}
|
}
|
||||||
#diagrams > * {
|
|
||||||
|
#diagrams>* {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
#target, #current {
|
|
||||||
|
#target,
|
||||||
|
#current {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
/*height: 250px;*/
|
/*height: 250px;*/
|
||||||
background: black;
|
background: black;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
/*margin: 0;*/
|
/*margin: 0;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
#rectangles {
|
#rectangles {
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#error {
|
#error {
|
||||||
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
</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">
|
||||||
<p>
|
<p>
|
||||||
上方的图形描述了下方带蓝色角的矩形之间的组合关系是如何的。
|
上方的图形描述了下方带蓝色角的矩形之间的组合关系是如何的。
|
||||||
</p>
|
</p>
|
||||||
<table><tr><td>
|
<table>
|
||||||
<div id="example" style="padding-right: 10px"></div>
|
<tr>
|
||||||
</td><td>
|
<td>
|
||||||
从B到A的箭头意味着矩形B需要完全在矩形A内。
|
<div id="example" style="padding-right: 10px"></div>
|
||||||
</td></tr></table>
|
</td>
|
||||||
|
<td>
|
||||||
|
从B到A的箭头意味着矩形B需要完全在矩形A内。
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
<p>
|
<p>
|
||||||
如果你想改变嵌套关系,可以采取下列两种方式:(1)拖动矩形进行移动;(2)拖动矩形的蓝色角来改变它们的大小。
|
如果你想改变嵌套关系,可以采取下列两种方式:(1)拖动矩形进行移动;(2)拖动矩形的蓝色角来改变它们的大小。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="zone_2">
|
<div id="zone_2">
|
||||||
<div id="diagrams">
|
<div id="diagrams">
|
||||||
<div>
|
<div>
|
||||||
<h4>你的图形</h4>
|
<h4 id="current_guide">你的图形</h4>
|
||||||
<div id="current"></div>
|
<div id="current"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -108,7 +272,6 @@
|
||||||
<div id="target"></div>
|
<div id="target"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="rectangles"></div>
|
<div id="rectangles"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -124,6 +287,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);
|
||||||
|
$('#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>
|
|
@ -57,10 +57,128 @@
|
||||||
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="task.js"></script>
|
<script src="task.js"></script>
|
||||||
</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 –>-->
|
||||||
|
@ -103,6 +221,22 @@
|
||||||
</div><!-- task -->
|
</div><!-- task -->
|
||||||
<div id="solution">
|
<div id="solution">
|
||||||
<h2>Solution 离散数学-图论-节点的度</h2>
|
<h2>Solution 离散数学-图论-节点的度</h2>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
|
|
@ -58,11 +58,129 @@
|
||||||
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
</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>-->
|
||||||
|
@ -93,6 +211,22 @@
|
||||||
<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);
|
||||||
|
$('#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>
|
||||||
|
|
Loading…
Reference in New Issue