!15 Add step guidance for base-4-encoding task

Merge pull request !15 from stacker/master
This commit is contained in:
没吃过紫薯的猫 2021-07-09 15:35:56 +00:00 committed by Gitee
commit 71d66c508c
1 changed files with 210 additions and 79 deletions

View File

@ -46,23 +46,154 @@
};
</script>
<script type="text/javascript" src="task.js"></script>
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
<script type="text/javascript">
let elementList = [{
target: '#paper > svg > rect:nth-of-type(67)',
tips: '点击改变蓝色标识的位置',
tip_position: {
bottom: '-62px',
left: '30px',
t_left: '30px'
},
padding: '10px 10px',
level: ['easy'],
step: {
easy: 0
},
borderRadius: 16,
isSVG: true
}, {
target: '#paper > svg > rect:nth-of-type(68)',
tips: '点击改变蓝色标识的位置',
tip_position: {
bottom: '-62px',
left: '30px',
t_left: '30px'
},
padding: '10px 10px',
level: ['medium'],
step: {
medium: 0,
hard: 0
},
borderRadius: 16,
isSVG: true
}, {
target: '#paper > svg > rect:nth-of-type(69)',
tips: '点击改变蓝色标识的位置',
tip_position: {
bottom: '-62px',
left: '30px',
t_left: '30px'
},
padding: '10px 10px',
level: ['hard'],
step: {
hard: 0
},
borderRadius: 16,
isSVG: true
}, {
target: '#paper > svg > rect:nth-of-type(64)',
tips: '这里对字母的定位会随着上方蓝色标识的变化而变化。',
tip_position: {
bottom: '-62px',
left: '-60px',
t_left: '70px'
},
padding: '10px 10px',
level: ['easy', 'medium', 'hard'],
step: {
easy: 1,
medium: 1,
hard: 1
},
borderRadius: 16,
isSVG: true
}, {
target: ['#paper > svg > rect:nth-of-type(65)', '#paper > svg > rect:nth-of-type(74)'],
tips: '这里的结果是你所定位到的字母,需要使它和结果保持一致哦!',
tip_position: {
bottom: '-62px',
left: '-160px',
t_left: '200px'
},
padding: '20px 10px',
level: ['easy'],
step: {
easy: 2
},
borderRadius: 16,
isSVG: true
}, {
target: ['#paper > svg > rect:nth-of-type(66)', '#paper > svg > rect:nth-of-type(87)'],
tips: '这里的结果是你所定位到的字母,需要使它和结果保持一致哦!',
tip_position: {
bottom: '-62px',
left: '-160px',
t_left: '200px'
},
padding: '20px 10px',
level: ['medium'],
step: {
medium: 2
},
borderRadius: 16,
isSVG: true
}, {
target: ['#paper > svg > rect:nth-of-type(67)', '#paper > svg > rect:nth-of-type(124)'],
tips: '这里的结果是你所定位到的字母,需要使它和结果保持一致哦!',
tip_position: {
bottom: '-62px',
left: '-160px',
t_left: '200px'
},
padding: '20px 10px',
level: ['hard'],
step: {
hard: 2
},
borderRadius: 16,
isSVG: true
}, {
target: ['#displayHelper_cancel', '#displayHelper_validate'],
tips: '你可以点击“验证一下”验证你的答案是否正确,也可以重新开始作答',
tip_position: {
bottom: '-62px',
left: '30px',
t_left: '30px'
},
padding: '10px 0px',
level: ['easy', 'medium', 'hard'],
step: {
easy: 3,
medium: 3,
hard: 3
},
borderRadius: 16,
}]
let stepGuidance = new StepGuidance(elementList, 'base-4-encoing')
stepGuidance.init()
</script>
<style>
#paper {
margin-top: 1em;
touch-action: none;
}
#error {
text-align: center;
}
</style>
<link rel="stylesheet" type="text/css" href="../public-style.css">
<link rel="stylesheet" type="text/css" href="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.css">
</head>
<body>
<div id="task">
<!-- <h1>4进制编码</h1>-->
<!-- <div id="tabsContainer"></div>-->
<!-- <h1>4进制编码</h1>-->
<!-- <div id="tabsContainer"></div>-->
<div id="taskContent">
<div id="zone_1">
<div class="consigne">