forked from Open-CT/openct-tasks
!14 Repair steps guide bug and logic
Merge pull request !14 from stacker/master
This commit is contained in:
Gitee
commit
8b54a1a574
File diff suppressed because it is too large
Load Diff
|
|
@ -8,7 +8,7 @@
|
|||
* @FilePath: \bebras-tasks\_common\modules\integrationAPI.01\installationAPI.01\pemFioi\stepGuidance.js
|
||||
*/
|
||||
|
||||
class StepGuidance{
|
||||
class StepGuidance {
|
||||
/**
|
||||
* elementStepList 步骤元素列表
|
||||
* 元素参数：
|
||||
|
|
@ -35,43 +35,43 @@ class StepGuidance{
|
|||
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))
|
||||
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 = ()=>{
|
||||
init() {
|
||||
if (this.getReloadState()) {
|
||||
console.log('页面为点击重载，不再加载步骤引导')
|
||||
} else {
|
||||
window.onload = () => {
|
||||
this.guidanceBegin()
|
||||
this.updateGuidanceStep()
|
||||
$('#btn-box').on('click','#next-step-btn',()=>{
|
||||
$('#btn-box').on('click', '#next-step-btn', () => {
|
||||
this.stepIndex += 1
|
||||
this.updateGuidanceStep()
|
||||
})
|
||||
$('#btn-box').on('click','#last-step-btn',()=>{
|
||||
$('#btn-box').on('click', '#last-step-btn', () => {
|
||||
this.stepIndex -= 1
|
||||
this.updateGuidanceStep()
|
||||
})
|
||||
$('#btn-box').on('click','#complete-btn',()=>{
|
||||
$('#btn-box').on('click', '#complete-btn', () => {
|
||||
$('#guide-box').remove()
|
||||
this.setCookie()
|
||||
})
|
||||
$(window).resize(()=>{
|
||||
$(window).resize(() => {
|
||||
this.updateGuidanceStep()
|
||||
})
|
||||
$(document).scroll(()=>{
|
||||
$(document).scroll(() => {
|
||||
this.updateGuidanceStep()
|
||||
})
|
||||
}
|
||||
}
|
||||
this.delReloadState()
|
||||
}
|
||||
guidanceBegin(){
|
||||
guidanceBegin() {
|
||||
//载入引导主体
|
||||
if($("#guide-box").length==0){
|
||||
if ($("#guide-box").length == 0) {
|
||||
$('body').append(`<div id="guide-box">
|
||||
<div class="guide-area">
|
||||
<div class="guide-tip-box" id="guide-tip">
|
||||
|
|
@ -88,17 +88,17 @@ class StepGuidance{
|
|||
</div>`)
|
||||
}
|
||||
}
|
||||
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])
|
||||
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(`
|
||||
|
|
@ -107,83 +107,78 @@ class StepGuidance{
|
|||
${this.elementStepList.length-1==this.stepIndex?'<div id="complete-btn" class="step-btn" style="background-color:#FDF151;border:none;"><span>我知道了！</span></div>':''}
|
||||
`)
|
||||
}
|
||||
getCookie(cookieName=this.guidanceName){
|
||||
var name = cookieName + "=";
|
||||
getReloadState() {
|
||||
var name = "reload=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0; i<ca.length; i++) {
|
||||
for (var i = 0; i < ca.length; i++) {
|
||||
var c = ca[i].trim();
|
||||
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
|
||||
if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
|
||||
}
|
||||
return false;
|
||||
}
|
||||
setCookie(cookieName=this.guidanceName,value='true'){
|
||||
var expdate = new Date(); //初始化时间
|
||||
expdate.setTime(expdate.getTime() + 5 * 60 * 1000); //时间单位毫秒
|
||||
document.cookie = cookieName+"="+value+";expires="+expdate.toGMTString()+";path=/";
|
||||
delReloadState() {
|
||||
var expdate = new Date(); //初始化时间
|
||||
expdate.setTime(expdate.getTime() - 10000); //时间单位毫秒
|
||||
document.cookie = "reload=" + true + ";expires=" + expdate.toGMTString() + ";path=/";
|
||||
}
|
||||
getTargetWidth(elementTarget){
|
||||
if(typeof elementTarget.target == 'object'){
|
||||
let value = 0;
|
||||
let leftValue = [2000,0]
|
||||
for(let elementItem of elementTarget.target){
|
||||
let elementLeft = $(elementItem).offset().left
|
||||
if(elementLeft<leftValue[0]){
|
||||
leftValue[0] = elementLeft
|
||||
}
|
||||
getTargetWidth(elementTarget) {
|
||||
if (typeof elementTarget.target == 'object') {
|
||||
let value = 0;
|
||||
let leftValue = [2000, 0]
|
||||
for (let elementItem of elementTarget.target) {
|
||||
let elementLeft = $(elementItem).offset().left
|
||||
if (elementLeft < leftValue[0]) {
|
||||
leftValue[0] = elementLeft
|
||||
}
|
||||
|
||||
if(elementLeft>leftValue[1]){
|
||||
leftValue[1] = elementLeft
|
||||
value = 0
|
||||
//value += $(elementItem).width()
|
||||
value += elementTarget.isSVG?$(elementItem).get(0).getBBox().width:$(elementItem).outerWidth()
|
||||
value += $(elementItem).width()
|
||||
}
|
||||
}
|
||||
return value + leftValue[1] - leftValue[0]
|
||||
if (elementLeft > leftValue[1]) {
|
||||
leftValue[1] = elementLeft
|
||||
value = 0
|
||||
value += elementTarget.isSVG ? $(elementItem).get(0).getBBox().width : $(elementItem).outerWidth()
|
||||
}
|
||||
}
|
||||
return value + leftValue[1] - leftValue[0]
|
||||
}
|
||||
return elementTarget.isSVG?$(elementTarget.target).get(0).getBBox().width:$(elementTarget.target).outerWidth()
|
||||
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(elementTop<topValue[0]){
|
||||
topValue[0] = elementTop
|
||||
}
|
||||
if (typeof elementTarget.target == 'object') {
|
||||
let value = 0;
|
||||
let topValue = [2000, 0]
|
||||
for (let elementItem of elementTarget.target) {
|
||||
let elementTop = $(elementItem).offset().top
|
||||
if (elementTop < topValue[0]) {
|
||||
topValue[0] = elementTop
|
||||
}
|
||||
|
||||
if(elementTop>topValue[1]){
|
||||
topValue[1] = elementTop
|
||||
value = 0
|
||||
//value += $(elementItem).height()
|
||||
value += elementTarget.isSVG?$(elementItem).get(0).getBBox().height:$(elementItem).outerHeight()
|
||||
value += $(elementItem).height()
|
||||
}
|
||||
}
|
||||
return value + topValue[1] - topValue[0]
|
||||
if (elementTop > topValue[1]) {
|
||||
topValue[1] = elementTop
|
||||
value = 0
|
||||
value += elementTarget.isSVG ? $(elementItem).get(0).getBBox().height : $(elementItem).outerHeight()
|
||||
}
|
||||
}
|
||||
return value + topValue[1] - topValue[0]
|
||||
}
|
||||
return elementTarget.isSVG?$(elementTarget.target).get(0).getBBox().height:$(elementTarget.target).outerHeight()
|
||||
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<value?$(elementItem).offset().top:value
|
||||
}
|
||||
return value - parseFloat(elementTarget.padding.split(' ')[0].replace('px')) - $(document).scrollTop()
|
||||
if (typeof elementTarget.target == 'object') {
|
||||
let value = 2000
|
||||
for (let elementItem of elementTarget.target) {
|
||||
value = $(elementItem).offset().top < value ? $(elementItem).offset().top : value
|
||||
}
|
||||
return value - parseFloat(elementTarget.padding.split(' ')[0].replace('px')) - $(document).scrollTop()
|
||||
}
|
||||
return $(elementTarget.target).offset().top - parseFloat(elementTarget.padding.split(' ')[0].replace('px')) - $(document).scrollTop()
|
||||
}
|
||||
getTargetLeft(elementTarget) {
|
||||
if(typeof elementTarget.target == 'object'){
|
||||
let value = 2000
|
||||
for(let elementItem of elementTarget.target){
|
||||
value = $(elementItem).offset().left<value?$(elementItem).offset().left:value
|
||||
}
|
||||
return value - parseFloat(elementTarget.padding.split(' ')[1].replace('px'))
|
||||
if (typeof elementTarget.target == 'object') {
|
||||
let value = 2000
|
||||
for (let elementItem of elementTarget.target) {
|
||||
value = $(elementItem).offset().left < value ? $(elementItem).offset().left : value
|
||||
}
|
||||
return value - parseFloat(elementTarget.padding.split(' ')[1].replace('px'))
|
||||
}
|
||||
return $(elementTarget.target).offset().left - parseFloat(elementTarget.padding.split(' ')[1].replace('px'))
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,201 +2,204 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8"></meta>
|
||||
<title>2019-FR-02-registers</title>
|
||||
<script>
|
||||
window.stringsLanguage = 'en';
|
||||
</script>
|
||||
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1_M.js" id="import-modules"></script>
|
||||
<script class="remove" type="text/javascript">
|
||||
var modulesPath = '../../../_common/modules';
|
||||
importModules([
|
||||
'jquery-1.7.1', 'jquery-ui.touch-punch', 'raphael-2.2.1', 'JSON-js', //'grid-1.0',
|
||||
'beav-1.0', 'beaver-task-2.0', 'simulation-2.0', 'raphaelFactory-1.0',
|
||||
'delayFactory-1.0', 'simulationFactory-1.0', 'raphaelButton-1.0',
|
||||
'platform-pr', 'buttonsAndMessages', 'installationAPI.01', 'miniPlatform',
|
||||
'taskStyles-0.1', 'randomGenerator-1.0', 'drag_lib-2.0',
|
||||
'graph-1.0','visual-graph-1.0','graph-mouse-1.1', 'shape-paths'
|
||||
]);
|
||||
</script>
|
||||
<script class="remove" type="text/javascript">
|
||||
var json = {
|
||||
"id": "http://castor-informatique.fr/tasks/2019/FR-2019-02-registers/",
|
||||
"language": "en",
|
||||
"version": "en.01",
|
||||
"authors": "Arthur Charguéraud, Mathias Hiron, France-ioi",
|
||||
"translators": [],
|
||||
"license": "CC BY-SA 3.0",
|
||||
"taskPathPrefix": "",
|
||||
"modulesPathPrefix": "",
|
||||
"browserSupport": [],
|
||||
"fullFeedback": true,
|
||||
"acceptedAnswers": [],
|
||||
"usesRandomSeed": false
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var taskStrings = {
|
||||
success: "恭喜, 你成功了 !",
|
||||
tooManyMarkers: function(max) {
|
||||
return "你的储备库里没有小石子了。点击上方已经放置进圆圈的小石子就可以把它们取回储备库。";
|
||||
},
|
||||
sumGreaterThan: function(max) {
|
||||
return "你的储备库里没有小石子了。点击上方已经放置进圆圈的小石子就可以把它们取回储备库。";
|
||||
},
|
||||
noMarkerBelow: "如果你想在红色圆圈中放置小石子，是需要这个圆圈下面的所有圆圈里都已经放置了小石子才可以哦。",
|
||||
placed: "已经放置过小石子了",
|
||||
failure: "上面的圆圈里没有小石子。",
|
||||
reserve: "小石子储备库:",
|
||||
empty: "储备库小石子已经用完了，可以点击之前已经放圆圈里的小石子，取回小石子，再次使用。",
|
||||
validateNow: "你成功了，现在只需要验证一下。",
|
||||
undo: "撤销",
|
||||
pebbleClick: "点击储备库的小石子没有用哦。"
|
||||
<meta charset="utf-8"></meta>
|
||||
<title>2019-FR-02-registers</title>
|
||||
<script>
|
||||
window.stringsLanguage = 'en';
|
||||
</script>
|
||||
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1_M.js" id="import-modules"></script>
|
||||
<script class="remove" type="text/javascript">
|
||||
var modulesPath = '../../../_common/modules';
|
||||
importModules([
|
||||
'jquery-1.7.1', 'jquery-ui.touch-punch', 'raphael-2.2.1', 'JSON-js', //'grid-1.0',
|
||||
'beav-1.0', 'beaver-task-2.0', 'simulation-2.0', 'raphaelFactory-1.0',
|
||||
'delayFactory-1.0', 'simulationFactory-1.0', 'raphaelButton-1.0',
|
||||
'platform-pr', 'buttonsAndMessages', 'installationAPI.01', 'miniPlatform',
|
||||
'taskStyles-0.1', 'randomGenerator-1.0', 'drag_lib-2.0',
|
||||
'graph-1.0', 'visual-graph-1.0', 'graph-mouse-1.1', 'shape-paths'
|
||||
]);
|
||||
</script>
|
||||
<script class="remove" type="text/javascript">
|
||||
var json = {
|
||||
"id": "http://castor-informatique.fr/tasks/2019/FR-2019-02-registers/",
|
||||
"language": "en",
|
||||
"version": "en.01",
|
||||
"authors": "Arthur Charguéraud, Mathias Hiron, France-ioi",
|
||||
"translators": [],
|
||||
"license": "CC BY-SA 3.0",
|
||||
"taskPathPrefix": "",
|
||||
"modulesPathPrefix": "",
|
||||
"browserSupport": [],
|
||||
"fullFeedback": true,
|
||||
"acceptedAnswers": [],
|
||||
"usesRandomSeed": false
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var taskStrings = {
|
||||
success: "恭喜, 你成功了 !",
|
||||
tooManyMarkers: function(max) {
|
||||
return "你的储备库里没有小石子了。点击上方已经放置进圆圈的小石子就可以把它们取回储备库。";
|
||||
},
|
||||
sumGreaterThan: function(max) {
|
||||
return "你的储备库里没有小石子了。点击上方已经放置进圆圈的小石子就可以把它们取回储备库。";
|
||||
},
|
||||
noMarkerBelow: "如果你想在红色圆圈中放置小石子，是需要这个圆圈下面的所有圆圈里都已经放置了小石子才可以哦。",
|
||||
placed: "已经放置过小石子了",
|
||||
failure: "上面的圆圈里没有小石子。",
|
||||
reserve: "小石子储备库:",
|
||||
empty: "储备库小石子已经用完了，可以点击之前已经放圆圈里的小石子，取回小石子，再次使用。",
|
||||
validateNow: "你成功了，现在只需要验证一下。",
|
||||
undo: "撤销",
|
||||
pebbleClick: "点击储备库的小石子没有用哦。"
|
||||
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="task.js"></script>
|
||||
};
|
||||
</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:['#displayHelper_validate','#displayHelper_cancel'],
|
||||
tips:'您可以验证答案是否正确或重新开始',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
t_left:'30px'
|
||||
},
|
||||
padding:'10px 0px',
|
||||
level:['easy','medium','hard'],
|
||||
step:{
|
||||
easy:2,
|
||||
medium:2,
|
||||
hard:2
|
||||
},
|
||||
borderRadius:16,
|
||||
},{
|
||||
target:'#paper > svg > circle:nth-of-type(4)',
|
||||
tips:'点击空白小圆圈,可以把小石子放进去',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'0px',
|
||||
t_left:'30px'
|
||||
},
|
||||
padding:'10px 10px',
|
||||
level:['easy'],
|
||||
step:{
|
||||
easy:0,
|
||||
},
|
||||
borderRadius:16,
|
||||
isSVG:true
|
||||
},{
|
||||
target:'#paper > svg > circle:nth-of-type(19)',
|
||||
tips:'点击空白小圆圈,可以把小石子放进去',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'0px',
|
||||
t_left:'30px'
|
||||
},
|
||||
padding:'10px 10px',
|
||||
level:['hard'],
|
||||
step:{
|
||||
hard:0
|
||||
},
|
||||
borderRadius:16,
|
||||
isSVG:true
|
||||
},{
|
||||
target:'#paper > svg > circle:nth-of-type(8)',
|
||||
tips:'点击空白小圆圈,可以把小石子放进去',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'0px',
|
||||
t_left:'30px'
|
||||
},
|
||||
padding:'10px 10px',
|
||||
level:['medium'],
|
||||
step:{
|
||||
medium:0
|
||||
},
|
||||
borderRadius:16,
|
||||
isSVG:true
|
||||
},{
|
||||
target:'#undo',
|
||||
tips:'点击取消,或者点击放有石子的小圆圈可以把小石子取回储备库。',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'-320px',
|
||||
t_left:'360px'
|
||||
},
|
||||
padding:'10px 10px',
|
||||
level:['easy','medium','hard'],
|
||||
step:{
|
||||
easy:1,
|
||||
medium:1,
|
||||
hard:1
|
||||
},
|
||||
borderRadius:16,
|
||||
}]
|
||||
let stepGuidance = new StepGuidance(elementList,'registers')
|
||||
stepGuidance.init()
|
||||
</script>
|
||||
<style>
|
||||
#paper {
|
||||
margin: 1em auto;
|
||||
}
|
||||
#error {
|
||||
text-align: center;
|
||||
height: 2em;
|
||||
}
|
||||
.task-rules li {
|
||||
margin-top: 1em;
|
||||
}
|
||||
#undo {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
</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">
|
||||
<script type="text/javascript" src="../../../_common/modules/integrationAPI.01/installationAPI.01/pemFioi/stepGuidance.js"></script>
|
||||
<script type="text/javascript">
|
||||
let elementList = [{
|
||||
target: ['#displayHelper_cancel', '#displayHelper_validate'],
|
||||
tips: '您可以验证答案是否正确或重新开始',
|
||||
tip_position: {
|
||||
bottom: '-62px',
|
||||
left: '30px',
|
||||
t_left: '30px'
|
||||
},
|
||||
padding: '10px 0px',
|
||||
level: ['easy', 'medium', 'hard'],
|
||||
step: {
|
||||
easy: 2,
|
||||
medium: 2,
|
||||
hard: 2
|
||||
},
|
||||
borderRadius: 16,
|
||||
}, {
|
||||
target: '#paper > svg > circle:nth-of-type(4)',
|
||||
tips: '点击空白小圆圈,可以把小石子放进去',
|
||||
tip_position: {
|
||||
bottom: '-62px',
|
||||
left: '0px',
|
||||
t_left: '30px'
|
||||
},
|
||||
padding: '10px 10px',
|
||||
level: ['easy'],
|
||||
step: {
|
||||
easy: 0,
|
||||
},
|
||||
borderRadius: 16,
|
||||
isSVG: true
|
||||
}, {
|
||||
target: '#paper > svg > circle:nth-of-type(19)',
|
||||
tips: '点击空白小圆圈,可以把小石子放进去',
|
||||
tip_position: {
|
||||
bottom: '-62px',
|
||||
left: '0px',
|
||||
t_left: '30px'
|
||||
},
|
||||
padding: '10px 10px',
|
||||
level: ['hard'],
|
||||
step: {
|
||||
hard: 0
|
||||
},
|
||||
borderRadius: 16,
|
||||
isSVG: true
|
||||
}, {
|
||||
target: '#paper > svg > circle:nth-of-type(8)',
|
||||
tips: '点击空白小圆圈,可以把小石子放进去',
|
||||
tip_position: {
|
||||
bottom: '-62px',
|
||||
left: '0px',
|
||||
t_left: '30px'
|
||||
},
|
||||
padding: '10px 10px',
|
||||
level: ['medium'],
|
||||
step: {
|
||||
medium: 0
|
||||
},
|
||||
borderRadius: 16,
|
||||
isSVG: true
|
||||
}, {
|
||||
target: '#undo',
|
||||
tips: '点击取消,或者点击放有石子的小圆圈可以把小石子取回储备库。',
|
||||
tip_position: {
|
||||
bottom: '-62px',
|
||||
left: '-320px',
|
||||
t_left: '360px'
|
||||
},
|
||||
padding: '10px 10px',
|
||||
level: ['easy', 'medium', 'hard'],
|
||||
step: {
|
||||
easy: 1,
|
||||
medium: 1,
|
||||
hard: 1
|
||||
},
|
||||
borderRadius: 16,
|
||||
}]
|
||||
let stepGuidance = new StepGuidance(elementList, 'registers')
|
||||
stepGuidance.init()
|
||||
</script>
|
||||
<style>
|
||||
#paper {
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
#error {
|
||||
text-align: center;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.task-rules li {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#undo {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
</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>填充小石子</h1>-->
|
||||
<!-- <div id="tabsContainer"></div>-->
|
||||
<div id="taskContent">
|
||||
<div id="zone_1">
|
||||
<div class="consigne">
|
||||
<!-- <p>
|
||||
<div id="task">
|
||||
<!-- <h1>填充小石子</h1>-->
|
||||
<!-- <div id="tabsContainer"></div>-->
|
||||
<div id="taskContent">
|
||||
<div id="zone_1">
|
||||
<div class="consigne">
|
||||
<!-- <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> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="zone_2">
|
||||
<div id="paper"></div>
|
||||
<button type="button" class="btn btn-default" id="undo">取消</button>
|
||||
</div>
|
||||
<div id="error"></div>
|
||||
</div>
|
||||
<img src="icon.png" style="display:none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="zone_2">
|
||||
<div id="paper"></div>
|
||||
<button type="button" class="btn btn-default" id="undo">取消</button>
|
||||
</div>
|
||||
<div id="error"></div>
|
||||
</div>
|
||||
<img src="icon.png" style="display:none">
|
||||
</div>
|
||||
|
||||
<!-- task -->
|
||||
<!-- task -->
|
||||
|
||||
<div id="solution">
|
||||
<h2>答案解析</h2>
|
||||
<h2>这是提示信息！贪心算法</h2>
|
||||
</div>
|
||||
<!-- task-solution -->
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
console.log(document.querySelector("svg"))
|
||||
}, 50);
|
||||
</script>
|
||||
<div id="solution">
|
||||
<h2>答案解析</h2>
|
||||
<h2>这是提示信息！贪心算法</h2>
|
||||
</div>
|
||||
<!-- task-solution -->
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
console.log(document.querySelector("svg"))
|
||||
}, 50);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -2,182 +2,182 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8"></meta>
|
||||
<title>FR-2019-15-shape-compression</title>
|
||||
<script>
|
||||
window.stringsLanguage = 'en';
|
||||
</script>
|
||||
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1_M.js" id="import-modules"></script>
|
||||
<script class="remove" type="text/javascript">
|
||||
var modulesPath = '../../../_common/modules';
|
||||
importModules([
|
||||
'jquery-1.7.1', 'jquery-ui.touch-punch', 'raphael-2.2.1', 'JSON-js', 'grid-1.0',
|
||||
'beav-1.0', 'beaver-task-2.0', 'simulation-2.0', 'raphaelFactory-1.0',
|
||||
'delayFactory-1.0', 'simulationFactory-1.0', 'raphaelButton-1.0',
|
||||
'platform-pr', 'buttonsAndMessages', 'installationAPI.01', 'miniPlatform',
|
||||
'taskStyles-0.1', 'randomGenerator-1.0', 'drag_lib-2.0', 'graph-1.0', 'shape-paths'
|
||||
]);
|
||||
</script>
|
||||
<script class="module" type="text/javascript" src="../../../_common/modules/pemFioi/visual-graph-1.1.js"></script>
|
||||
<meta charset="utf-8"></meta>
|
||||
<title>FR-2019-15-shape-compression</title>
|
||||
<script>
|
||||
window.stringsLanguage = 'en';
|
||||
</script>
|
||||
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1_M.js" id="import-modules"></script>
|
||||
<script class="remove" type="text/javascript">
|
||||
var modulesPath = '../../../_common/modules';
|
||||
importModules([
|
||||
'jquery-1.7.1', 'jquery-ui.touch-punch', 'raphael-2.2.1', 'JSON-js', 'grid-1.0',
|
||||
'beav-1.0', 'beaver-task-2.0', 'simulation-2.0', 'raphaelFactory-1.0',
|
||||
'delayFactory-1.0', 'simulationFactory-1.0', 'raphaelButton-1.0',
|
||||
'platform-pr', 'buttonsAndMessages', 'installationAPI.01', 'miniPlatform',
|
||||
'taskStyles-0.1', 'randomGenerator-1.0', 'drag_lib-2.0', 'graph-1.0', 'shape-paths'
|
||||
]);
|
||||
</script>
|
||||
<script class="module" type="text/javascript" src="../../../_common/modules/pemFioi/visual-graph-1.1.js"></script>
|
||||
|
||||
<script class="remove" type="text/javascript">
|
||||
var json = {
|
||||
"id": "http://castor-informatique.fr/tasks/2019/FR-2019-15-shape-compression/",
|
||||
"language": "en",
|
||||
"version": "en.01",
|
||||
"authors": "Arthur Charguéraud, Mathias Hiron, France-ioi",
|
||||
"translators": [],
|
||||
"license": "CC BY-SA 3.0",
|
||||
"taskPathPrefix": "",
|
||||
"modulesPathPrefix": "",
|
||||
"browserSupport": [],
|
||||
"fullFeedback": true,
|
||||
"acceptedAnswers": [],
|
||||
"usesRandomSeed": false
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var taskStrings = {
|
||||
success: "祝贺你,你成功了!",
|
||||
partialSuccess: "你成功地实现了目标，但是使用的形状太多了。 再试一次，希望你的序列只有6个形状哦。",
|
||||
transformationRules: "转换规则:",
|
||||
yourSequence: "你的序列:",
|
||||
result: "结果:",
|
||||
target: "目标:",
|
||||
clickHere: "点击这里",
|
||||
missingShape: "结果序列中缺少形状。",
|
||||
wrongShape: "用红色高亮标注的形状和目标不一样哦。",
|
||||
wrongLength: "结果比目标长。"
|
||||
};
|
||||
</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:['#displayHelper_validate','#displayHelper_cancel'],
|
||||
tips:'点击“验证一下”验证你的答案是否正确，或重新开始~',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
t_left:'30px'
|
||||
},
|
||||
padding:'10px 0px',
|
||||
level:['easy','medium','hard'],
|
||||
step:{
|
||||
easy:1,
|
||||
medium:2,
|
||||
hard:2
|
||||
},
|
||||
borderRadius:16,
|
||||
},{
|
||||
target:'#paper > svg > rect:nth-of-type(17)',
|
||||
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(2)','#paper > svg > rect:nth-of-type(3)'],
|
||||
tips:'点击形状可以变为不同的形状',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
t_left:'30px'
|
||||
},
|
||||
padding:'10px 10px',
|
||||
level:['medium','hard'],
|
||||
step:{
|
||||
medium:0,
|
||||
hard:0
|
||||
},
|
||||
borderRadius:16,
|
||||
isSVG:true
|
||||
},{
|
||||
target:['#paper > svg > rect:nth-of-type(12)','#paper > svg > rect:nth-of-type(13)'],
|
||||
tips:'点击“+”或“-”，增加或减少形状',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
t_left:'30px'
|
||||
},
|
||||
padding:'10px 10px',
|
||||
level:['medium'],
|
||||
step:{
|
||||
medium:1,
|
||||
},
|
||||
borderRadius:16,
|
||||
isSVG:true
|
||||
},{
|
||||
target:['#paper > svg > rect:nth-of-type(14)','#paper > svg > rect:nth-of-type(15)'],
|
||||
tips:'点击“+”或“-”，增加或减少形状',
|
||||
tip_position:{
|
||||
bottom:'-62px',
|
||||
left:'30px',
|
||||
t_left:'30px'
|
||||
},
|
||||
padding:'10px 10px',
|
||||
level:['hard'],
|
||||
step:{
|
||||
hard:1,
|
||||
},
|
||||
borderRadius:16,
|
||||
isSVG:true
|
||||
}]
|
||||
let stepGuidance = new StepGuidance(elementList,'shape-compression')
|
||||
let stepGuidance = new StepGuidance(elementList,'align-strips')
|
||||
stepGuidance.init()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#paper {
|
||||
margin-top: 1em;
|
||||
}
|
||||
#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">
|
||||
<script class="remove" type="text/javascript">
|
||||
var json = {
|
||||
"id": "http://castor-informatique.fr/tasks/2019/FR-2019-15-shape-compression/",
|
||||
"language": "en",
|
||||
"version": "en.01",
|
||||
"authors": "Arthur Charguéraud, Mathias Hiron, France-ioi",
|
||||
"translators": [],
|
||||
"license": "CC BY-SA 3.0",
|
||||
"taskPathPrefix": "",
|
||||
"modulesPathPrefix": "",
|
||||
"browserSupport": [],
|
||||
"fullFeedback": true,
|
||||
"acceptedAnswers": [],
|
||||
"usesRandomSeed": false
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var taskStrings = {
|
||||
success: "祝贺你,你成功了!",
|
||||
partialSuccess: "你成功地实现了目标，但是使用的形状太多了。 再试一次，希望你的序列只有6个形状哦。",
|
||||
transformationRules: "转换规则:",
|
||||
yourSequence: "你的序列:",
|
||||
result: "结果:",
|
||||
target: "目标:",
|
||||
clickHere: "点击这里",
|
||||
missingShape: "结果序列中缺少形状。",
|
||||
wrongShape: "用红色高亮标注的形状和目标不一样哦。",
|
||||
wrongLength: "结果比目标长。"
|
||||
};
|
||||
</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: ['#displayHelper_validate', '#displayHelper_cancel'],
|
||||
tips: '点击“验证一下”验证你的答案是否正确，或重新开始~',
|
||||
tip_position: {
|
||||
bottom: '-62px',
|
||||
left: '30px',
|
||||
t_left: '30px'
|
||||
},
|
||||
padding: '10px 0px',
|
||||
level: ['easy', 'medium', 'hard'],
|
||||
step: {
|
||||
easy: 1,
|
||||
medium: 2,
|
||||
hard: 2
|
||||
},
|
||||
borderRadius: 16,
|
||||
}, {
|
||||
target: '#paper > svg > rect:nth-of-type(17)',
|
||||
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(2)', '#paper > svg > rect:nth-of-type(3)'],
|
||||
tips: '点击形状可以变为不同的形状',
|
||||
tip_position: {
|
||||
bottom: '-62px',
|
||||
left: '30px',
|
||||
t_left: '30px'
|
||||
},
|
||||
padding: '10px 10px',
|
||||
level: ['medium', 'hard'],
|
||||
step: {
|
||||
medium: 0,
|
||||
hard: 0
|
||||
},
|
||||
borderRadius: 16,
|
||||
isSVG: true
|
||||
}, {
|
||||
target: ['#paper > svg > rect:nth-of-type(12)', '#paper > svg > rect:nth-of-type(13)'],
|
||||
tips: '点击“+”或“-”，增加或减少形状',
|
||||
tip_position: {
|
||||
bottom: '-62px',
|
||||
left: '30px',
|
||||
t_left: '30px'
|
||||
},
|
||||
padding: '10px 10px',
|
||||
level: ['medium'],
|
||||
step: {
|
||||
medium: 1,
|
||||
},
|
||||
borderRadius: 16,
|
||||
isSVG: true
|
||||
}, {
|
||||
target: ['#paper > svg > rect:nth-of-type(14)', '#paper > svg > rect:nth-of-type(15)'],
|
||||
tips: '点击“+”或“-”，增加或减少形状',
|
||||
tip_position: {
|
||||
bottom: '-62px',
|
||||
left: '30px',
|
||||
t_left: '30px'
|
||||
},
|
||||
padding: '10px 10px',
|
||||
level: ['hard'],
|
||||
step: {
|
||||
hard: 1,
|
||||
},
|
||||
borderRadius: 16,
|
||||
isSVG: true
|
||||
}]
|
||||
let stepGuidance = new StepGuidance(elementList, 'shape-compression')
|
||||
stepGuidance.init()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#paper {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#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>对应的形状</h1>-->
|
||||
<!-- <div id="tabsContainer"></div>-->
|
||||
<div id="taskContent">
|
||||
<p id="difficultyWarning" class="hard"></p>
|
||||
<div id="zone_1">
|
||||
<div class="consigne">
|
||||
<!-- <p>小松鼠有一种机器，可以根据某些规则变换一系列形状。</p>
|
||||
<div id="task">
|
||||
<!-- <h1>对应的形状</h1>-->
|
||||
<!-- <div id="tabsContainer"></div>-->
|
||||
<div id="taskContent">
|
||||
<p id="difficultyWarning" class="hard"></p>
|
||||
<div id="zone_1">
|
||||
<div class="consigne">
|
||||
<!-- <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> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="zone_2">
|
||||
<div id="paper"></div>
|
||||
</div>
|
||||
<div id="error"></div>
|
||||
</div>
|
||||
<img src="icon.png" style="display:none">
|
||||
</div>
|
||||
<div id="zone_2">
|
||||
<div id="paper"></div>
|
||||
</div>
|
||||
<div id="error"></div>
|
||||
</div>
|
||||
<img src="icon.png" style="display:none">
|
||||
</div>
|
||||
|
||||
<!-- task -->
|
||||
<!-- task -->
|
||||
|
||||
<div id="solution">
|
||||
<h2>答案解析</h2>
|
||||
<h2>这是提示信息！</h2>
|
||||
</div>
|
||||
<!-- task-solution -->
|
||||
<div id="solution">
|
||||
<h2>答案解析</h2>
|
||||
<h2>这是提示信息！</h2>
|
||||
</div>
|
||||
<!-- task-solution -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Reference in New Issue