From ac70b8b5f88c6aba995367bc0f3204768bb49462 Mon Sep 17 00:00:00 2001
From: scales <a337918449@qq.com>
Date: Sat, 3 Jul 2021 10:36:25 +0800
Subject: [PATCH 1/3] delete description in 2019

---
 bebras/2019/FR-2019-02-registers/index_en.html         | 4 ++--
 bebras/2019/FR-2019-03-prediction/index_en.html        | 4 ++--
 bebras/2019/FR-2019-06-inclusions/index_en.html        | 1 +
 bebras/2019/FR-2019-07-two-connect/index_en.html       | 4 ++--
 bebras/2019/FR-2019-08-patterns/index_en.html          | 4 ++--
 bebras/2019/FR-2019-09-hidden-words/index_en.html      | 4 ++--
 bebras/2019/FR-2019-10-lighting/index_en.html          | 4 ++--
 bebras/2019/FR-2019-12-roller/index_en.html            | 4 ++--
 bebras/2019/FR-2019-13-align-strips/index_en.html      | 4 ++--
 bebras/2019/FR-2019-15-shape-compression/index_en.html | 4 ++--
 bebras/2019/FR-2019-17-base-4-encoding/index_en.html   | 4 ++--
 11 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/bebras/2019/FR-2019-02-registers/index_en.html b/bebras/2019/FR-2019-02-registers/index_en.html
index ac43996..d573435 100644
--- a/bebras/2019/FR-2019-02-registers/index_en.html
+++ b/bebras/2019/FR-2019-02-registers/index_en.html
@@ -364,12 +364,12 @@
       <div id="taskContent">
          <div id="zone_1">
             <div class="consigne">
-               <p>
+               <!-- <p>
                   你的目标是在最顶部的圆圈中放置一个小石子。
                </p>
                <p>想要在<span class="easy medium">一个</span>圆圈中放置<span class="hard">数字所对应数量的</span>小石子, 下面所有箭头指向的圆圈里都要有小石子。 然后你可以再把这些小石子拿回储备库。
                </p>
-               <p>点击圆圈放置<span class="easy medium">一个</span><span class="hard">圆圈中数字所对应数量的</span>小石子<span class="hard">组合 , </span>或者拿回<span class="easy medium">所放置的小石子</span><span class="hard">小石子</span>.</p>
+               <p>点击圆圈放置<span class="easy medium">一个</span><span class="hard">圆圈中数字所对应数量的</span>小石子<span class="hard">组合 , </span>或者拿回<span class="easy medium">所放置的小石子</span><span class="hard">小石子</span>.</p> -->
 
          </div>
          </div>
diff --git a/bebras/2019/FR-2019-03-prediction/index_en.html b/bebras/2019/FR-2019-03-prediction/index_en.html
index 9795863..7dc2d95 100644
--- a/bebras/2019/FR-2019-03-prediction/index_en.html
+++ b/bebras/2019/FR-2019-03-prediction/index_en.html
@@ -68,7 +68,7 @@
       <div id="taskContent">
          <div id="zone_1">
             <div class="consigne">
-               <p>你的目标是探究为什么有些袋鼠会收到花，而有些则不会。</p>
+               <!-- <p>你的目标是探究为什么有些袋鼠会收到花，而有些则不会。</p>
                <p>点击“试一试”按钮，让花朵出现。</p>
                <p>请仔细观察一下：
                <strong>
@@ -76,7 +76,7 @@
                <span class="medium hard">注意每只袋鼠上方和下方的小方格哦。</span>
                </strong></p>
 
-               <p>然后，点击“下一步”按钮，再点击将收到鲜花的袋鼠，给它们一个花盆。</p>
+               <p>然后，点击“下一步”按钮，再点击将收到鲜花的袋鼠，给它们一个花盆。</p> -->
          </div>
          </div>
          <div id="zone_2">
