forked from Open-CT/openct-tasks
!15 Add step guidance for base-4-encoding task
Merge pull request !15 from stacker/master
This commit is contained in:
commit
71d66c508c
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue