diff --git a/_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css b/_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css
new file mode 100644
index 0000000..43d8b93
--- /dev/null
+++ b/_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css
@@ -0,0 +1,80 @@
+#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 > .triangle{
+ /*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;
+ }
\ No newline at end of file
diff --git a/_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js b/_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js
new file mode 100644
index 0000000..69a8782
--- /dev/null
+++ b/_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js
@@ -0,0 +1,184 @@
+/*
+ * @Author: stacker
+ * @Date: 2021-07-06 23:20:58
+ * @LastEditTime: 2021-07-07 00:57:07
+ * @LastEditors: Please set LastEditors
+ * @Description: 步骤引导文件
+ * @FilePath: \bebras-tasks\_common\modules\integrationAPI.01\installationAPI.01\pemFioi\stepGuidance.js
+ */
+
+class StepGuidance{
+ /**
+ * elementStepList 步骤元素列表
+ * 元素参数：
+ * {
+ * target: 目标元素:String
+ * tip: 提示信息:String
+ * tips_position:{ 提示信息框位置控制:String
+ * bottom: 提示信息框距离选中框下部位置:String
+ * left: 提示信息框距离选中框左侧位置:String
+ * t_left: 提示信息框三角形位置:String
+ * }
+ * padding: 选中框padding大小:String
+ * level: 元素所属于难度:Array
+ * step:{ 元素所属步骤
+ * easy: 元素在easy难度下数以第几部:Number
+ * medium: 元素在medium难度下数以第几部:Number
+ * hard: 元素在hard难度下数以第几部:Number
+ * }
+ * borderRadius: 选中框圆角大小:Number
+ * isSVG: 元素是否属于SVG元素:Boolean
+ * }
+ */
+ elementStepList = []
+ level = "easy"
+ guidanceName = ""
+ stepIndex = 0
+ constructor(stepList,guidanceName){
+ let levelHash = window.location.hash?window.location.hash.replace('#',''):'easy'
+ this.level = ['easy','medium','hard'].includes(levelHash)?levelHash:'easy'
+ this.elementStepList = stepList.filter(item=>item.level.includes(this.level))
+ this.guidanceName = guidanceName
+ }
+ init(){
+ if(this.getCookie()){
+ console.log('页面已经加载过指导，不再加载')
+ }else{
+ window.onload = ()=>{
+ this.guidanceBegin()
+ this.updateGuidanceStep()
+ $('#btn-box').on('click','#next-step-btn',()=>{
+ this.stepIndex += 1
+ this.updateGuidanceStep()
+ })
+ $('#btn-box').on('click','#last-step-btn',()=>{
+ this.stepIndex -= 1
+ this.updateGuidanceStep()
+ })
+ $('#btn-box').on('click','#complete-btn',()=>{
+ $('#guide-box').remove()
+ this.setCookie()
+ })
+ $(window).resize(()=>{
+ this.updateGuidanceStep()
+ })
+ $(document).scroll(()=>{
+ this.updateGuidanceStep()
+ })
+ }
+ }
+ }
+ guidanceBegin(){
+ //载入引导主体
+ if($("#guide-box").length==0){
+ $('body').append(``)
+ }
+ }
+ updateGuidanceStep(){
+ let elementTarget = this.elementStepList[this.elementStepList.findIndex(item=>item.step[this.level]==this.stepIndex)]
+ $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .triangle').css('left',elementTarget.tip_position.t_left)
+ $('#guide-box > .guide-area').css('width',this.getTargetWidth(elementTarget)+'px')
+ .css('height',this.getTargetHeight(elementTarget)+'px')
+ .css('top',this.getTargetTop(elementTarget)+'px')
+ .css('left',this.getTargetLeft(elementTarget)+'px')
+ .css('border-radius',elementTarget.borderRadius+'px')
+ .css('padding',elementTarget.padding)
+ for(let key in elementTarget.tip_position){
+ $('#guide-tip').css(key,elementTarget.tip_position[key])
+ }
+ $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .tip-info > span').text(elementTarget.tips)
+ $('#guide-box > .guide-area > .guide-tip-box > .guide-tip-content > .button-box').html(`
+ ${this.stepIndex!=0?'上一步
':''}
+ ${this.stepIndex!=this.elementStepList.length-1?'下一步
':''}
+ ${this.elementStepList.length-1==this.stepIndex?'我知道了！
':''}
+ `)
+ }
+ getCookie(cookieName=this.guidanceName){
+ var name = cookieName + "=";
+ var ca = document.cookie.split(';');
+ for(var i=0; ileftValue[1]){
+ leftValue[1] = elementLeft
+ value = 0
+ value += $(elementItem).width()
+ }
+ }
+ return value + leftValue[1] - leftValue[0]
+ }
+ return elementTarget.isSVG?$(elementTarget.target).get(0).getBBox().width:$(elementTarget.target).outerWidth()
+ }
+ getTargetHeight(elementTarget) {
+ if(typeof elementTarget.target == 'object'){
+ let value = 0;
+ let topValue = [2000,0]
+ for(let elementItem of elementTarget.target){
+ let elementTop = $(elementItem).offset().top
+ if(elementToptopValue[1]){
+ topValue[1] = elementTop
+ value = 0
+ value += $(elementItem).height()
+ }
+ }
+ return value + topValue[1] - topValue[0]
+ }
+ return elementTarget.isSVG?$(elementTarget.target).get(0).getBBox().height:$(elementTarget.target).outerHeight()
+ }
+ getTargetTop(elementTarget) {
+ if(typeof elementTarget.target == 'object'){
+ let value = 2000
+ for(let elementItem of elementTarget.target){
+ value = $(elementItem).offset().top
+
+
+
diff --git a/bebras/2019/FR-2019-12-roller/index_en.html b/bebras/2019/FR-2019-12-roller/index_en.html
index fb56780..b6082ac 100644
--- a/bebras/2019/FR-2019-12-roller/index_en.html
+++ b/bebras/2019/FR-2019-12-roller/index_en.html
@@ -55,213 +55,96 @@
};
+
+
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 2d606d2..e21b216 100644
--- a/bebras/2019/FR-2019-13-align-strips/index_en.html
+++ b/bebras/2019/FR-2019-13-align-strips/index_en.html
@@ -56,208 +56,87 @@
};
+
+
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 8e36fdc..9237fcd 100644
--- a/bebras/2019/FR-2019-15-shape-compression/index_en.html
+++ b/bebras/2019/FR-2019-15-shape-compression/index_en.html
@@ -51,253 +51,100 @@
};
+
+
+