diff --git a/bebras/2019/FR-2019-02-registers/index_en.html b/bebras/2019/FR-2019-02-registers/index_en.html
index ceba652..4b8d6dd 100644
--- a/bebras/2019/FR-2019-02-registers/index_en.html
+++ b/bebras/2019/FR-2019-02-registers/index_en.html
@@ -56,6 +56,75 @@
       };
    </script>
    <script type="text/javascript" src="task.js"></script>
+   <script type="text/javascript">
+      window.onload = function(){
+         let stepIndex = 0
+         $('body').append(`<div id="guide-box">
+                              <div class="guide-area">
+                                 <div class="guide-tip-box" id="guide-tip">
+                                    <div class="guide-tip-content">
+                                       <div class="circle"></div>
+                                       <div class="tip-info">
+                                          <span></span>
+                                       </div>
+                                       <div class="button-box" id="btn-box"></div>
+                                    </div>
+                                 </div>
+                              </div>
+                           </div>`)
+         let elementList = [{
+            target:'#paper > svg > circle:nth-of-type(4)',
+            tips:'点击已放入的石子，可以把石子拿出来',
+            tip_position:{
+               bottom:'-62px',
+               left:'-15px',
+            },
+            padding:'10px 10px'
+         },{
+            target:'#paper > svg > circle:nth-of-type(7)',
+            tips:'点击空白圆圈可以放入石子',
+            padding:'10px 10px',
+            tip_position:{
+               bottom:'-62px',
+               left:'-15px',
+            },
+         }]
+         updateGuide(elementList,stepIndex)
+         $('#btn-box').on('click','#next-step-btn',()=>{
+            stepIndex += 1
+            updateGuide(elementList,stepIndex)
+         })
+         $('#btn-box').on('click','#last-step-btn',()=>{
+            stepIndex -= 1
+            updateGuide(elementList,stepIndex)
+         })
+         $('#btn-box').on('click','#complete-btn',()=>{
+            $('#guide-box').remove()
+         })
+         $(window).resize(()=>{
+            updateGuide(elementList,stepIndex)
+         })
+      }
+      function updateGuide(elementList,stepIndex){
+         $('#guide-box > .guide-area').css('width','40px')
+                                      .css('height','40px')
+                                      .css('top',$(elementList[stepIndex].target).offset().top-parseFloat(elementList[stepIndex].padding.split(' ')[0].replace('px'))+'px')
+                                      .css('left',$(elementList[stepIndex].target).offset().left-parseFloat(elementList[stepIndex].padding.split(' ')[1].replace('px'))+'px')
+                                      .css('border-radius',$(elementList[stepIndex].target).height()+20+'px')
+                                      .css('padding',elementList[stepIndex].padding)
+
+         for(let key in elementList[stepIndex].tip_position){
+            $('#guide-tip').css(key,elementList[stepIndex].tip_position[key])
+         }
+        $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementList[stepIndex].tips)
+        $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
+                                                                                                ${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
+                                                                                                ${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
+                                                                                                ${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
+                                                                                             `)
+
+      }  
+   </script>
    <style>
       #paper {
          margin: 1em auto;
@@ -71,6 +140,86 @@
          display: block;
          margin: auto;
       }
+      #guide-box{
+         width: 100%;
+         height: 100%;
+         position: fixed;
+         left: 0;
+         top: 0;
+         z-index: 998;
+      }
+      #guide-box > .guide-area{
+         box-shadow: 1px 1px 100000px 100000px rgb(124 152 209  / 50%);
+         position: fixed;
+         transition: all 500ms;
+         /* padding: 10px 0px; */
+      }
+      #guide-box > .guide-area > .guide-tip-box{
+         height: 36px;
+         position: absolute;
+         bottom:-60px;
+         left: 60px;
+         box-sizing: border-box;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
+         height: 100%;
+         background-color: white;
+         border-radius: 12px;
+         position: relative;
+         box-sizing: border-box;
+         padding: 0px 8px;
+         display: flex;
+         align-items: center;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
+         content:'';
+         display: block;
+         position: absolute;
+         width: 0;
+         height: 0;
+         border-left: 12px solid transparent;
+         border-right: 12px solid transparent;
+         border-bottom: 12px solid white;
+         top: -12px;
+         left: 30px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
+         width: 8px;
+         height: 8px;
+         border-radius: 8px;
+         background-color: #FDF151;
+         margin: 14px 10px 14px 0px;
+         float: left;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
+         height: 100%;
+         line-height: 36px;
+         display: inline-block;
+         white-space:nowrap;
+         margin-right: 10px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
+         font-size: 14px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
+         height: 100%;
+         display: flex;
+         align-items: center;
+         white-space:nowrap;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
+         padding: 0px 8px;
+         height: 24px;
+         border: 1px solid #ccc;
+         margin: 5px 0px;
+         border-radius: 6px;
+         line-height: 24px;
+         cursor: pointer;
+         margin-right: 10px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
+         font-size: 14px;
+      }
    </style>
 </head>
 
diff --git a/bebras/2019/FR-2019-12-roller/index_en.html b/bebras/2019/FR-2019-12-roller/index_en.html
index ada6d8f..ad69e61 100644
--- a/bebras/2019/FR-2019-12-roller/index_en.html
+++ b/bebras/2019/FR-2019-12-roller/index_en.html
@@ -55,6 +55,214 @@
       };
    </script>
    <script type="text/javascript" src="task.js"></script>
+   <script type="text/javascript">
+      window.onload = function(){
+         let levelHash = window.location.hash?window.location.hash.replace('#',''):'easy'
+         let level = ['easy','medium','hard'].includes(levelHash)?levelHash:'easy'
+         let stepIndex = 0
+         $('body').append(`<div id="guide-box">
+                              <div class="guide-area">
+                                 <div class="guide-tip-box" id="guide-tip">
+                                    <div class="guide-tip-content">
+                                       <div class="circle"></div>
+                                       <div class="tip-info">
+                                          <span></span>
+                                       </div>
+                                       <div class="button-box" id="btn-box"></div>
+                                    </div>
+                                 </div>
+                              </div>
+                           </div>`)
+         let elementList = [{
+            target:'#displayHelper_validate',
+            tips:'点击“试一试”来验证你的想法，不限次数~',
+            tip_position:{
+               bottom:'-62px',
+               left:'30px',
+            },
+            padding:'10px 0px',
+            level:['easy'],
+            step:{
+               easy:2,
+            },
+            borderRadius:16
+         },{
+            target:'#nbStamps_select',
+            tips:'点击选择邮票数量',
+            padding:'10px 20px',
+            tip_position:{
+               bottom:'-62px',
+               left:'30px',
+            },
+            level:['easy','medium','hard'],
+            step:{
+               easy:0,
+               medium:1,
+               hard:1
+            },
+            borderRadius:16
+         },{
+            target:'#stampsPaper > svg',
+            tips:'点击改变每张邮票颜色',
+            padding:'10px 10px',
+            tip_position:{
+               bottom:'-62px',
+               left:'30px',
+            },
+            level:['easy','medium','hard'],
+            step:{
+               easy:1,
+               medium:2,
+               hard:2
+            },
+            borderRadius:16
+         },{
+            target:['#paper > svg > rect:nth-of-type(1)','#paper > svg > rect:nth-of-type(2)'],
+            tips:'点击滚筒，可以选中其中的一个，再去修改它的参数。',
+            padding:'10px 10px',
+            tip_position:{
+               bottom:'-62px',
+               left:'30px',
+            },
+            level:['medium','hard'],
+            step:{
+               medium:0,
+               hard:0
+            },
+            borderRadius:16
+         },{
+            target:'#parameters > tbody > tr:nth-of-type(3)',
+            tips:'点击选择当前选中的滚筒滚动的起始和终止位置',
+            padding:'10px 10px',
+            tip_position:{
+               bottom:'-62px',
+               left:'30px',
+            },
+            level:['medium','hard'],
+            step:{
+               medium:3,
+               hard:3
+            },
+            borderRadius:16
+         },{
+            target:['#displayHelper_validate','#displayHelper_cancel'],
+            tips:'当你设置好每个滚筒的参数之后，可以点击“试一试”验证你的答案，也可以重新开始。',
+            padding:'10px 10px',
+            tip_position:{
+               bottom:'-62px',
+               left:'30px',
+            },
+            level:['medium','hard'],
+            step:{
+               medium:4,
+               hard:4
+            },
+            borderRadius:16
+         }]
+         elementList = elementList.filter(item=>item.level.includes(level))
+         updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
+         $('#btn-box').on('click','#next-step-btn',()=>{
+            stepIndex += 1
+            updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
+         })
+         $('#btn-box').on('click','#last-step-btn',()=>{
+            stepIndex -= 1
+            updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
+         })
+         $('#btn-box').on('click','#complete-btn',()=>{
+            $('#guide-box').remove()
+         })
+         $(window).resize(()=>{
+            updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
+         })
+         $(document).scroll(()=>{
+            updateGuide(elementList,elementList.findIndex(item=>item.step[level]==stepIndex),stepIndex)
+         })
+     }
+      function updateGuide(elementList,itemIndex,stepIndex){
+         let elementItem = elementList[itemIndex]
+         $('#guide-box > .guide-area').css('width',getTargetWidth(elementItem.target)+'px')
+                                      .css('height',getTargetHeight(elementItem.target)+'px')
+                                      .css('top',getTargetTop(elementItem.target,parseFloat(elementItem.padding.split(' ')[0].replace('px')))+'px')
+                                      .css('left',getTargetLeft(elementItem.target,parseFloat(elementItem.padding.split(' ')[1].replace('px')))+'px')
+                                      .css('border-radius',elementItem.borderRadius+'px')
+                                      .css('padding',elementItem.padding)
+
+         for(let key in elementItem.tip_position){
+            $('#guide-tip').css(key,elementItem.tip_position[key])
+         }
+        $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementItem.tips)
+        $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
+                                                                                                ${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
+                                                                                                ${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
+                                                                                                ${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
+                                                                                             `)
+
+      }
+
+      function getTargetWidth(targetElement){
+         if(typeof targetElement == 'object'){
+            let value = 0;
+            let leftValue = [2000,0]
+            for(let elementItem of targetElement){
+               let elementLeft = $(elementItem).offset().left
+               if(elementLeft<leftValue[0]){
+                  leftValue[0] = elementLeft
+               }
+               
+               if(elementLeft>leftValue[1]){
+                  leftValue[1] = elementLeft
+                  value = 0
+                  value += $(elementItem).width()
+               }
+            }
+            return value + leftValue[1] - leftValue[0] 
+         }
+         return $(targetElement).width()
+      }
+
+      function getTargetHeight(targetElement) {
+         if(typeof targetElement == 'object'){
+            let value = 0;
+            let topValue = [2000,0]
+            for(let elementItem of targetElement){
+               let elementTop = $(elementItem).offset().top
+               if(elementTop<topValue[0]){
+                  topValue[0] = elementTop
+               }
+               
+               if(elementTop>topValue[1]){
+                  topValue[1] = elementTop
+                  value = 0
+                  value += $(elementItem).height()
+               }
+            }
+            return value + topValue[1] - topValue[0] 
+         }
+         return $(targetElement).height()
+      }
+
+      function getTargetTop(targetElement,padding) {
+         if(typeof targetElement == 'object'){
+            let value = 2000
+            for(let elementItem of targetElement){
+               value = $(elementItem).offset().top<value?$(elementItem).offset().top:value
+            }
+            return value - padding - $(document).scrollTop()
+         }
+         return $(targetElement).offset().top - padding - $(document).scrollTop()
+      }
+      function getTargetLeft(targetElement,padding) {
+         if(typeof targetElement == 'object'){
+            let value = 2000
+            for(let elementItem of targetElement){
+               value = $(elementItem).offset().left<value?$(elementItem).offset().left:value
+            }
+            return value - padding
+         }
+         return $(targetElement).offset().left - padding
+      }
+   </script>
    <style>
       #parameters {
          margin: 1em auto 0 auto;
@@ -85,6 +293,86 @@
          width: 4em;
          height: 2em;
       }
+      #guide-box{
+         width: 100%;
+         height: 100%;
+         position: fixed;
+         left: 0;
+         top: 0;
+         z-index: 998;
+      }
+      #guide-box > .guide-area{
+         box-shadow: 1px 1px 100000px 100000px rgb(124 152 209  / 50%);
+         position:absolute;
+         transition: all 500ms;
+         /* padding: 10px 0px; */
+      }
+      #guide-box > .guide-area > .guide-tip-box{
+         height: 36px;
+         position: absolute;
+         bottom:-60px;
+         left: 60px;
+         box-sizing: border-box;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
+         height: 100%;
+         background-color: white;
+         border-radius: 12px;
+         position: relative;
+         box-sizing: border-box;
+         padding: 0px 8px;
+         display: flex;
+         align-items: center;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
+         content:'';
+         display: block;
+         position: absolute;
+         width: 0;
+         height: 0;
+         border-left: 12px solid transparent;
+         border-right: 12px solid transparent;
+         border-bottom: 12px solid white;
+         top: -12px;
+         left: 30px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
+         width: 8px;
+         height: 8px;
+         border-radius: 8px;
+         background-color: #FDF151;
+         margin: 14px 10px 14px 0px;
+         float: left;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
+         height: 100%;
+         line-height: 36px;
+         display: inline-block;
+         white-space:nowrap;
+         margin-right: 10px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
+         font-size: 14px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
+         height: 100%;
+         display: flex;
+         align-items: center;
+         white-space:nowrap;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
+         padding: 0px 8px;
+         height: 24px;
+         border: 1px solid #ccc;
+         margin: 5px 0px;
+         border-radius: 6px;
+         line-height: 24px;
+         cursor: pointer;
+         margin-right: 10px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
+         font-size: 14px;
+      }
    </style>
 </head>
 
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 cce2643..30e1fba 100644
--- a/bebras/2019/FR-2019-13-align-strips/index_en.html
+++ b/bebras/2019/FR-2019-13-align-strips/index_en.html
@@ -56,6 +56,77 @@
       };
    </script>
    <script type="text/javascript" src="task.js"></script>
+   <script type="text/javascript">
+      window.onload = function(){
+         let stepIndex = 0
+         $('body').append(`<div id="guide-box">
+                              <div class="guide-area">
+                                 <div class="guide-tip-box" id="guide-tip">
+                                    <div class="guide-tip-content">
+                                       <div class="circle"></div>
+                                       <div class="tip-info">
+                                          <span></span>
+                                       </div>
+                                       <div class="button-box" id="btn-box"></div>
+                                    </div>
+                                 </div>
+                              </div>
+                           </div>`)
+         let elementList = [{
+            target:'#paper > svg > circle:nth-of-type(8)',
+            tips:'点击转动杠杆，改变轨道方向',
+            tip_position:{
+               bottom:'-62px',
+               left:'-15px',
+            },
+            size:'24px',
+            padding:'10px 10px',
+         },{
+            target:'#paper > svg > circle:nth-of-type(5)',
+            tips:'点击单个轮子，使其断开或连接单个轮子',
+            padding:'10px 20px',
+            tip_position:{
+               bottom:'-62px',
+               left:'30px',
+            },
+            size:'69px',
+         }]
+         updateGuide(elementList,stepIndex)
+         $('#btn-box').on('click','#next-step-btn',()=>{
+            stepIndex += 1
+            updateGuide(elementList,stepIndex)
+         })
+         $('#btn-box').on('click','#last-step-btn',()=>{
+            stepIndex -= 1
+            updateGuide(elementList,stepIndex)
+         })
+         $('#btn-box').on('click','#complete-btn',()=>{
+            $('#guide-box').remove()
+         })
+         $(window).resize(()=>{
+            updateGuide(elementList,stepIndex)
+         })
+      }
+      function updateGuide(elementList,stepIndex){
+         $('#guide-box > .guide-area').css('width',elementList[stepIndex].size)
+                                      .css('height',elementList[stepIndex].size)
+                                      .css('top',$(elementList[stepIndex].target).offset().top-parseFloat(elementList[stepIndex].padding.split(' ')[0].replace('px'))+'px')
+                                      .css('left',$(elementList[stepIndex].target).offset().left-parseFloat(elementList[stepIndex].padding.split(' ')[1].replace('px'))+'px')
+                                      .css('border-radius',$(elementList[stepIndex].target).height()+20+'px')
+                                      .css('padding',elementList[stepIndex].padding)
+
+         for(let key in elementList[stepIndex].tip_position){
+            $('#guide-tip').css(key,elementList[stepIndex].tip_position[key])
+         }
+        $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementList[stepIndex].tips)
+        $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
+                                                                                                ${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
+                                                                                                ${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
+                                                                                                ${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
+                                                                                             `)
+
+      }  
+   </script>
    <style>
       #paper {
          margin-top: 1em;
@@ -66,6 +137,86 @@
       .actions-descr li {
          margin-top: 1em;
       }
+      #guide-box{
+         width: 100%;
+         height: 100%;
+         position: fixed;
+         left: 0;
+         top: 0;
+         z-index: 998;
+      }
+      #guide-box > .guide-area{
+         box-shadow: 1px 1px 100000px 100000px rgb(124 152 209  / 50%);
+         position: fixed;
+         transition: all 500ms;
+         /* padding: 10px 0px; */
+      }
+      #guide-box > .guide-area > .guide-tip-box{
+         height: 36px;
+         position: absolute;
+         bottom:-60px;
+         left: 60px;
+         box-sizing: border-box;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
+         height: 100%;
+         background-color: white;
+         border-radius: 12px;
+         position: relative;
+         box-sizing: border-box;
+         padding: 0px 8px;
+         display: flex;
+         align-items: center;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
+         content:'';
+         display: block;
+         position: absolute;
+         width: 0;
+         height: 0;
+         border-left: 12px solid transparent;
+         border-right: 12px solid transparent;
+         border-bottom: 12px solid white;
+         top: -12px;
+         left: 30px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
+         width: 8px;
+         height: 8px;
+         border-radius: 8px;
+         background-color: #FDF151;
+         margin: 14px 10px 14px 0px;
+         float: left;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
+         height: 100%;
+         line-height: 36px;
+         display: inline-block;
+         white-space:nowrap;
+         margin-right: 10px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
+         font-size: 14px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
+         height: 100%;
+         display: flex;
+         align-items: center;
+         white-space:nowrap;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
+         padding: 0px 8px;
+         height: 24px;
+         border: 1px solid #ccc;
+         margin: 5px 0px;
+         border-radius: 6px;
+         line-height: 24px;
+         cursor: pointer;
+         margin-right: 10px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
+         font-size: 14px;
+      }
    </style>
 </head>
 
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 fe25fc3..37ec88d 100644
--- a/bebras/2019/FR-2019-15-shape-compression/index_en.html
+++ b/bebras/2019/FR-2019-15-shape-compression/index_en.html
@@ -51,6 +51,75 @@
       };
    </script>
    <script type="text/javascript" src="task.js"></script>
+   <script type="text/javascript">
+      window.onload = function(){
+         let stepIndex = 0
+         $('body').append(`<div id="guide-box">
+                              <div class="guide-area">
+                                 <div class="guide-tip-box" id="guide-tip">
+                                    <div class="guide-tip-content">
+                                       <div class="circle"></div>
+                                       <div class="tip-info">
+                                          <span></span>
+                                       </div>
+                                       <div class="button-box" id="btn-box"></div>
+                                    </div>
+                                 </div>
+                              </div>
+                           </div>`)
+         let elementList = [{
+            target:'#displayHelper_validate',
+            tips:'点击“试一试”来验证你的想法，不限次数~',
+            tip_position:{
+               bottom:'-62px',
+               left:'30px',
+            },
+            padding:'10px 0px'
+         },{
+            target:'#paper > svg > rect:nth-of-type(17)',
+            tips:'点击形状可以变为不同的形状',
+            padding:'10px 20px',
+            tip_position:{
+               bottom:'-62px',
+               left:'30px',
+            },
+         }]
+         updateGuide(elementList,stepIndex)
+         $('#btn-box').on('click','#next-step-btn',()=>{
+            stepIndex += 1
+            updateGuide(elementList,stepIndex)
+         })
+         $('#btn-box').on('click','#last-step-btn',()=>{
+            stepIndex -= 1
+            updateGuide(elementList,stepIndex)
+         })
+         $('#btn-box').on('click','#complete-btn',()=>{
+            $('#guide-box').remove()
+         })
+         $(window).resize(()=>{
+            updateGuide(elementList,stepIndex)
+         })
+      }
+      function updateGuide(elementList,stepIndex){
+         $('#guide-box > .guide-area').css('width',$(elementList[stepIndex].target).width()+'px')
+                                      .css('height',$(elementList[stepIndex].target).height()+'px')
+                                      .css('top',$(elementList[stepIndex].target).offset().top-parseFloat(elementList[stepIndex].padding.split(' ')[0].replace('px'))+'px')
+                                      .css('left',$(elementList[stepIndex].target).offset().left-parseFloat(elementList[stepIndex].padding.split(' ')[1].replace('px'))+'px')
+                                      .css('border-radius',$(elementList[stepIndex].target).height()+20+'px')
+                                      .css('padding',elementList[stepIndex].padding)
+
+         for(let key in elementList[stepIndex].tip_position){
+            $('#guide-tip').css(key,elementList[stepIndex].tip_position[key])
+         }
+        $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementList[stepIndex].tips)
+        $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
+                                                                                                ${stepIndex!=0?'<div id="last-step-btn" class="step-btn"><span>上一步</span></div>':''}
+                                                                                                ${stepIndex!=elementList.length-1?'<div id="next-step-btn" class="step-btn"><span>下一步</span></div>':''}
+                                                                                                ${elementList.length-1==stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
+                                                                                             `)
+
+      }  
+   </script>
    <style>
       #paper {
          margin-top: 1em;
@@ -58,7 +127,86 @@
       #error {
          text-align: center;
       }
-
+            #guide-box{
+         width: 100%;
+         height: 100%;
+         position: fixed;
+         left: 0;
+         top: 0;
+         z-index: 998;
+      }
+      #guide-box > .guide-area{
+         box-shadow: 1px 1px 100000px 100000px rgb(124 152 209  / 50%);
+         position: fixed;
+         transition: all 500ms;
+         /* padding: 10px 0px; */
+      }
+      #guide-box > .guide-area > .guide-tip-box{
+         height: 36px;
+         position: absolute;
+         bottom:-60px;
+         left: 60px;
+         box-sizing: border-box;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content{
+         height: 100%;
+         background-color: white;
+         border-radius: 12px;
+         position: relative;
+         box-sizing: border-box;
+         padding: 0px 8px;
+         display: flex;
+         align-items: center;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content::before{
+         content:'';
+         display: block;
+         position: absolute;
+         width: 0;
+         height: 0;
+         border-left: 12px solid transparent;
+         border-right: 12px solid transparent;
+         border-bottom: 12px solid white;
+         top: -12px;
+         left: 30px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .circle{
+         width: 8px;
+         height: 8px;
+         border-radius: 8px;
+         background-color: #FDF151;
+         margin: 14px 10px 14px 0px;
+         float: left;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info{
+         height: 100%;
+         line-height: 36px;
+         display: inline-block;
+         white-space:nowrap;
+         margin-right: 10px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span{
+         font-size: 14px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box{
+         height: 100%;
+         display: flex;
+         align-items: center;
+         white-space:nowrap;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn{
+         padding: 0px 8px;
+         height: 24px;
+         border: 1px solid #ccc;
+         margin: 5px 0px;
+         border-radius: 6px;
+         line-height: 24px;
+         cursor: pointer;
+         margin-right: 10px;
+      }
+      #guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box > .step-btn > span{
+         font-size: 14px;
+      }
    </style>
 </head>