diff --git a/bebras/2019/FR-2019-06-inclusions/index_en.html b/bebras/2019/FR-2019-06-inclusions/index_en.html
index 18a59e8..431bc41 100644
--- a/bebras/2019/FR-2019-06-inclusions/index_en.html
+++ b/bebras/2019/FR-2019-06-inclusions/index_en.html
@@ -289,6 +289,7 @@
    <!-- task-solution -->
    <script>
       setTimeout(() => {
+         $('.consigne').remove();
          $('#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-07-two-connect/index_en.html b/bebras/2019/FR-2019-07-two-connect/index_en.html
index 8376f4c..f609b98 100644
--- a/bebras/2019/FR-2019-07-two-connect/index_en.html
+++ b/bebras/2019/FR-2019-07-two-connect/index_en.html
@@ -185,13 +185,13 @@
          <div id="taskContent">        <!-- will contain the content of the task -->
             <div id="zone_1">
                <div class="consigne">
-                  <p>小松鼠安装了水管，使水从水龙头里流出来浇花。</p>
+                  <!-- <p>小松鼠安装了水管，使水从水龙头里流出来浇花。</p>
                   <p>你的目标是，即使有一根管子卡住了，也要让所有的花都能浇到水。</p>
                   <p>为了实现目标, 请添加<strong><span id="minEdges"></span>根水管</strong>。</p>
                   <p>
                   分别点击两朵花，可以在它们之间加上1根水管。
                   点击添加的水管可以删除它。
-                  </p>
+                  </p> -->
 
                </div>
             </div>
diff --git a/bebras/2019/FR-2019-08-patterns/index_en.html b/bebras/2019/FR-2019-08-patterns/index_en.html
index f653583..8629270 100644
--- a/bebras/2019/FR-2019-08-patterns/index_en.html
+++ b/bebras/2019/FR-2019-08-patterns/index_en.html
@@ -187,9 +187,9 @@
       <div id="taskContent">
          <div id="zone_1">
             <div class="consigne">
-               <p>请把 <strong><span class="nbPatterns"></span></strong> 个蓝色图形放在下方的网格上。</p>
+               <!-- <p>请把 <strong><span class="nbPatterns"></span></strong> 个蓝色图形放在下方的网格上。</p>
                <p>请保持每个形状所覆盖图案的内容是相同的。</p>
-               <p class="hard">你可以在每一步结束后转动形状，改变形状的方向。</p>
+               <p class="hard">你可以在每一步结束后转动形状，改变形状的方向。</p> -->
          </div>
          </div>
          <div id="zone_2">
diff --git a/bebras/2019/FR-2019-09-hidden-words/index_en.html b/bebras/2019/FR-2019-09-hidden-words/index_en.html
index 122bfaa..37d02c2 100644
--- a/bebras/2019/FR-2019-09-hidden-words/index_en.html
+++ b/bebras/2019/FR-2019-09-hidden-words/index_en.html
@@ -101,7 +101,7 @@
       <div id="taskContent">
          <div id="zone_1">
             <div class="consigne">
-               <p>将卡片从网格拖到答案区域，形成<span class="easy medium">一个密码</span><span class="hard" style="font-weight:bold">三个密码</span>，是由5个符号组成的<span class="hard">密码</span>。</p>
+               <!-- <p>将卡片从网格拖到答案区域，形成<span class="easy medium">一个密码</span><span class="hard" style="font-weight:bold">三个密码</span>，是由5个符号组成的<span class="hard">密码</span>。</p>
                <p class="hard">对于每个密码:</p>
                <ul class="instr-bullets">
                <li class="easy">第一张卡片来自单元格<strong> A1</strong>。</li>
@@ -113,7 +113,7 @@
                <table><tr>
                <td><img src="example.png" style="width:100px; padding-bottom:0px"></td>
                <td>例如，在这张卡片之后，你需要放置的卡片是来自C列第2行的卡片。
-               </td></tr></table>
+               </td></tr></table> -->
             </div>
          </div>
          <div id="zone_2">
diff --git a/bebras/2019/FR-2019-10-lighting/index_en.html b/bebras/2019/FR-2019-10-lighting/index_en.html
index 45f8305..9b81904 100644
--- a/bebras/2019/FR-2019-10-lighting/index_en.html
+++ b/bebras/2019/FR-2019-10-lighting/index_en.html
@@ -75,13 +75,13 @@
       <div id="taskContent">
          <div id="zone_1">
             <div class="consigne">
-               <p>把彩色的灯拖拽到灰色的点上，实现目标光线。</p>
+               <!-- <p>把彩色的灯拖拽到灰色的点上，实现目标光线。</p>
 
                <p>表格中显示的数字或许可以帮助你进行判断。</p>
 
                <p class="easy">作为提示，我们已经放置了两盏灯。</p>
 
-               <p class="medium hard" style="font-weight:bold">希望你可以仅仅使用 <span class="nbLampsTarget"></span>&nbsp;盏灯，就实现目标。</p>
+               <p class="medium hard" style="font-weight:bold">希望你可以仅仅使用 <span class="nbLampsTarget"></span>&nbsp;盏灯，就实现目标。</p> -->
             </div>
          </div>
          <div id="zone_2">
diff --git a/bebras/2019/FR-2019-12-roller/index_en.html b/bebras/2019/FR-2019-12-roller/index_en.html
index ad69e61..d2f9a5f 100644
--- a/bebras/2019/FR-2019-12-roller/index_en.html
+++ b/bebras/2019/FR-2019-12-roller/index_en.html
@@ -383,7 +383,7 @@
       <div id="taskContent">
          <div id="zone_1">
             <div class="consigne">
-               <p><span class="easy">一个滚筒在方格纸上滚动。 它可以印制</span><span class="medium hard">滚筒在方格纸上滚动。 在滚动的时候它们可以印出来 </span> 邮票。</p>
+               <!-- <p><span class="easy">一个滚筒在方格纸上滚动。 它可以印制</span><span class="medium hard">滚筒在方格纸上滚动。 在滚动的时候它们可以印出来 </span> 邮票。</p>
 
                <p class="easy">修改滚筒的各个参数，以便印刷出目标中的邮票序列。</p>
                <p class="medium hard">单击每个滚轮可以查看它的参数，请修改它们，以便你可以创建出来目标中的邮票序列。</p>
@@ -392,7 +392,7 @@
 
                <p class="hard">先滚1号滚筒，然后再滚2号滚筒，最后是3号滚筒。</p>
 
-               <p class="medium hard"><strong>每个滚轮可以改变前一个滚轮所形成的形状。</strong></p>
+               <p class="medium hard"><strong>每个滚轮可以改变前一个滚轮所形成的形状。</strong></p> -->
 
             </div>
          </div>
diff --git a/bebras/2019/FR-2019-13-align-strips/index_en.html b/bebras/2019/FR-2019-13-align-strips/index_en.html
index 5f169fa..0afaff2 100644
--- a/bebras/2019/FR-2019-13-align-strips/index_en.html
+++ b/bebras/2019/FR-2019-13-align-strips/index_en.html
@@ -360,14 +360,14 @@
          <p id="difficultyWarning" class="hard"></p>
          <div id="zone_1">
             <div class="consigne">
-               <p>小松鼠想要通过管道从装满水的长方形水箱中喝到水。你需要帮助小松鼠调节管道的方向，从而使水箱中的水可以流到<span class="easy medium">小松鼠所在的位置</span><span class="hard">4只小松鼠中的每一只所在的位置</span>。</p>
+               <!-- <p>小松鼠想要通过管道从装满水的长方形水箱中喝到水。你需要帮助小松鼠调节管道的方向，从而使水箱中的水可以流到<span class="easy medium">小松鼠所在的位置</span><span class="hard">4只小松鼠中的每一只所在的位置</span>。</p>
 
                <p>每个管道都是安装在轮子上的，如果要改变管道的方向，你可以进行以下两个操作:
                </p>
                <ol class="actions-descr">
                <li>点击黑色杠杆，所有与杠杆相连的轮子都会随之转动。</li>
                <li>点击某个轮子，可以断开这个轮子与其他轮子的连接。此时再点击黑色杠杆，该轮子将不会再一起随之转动。再点击一次该轮子，会恢复与其他轮子的连接。</li>
-               </ol>
+               </ol> -->
             </div>
          </div>
          <div id="zone_2">
diff --git a/bebras/2019/FR-2019-15-shape-compression/index_en.html b/bebras/2019/FR-2019-15-shape-compression/index_en.html
index 91af24e..05fdc89 100644
--- a/bebras/2019/FR-2019-15-shape-compression/index_en.html
+++ b/bebras/2019/FR-2019-15-shape-compression/index_en.html
@@ -307,11 +307,11 @@
          <p id="difficultyWarning" class="hard"></p>
          <div id="zone_1">
             <div class="consigne">
-               <p>小松鼠有一种机器，可以根据某些规则变换一系列形状。</p>
+               <!-- <p>小松鼠有一种机器，可以根据某些规则变换一系列形状。</p>
                <p>寻找规则， <strong><span class="medium hard">并且</span> 制作一个形状序列，</strong> 使它对应的结果与目标相同。</p>
                <p class="medium hard">点击按钮 <img src="buttons.png" style="width:58px;vertical-align:-10px;"> 增加或者减少形状。</p>
                <p>点击灰色按钮中的形状来更改结果中的形状。 例如, 点击 <img src="button_shape.png" style="width:35px;vertical-align:-14px;">.</p>
-               <p class="hard" style="font-weight:bold">为了得到所有的分数，你的序列应该只包含6个形状。</p>
+               <p class="hard" style="font-weight:bold">为了得到所有的分数，你的序列应该只包含6个形状。</p> -->
             </div>
          </div>
          <div id="zone_2">
diff --git a/bebras/2019/FR-2019-17-base-4-encoding/index_en.html b/bebras/2019/FR-2019-17-base-4-encoding/index_en.html
index c007ac6..3c94059 100644
--- a/bebras/2019/FR-2019-17-base-4-encoding/index_en.html
+++ b/bebras/2019/FR-2019-17-base-4-encoding/index_en.html
@@ -65,8 +65,8 @@
       <div id="taskContent">
          <div id="zone_1">
             <div class="consigne">
-               <p>小松鼠用滑块来代表 <strong><span class="easy">1个符号</span><span class="medium">2&nbsp;个符号</span><span class="hard">3&nbsp;个符号</span></strong>.</p>
-               <p>移动这些滑块，使结果与目标相同。</p>
+               <!-- <p>小松鼠用滑块来代表 <strong><span class="easy">1个符号</span><span class="medium">2&nbsp;个符号</span><span class="hard">3&nbsp;个符号</span></strong>.</p>
+               <p>移动这些滑块，使结果与目标相同。</p> -->
             </div>
          </div>
          <div id="zone_2">
-- 
Gitee


From a5cca422ab01e06d4ce1c12eed571b2fd593dc81 Mon Sep 17 00:00:00 2001
From: scales <a337918449@qq.com>
Date: Sat, 3 Jul 2021 19:18:30 +0800
Subject: [PATCH 2/3] fix bug

---
 bebras/2019/FR-2019-06-inclusions/index_en.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bebras/2019/FR-2019-06-inclusions/index_en.html b/bebras/2019/FR-2019-06-inclusions/index_en.html
index 410a1d3..4d32a99 100644
--- a/bebras/2019/FR-2019-06-inclusions/index_en.html
+++ b/bebras/2019/FR-2019-06-inclusions/index_en.html
@@ -241,7 +241,7 @@
       <div id="taskContent">
          <div id="zone_1">
             <div class="consigne">
-              <!-- <p>
+              <p>
                   上方的图形描述了下方带蓝色角的矩形之间的组合关系是如何的。
                </p>
                <table>
@@ -256,7 +256,7 @@
                </table>
                <p>
                   如果你想改变嵌套关系，可以采取下列两种方式：（1）拖动矩形进行移动；（2）拖动矩形的蓝色角来改变它们的大小。
-               </p>-->
+               </p>
             </div>
          </div>
          <div id="zone_2">
-- 
Gitee


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 3/3] 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>
 
-- 
Gitee