forked from Open-CT/openct-tasks
screen adaptation below 1200px in poles/connect/patterns/inclusions
This commit is contained in:
parent
a5cca422ab
commit
7d243f98c4
|
@ -73,7 +73,7 @@
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
@media (min-width:1200px) {
|
||||||
#displayHelper_validate::before {
|
#displayHelper_validate::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 200%;
|
width: 200%;
|
||||||
|
@ -175,6 +175,111 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
pointer-events: auto;
|
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>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
@ -217,6 +322,7 @@
|
||||||
<!-- task-solution -->
|
<!-- task-solution -->
|
||||||
<script>
|
<script>
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
console.log($(window).width());
|
||||||
$('#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);
|
$('#displayHelper_cancel').addClass('relative').css('z-index', 2000);
|
||||||
|
|
|
@ -96,7 +96,7 @@
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
@media (min-width:1200px) {
|
||||||
#displayHelper_validate::before {
|
#displayHelper_validate::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 200%;
|
width: 200%;
|
||||||
|
@ -227,6 +227,139 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -73,6 +73,7 @@
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width:1200px) {
|
||||||
#displayHelper_validate::before {
|
#displayHelper_validate::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 200%;
|
width: 200%;
|
||||||
|
@ -172,6 +173,108 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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>
|
||||||
<script src="task.js"></script>
|
<script src="task.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -73,7 +73,7 @@
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
@media (min-width:1200px) {
|
||||||
#displayHelper_validate::before {
|
#displayHelper_validate::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 200%;
|
width: 200%;
|
||||||
|
@ -174,6 +174,109 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue