From 7d243f98c46ce2b8a8fcff33b4ac484ced56d0fb Mon Sep 17 00:00:00 2001
From: scales <a337918449@qq.com>
Date: Sat, 3 Jul 2021 20:59:25 +0800
Subject: [PATCH] screen adaptation below 1200px in
 poles/connect/patterns/inclusions

---
 bebras/2019/FR-2019-01-poles/index_en.html    | 110 +++++++++++++-
 .../2019/FR-2019-06-inclusions/index_en.html  | 137 +++++++++++++++++-
 .../2019/FR-2019-07-two-connect/index_en.html | 105 +++++++++++++-
 bebras/2019/FR-2019-08-patterns/index_en.html | 105 +++++++++++++-
 4 files changed, 451 insertions(+), 6 deletions(-)

diff --git a/bebras/2019/FR-2019-01-poles/index_en.html b/bebras/2019/FR-2019-01-poles/index_en.html
index 02f589f..e86ef8a 100644
--- a/bebras/2019/FR-2019-01-poles/index_en.html
+++ b/bebras/2019/FR-2019-01-poles/index_en.html
@@ -73,8 +73,8 @@
          width: 100vw;
          height: 100vh;
       }
-
-      #displayHelper_validate::before {
+      @media (min-width:1200px) {
+         #displayHelper_validate::before {
          content: '';
          width: 200%;
          height: 175%;
@@ -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);
diff --git a/bebras/2019/FR-2019-06-inclusions/index_en.html b/bebras/2019/FR-2019-06-inclusions/index_en.html
index 4d32a99..1cc79a4 100644
--- a/bebras/2019/FR-2019-06-inclusions/index_en.html
+++ b/bebras/2019/FR-2019-06-inclusions/index_en.html
@@ -96,8 +96,8 @@
          width: 100vw;
          height: 100vh;
       }
-
-      #displayHelper_validate::before {
+      @media (min-width:1200px) {
+         #displayHelper_validate::before {
          content: '';
          width: 200%;
          height: 175%;
@@ -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>
diff --git a/bebras/2019/FR-2019-07-two-connect/index_en.html b/bebras/2019/FR-2019-07-two-connect/index_en.html
index 25a8917..748201d 100644
--- a/bebras/2019/FR-2019-07-two-connect/index_en.html
+++ b/bebras/2019/FR-2019-07-two-connect/index_en.html
@@ -73,7 +73,8 @@
          height: 100vh;
       }
 
-      #displayHelper_validate::before {
+      @media (min-width:1200px) {
+         #displayHelper_validate::before {
          content: '';
          width: 200%;
          height: 175%;
@@ -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>
diff --git a/bebras/2019/FR-2019-08-patterns/index_en.html b/bebras/2019/FR-2019-08-patterns/index_en.html
index 8629270..9c351e2 100644
--- a/bebras/2019/FR-2019-08-patterns/index_en.html
+++ b/bebras/2019/FR-2019-08-patterns/index_en.html
@@ -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>