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

screen adaptation below 1200px in poles/connect/patterns/inclusions

This commit is contained in:
scales 2021-07-03 20:59:25 +08:00
parent a5cca422ab
commit 7d243f98c4
4 changed files with 451 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,7 +73,7 @@
width: 100vw;
height: 100vh;
}
@media (min-width:1200px) {
#displayHelper_validate::before {
content: '';
width: 200%;
@ -175,6 +175,111 @@
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>
</head>
@ -217,6 +322,7 @@
<!-- 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);

135
bebras/2019/FR-2019-06-inclusions/index_en.html
View File

@ -96,7 +96,7 @@
width: 100vw;
height: 100vh;
}
@media (min-width:1200px) {
#displayHelper_validate::before {
content: '';
width: 200%;
@ -227,6 +227,139 @@
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>
</head>

103
bebras/2019/FR-2019-07-two-connect/index_en.html
View File

@ -73,6 +73,7 @@
height: 100vh;
}
@media (min-width:1200px) {
#displayHelper_validate::before {
content: '';
width: 200%;
@ -172,6 +173,108 @@
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>
<script src="task.js"></script>
</head>

105
bebras/2019/FR-2019-08-patterns/index_en.html
View File

@ -73,7 +73,7 @@
width: 100vw;
height: 100vh;
}
@media (min-width:1200px) {
#displayHelper_validate::before {
content: '';
width: 200%;
@ -174,6 +174,109 @@
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>
</head>