MarioWeb/templates/GameAnnotation2.html

360 lines
20 KiB
HTML
Raw Normal View History

2022-11-24 06:49:02 +00:00
<!DOCTYPE html>
<!-- saved from url=(0029)http://aingames.cn/index.html -->
<html lang="en"><script id="allow-copy_script">(function t(){var t=!1;document.addEventListener("allow_copy",(function(n){t=n.detail.unlock}));var n=["copy","cut","contextmenu","selectstart","mousedown","mouseup","mousemove","keydown","keypress","keyup"],e=function(n){t&&(n.stopPropagation(),n.stopImmediatePropagation&&n.stopImmediatePropagation())};n.forEach((function(t){document.documentElement.addEventListener(t,e,{capture:!0})}))})()</script><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<script src="../templates/data.js"></script>
2022-11-24 06:49:02 +00:00
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>AI and Games </title>
<!-- Bootstrap core CSS -->
<link href="../templates/Web/bootstrap.min.css" rel="stylesheet">
<link href="../templates/Web/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="http://aingames.cn/static/img/logo.png">
<script src="../templates/Web/dynamics.js"></script>
<script src="../templates/Web/font_3071663_oravow8bb8q.js"></script>
<!-- Custom styles for this template -->
<link href="../templates/Web/scrolling-nav.css" rel="stylesheet">
<link href="../templates/Web/css2" rel="stylesheet"><script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
2022-11-24 06:49:02 +00:00
<style>
#funding:hover+#prove {
display: block;
}
.popwindow {
width:500px;
height:550px;
border:3px solid #ff928e;
visibility: hidden;
position: absolute;
z-index: 999;
opacity: 1;
overflow: hidden;
background-color: white;
text-align: center;
margin-top: 10%;
margin-left: 35%;
border-radius: 10px;
}
.cirButton {
width:100%;
height:60px;
2023-02-27 12:42:58 +00:00
border-radius: 40px;
cursor: pointer;
border: none;
2022-11-24 06:49:02 +00:00
}
2023-02-27 12:42:58 +00:00
2022-11-24 06:49:02 +00:00
svg{
width: 50px;
height: 26px;
vertical-align:middle;
}
label{
display:block;
line-height:100px;
}
.wrapper{
background: #fff;
padding: 25px;
max-width: 460px;
width: 100%;
border-radius: 3px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
2022-11-24 06:49:02 +00:00
}
.wrapper .item{
color: #fff;
display: flex;
margin-bottom: 8px;
padding: 12px 17px;
background: #304B5F;
border-radius: 3px;
align-items: center;
justify-content: space-between;
2022-11-24 06:49:02 +00:00
}
.wrapper .item:last-child{
margin-bottom: 0px;
2022-11-24 06:49:02 +00:00
}
.wrapper .item .text{
font-size: 18px;
font-weight: 400;
2022-11-24 06:49:02 +00:00
}
.wrapper .item i{
font-size: 18px;
cursor: pointer;
2022-11-24 06:49:02 +00:00
}
2022-11-24 06:49:02 +00:00
@keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0;
}
}
</style>
</head>
<div id="replayWindow" class="popwindow">
<div id="replayWindowGame">
</div>
2023-02-16 04:15:38 +00:00
<p>Click "Q" to stop playing and quit</p>
<div align="center" id = "replayButton"><button onClick='closeReplayWindow()'>Close Window</button></div>
2022-11-24 06:49:02 +00:00
</div>
<body id="aingames"><svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;"><symbol id="icon-more" viewBox="0 0 1789 1024"><path d="M658.96035216 613.49779716h-602.64317146c-5.28634405 9.51541883-9.51541883 21.14537441-13.74449354 30.66079315h602.64317154c3.17180628-9.51541883 7.40088094-20.08810594 13.74449346-30.66079315zM54.20264274 801.69162966c7.40088094 10.57268718 14.80176191 21.14537441 24.31718079 30.66079315h602.64317241c-9.51541883-10.57268718-16.91629967-20.08810594-24.31718063-30.66079315h-602.64317257zM794.29074875 425.30396468h-602.64317156c-9.51541883 9.51541883-19.03083652 20.08810594-28.54625532 30.66079311h602.6431716c9.51541883-9.51541883 19.03083652-20.08810594 28.54625528-30.66079311zM1396.93392025 484.51101309c12.687225 0 24.31718064-10.57268718 24.31718064-24.31718062 0-13.74449341-11.62995564-24.31718064-24.31718054-24.31718059-13.74449341 0-24.31718064 10.57268718-24.31718069 24.31718059 0 13.74449341 11.62995564 24.31718064 24.31718069 24.31718062z"></path><path d="M1530.14978012 413.67400909c-75.0660797-78.23788499-154.36123309-134.27312817-226.25550669-161.76211502 1.05726842-9.51541883 2.11453781-20.08810594 3.17180635-29.60352381 1.05726842-6.34361248 1.05726842-11.62995564 1.05726833-17.97356804v-17.9735691c0-11.62995564-2.11453781-24.31718064-4.22907468-35.94713622-4.2290747-24.31718064-12.687225-47.57709278-27.48898689-68.72246724-7.40088094-9.51541883-15.85903121-19.03083652-25.37444992-27.48898692-9.51541883-8.45814938-21.14537441-14.80176191-33.83259849-19.0308365-6.34361248-2.11453781-13.74449341-3.17180628-20.08810595-3.17180623-6.34361248 0-14.80176191 1.05726842-21.14537437 3.17180623-6.34361248 2.11453781-13.74449341 7.40088094-19.03083745 13.74449346-4.2290747 6.34361248-7.40088094 13.74449341-8.45814941 21.14537438-10.57268718-5.28634405-22.20264283-9.51541883-33.83259936-12.68722503-13.74449341-3.17180628-28.54625531-5.28634405-43.34801722-5.28634308-7.40088094 1.05726842-14.80176191 1.05726842-22.20264379 3.17180613-7.40088094 1.05726842-14.80176191 4.2290747-22.20264281 9.51541792-7.40088094 5.28634405-12.687225 13.74449341-14.80176188 22.20264373-3.17180628 9.51541883-1.05726842 17.97356823 1.05726839 23.25991102s4.2290747 10.57268718 7.40088103 15.85903144c-12.687225 1.05726842-25.37444898 2.11453781-38.06167406 6.34361254-7.40088094 2.11453781-13.74449341 5.28634405-20.08810606 10.57268728-3.17180628 2.11453781-5.28634405 5.28634405-8.45814927 8.45814922-2.11453781 3.17180628-4.2290747 6.34361248-6.34361249 10.57268717l-3.17180624 12.68722505v12.68722508c1.05726842 8.45814938 4.2290747 15.85903121 7.40088091 22.20264277 7.40088094 13.74449341 17.97356823 23.25991219 29.60352469 30.66079308 10.57268718 8.45814938 23.25991219 13.74449341 34.88986783 19.03083649 19.03083652 8.45814938 37.00440555 13.74449341 56.03524212 17.97356916-57.09251066 30.66079311-117.35682855 78.23788499-174.449339 137.44493345-101.49779716 106.78414126-167.04845814 223.0837003-167.04845807 297.09251066 0 77.18061655 50.74889906 148.01762156 144.84581525 200.8810574 90.92510994 50.74889906 211.45374467 79.29515441 339.38325938 79.29515443 127.92951565 0 248.45814935-28.54625531 339.38326036-79.29515443 94.09691615-52.86343596 144.84581531-123.70044093 142.73127748-201.93832586 0-75.0660797-65.55066102-191.36563877-167.04845802-297.09251065z m9.51541771 472.599119c-86.69603532 48.63436122-201.93832595 75.0660797-324.58149737 75.06607879-24.31718064 0-48.63436122-1.05726842-71.89427359-3.17180626-56.03524215-67.66519781-135.33039654-178.67841373-123.70044004-379.55947129 8.45814938-150.13215844 77.18061655-238.94273157 136.38766507-286.51982339h7.40088093c-24.31718064-6.34361248-48.63436122-12.687225-72.95154184-20.08810594-24.31718064-7.40088094-47.57709278-16.91629967-69.77973568-27.48898689-10.57268718-6.34361248-21.14537441-11.62995564-30.66079312-19.03083666-9.51541883-6.34361248-16.91629967-14.80176191-22.20264272-24.31718052-2.11453781-4.2290747-3.17180628-8.45814938-4.22907478-13.74449347 0-4.2290747 0-9.51541883 2.11453688-12.68722499 3.17180628-7.40088
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger " href="http://aingames.cn/index.html"> <img src="../templates/Web/grouplogo.png" height="35px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="http://aingames.cn/people/index.html">PEOPLE</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="http://aingames.cn/publication/index.html"> PUBLICATION</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="http://aingames.cn/activity/index.html">ACTIVITY</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="http://aingames.cn/demo/index.html">DEMO</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="http://aingames.cn/resources/index.html"> RESOURCE</a>
</li>
</ul>
</div>
</div>
</nav>
<script>
function Replay(id){
if(id==1){
console.log("{{level1}}")
2022-11-24 06:49:02 +00:00
var replayWindow=document.getElementById("replayWindow");
2023-02-16 04:15:38 +00:00
var replayButton=document.getElementById("replayButton");
2022-11-24 06:49:02 +00:00
replayWindow.style.visibility = 'visible';
2023-02-16 04:15:38 +00:00
var result = cjCall("Play", "replayGameMain", "{{level1}}",5,30,16);
result.then(function(){replayButton.style.visibility = 'visible'});
}else if(id==2){
var replayWindow=document.getElementById("replayWindow");
2023-02-16 04:15:38 +00:00
var replayButton=document.getElementById("replayButton");
replayWindow.style.visibility = 'visible';
2023-02-16 04:15:38 +00:00
var result = cjCall("Play", "replayGameMain", "{{level2}}",5,30,16);
result.then(function(){replayButton.style.visibility = 'visible'});
}else if(id==3){
var replayWindow=document.getElementById("replayWindow");
2023-02-16 04:15:38 +00:00
var replayButton=document.getElementById("replayButton");
replayWindow.style.visibility = 'visible';
2023-02-16 04:15:38 +00:00
var result = cjCall("Play", "replayGameMain", "{{level3}}",5,30,16);
result.then(function(){replayButton.style.visibility = 'visible'});
2022-11-24 06:49:02 +00:00
}else{
console.log("No such ID")
2022-11-24 06:49:02 +00:00
}
}
</script>
<script>
function closeReplayWindow(){
var replayWindow=document.getElementById("replayWindow");
2023-02-16 04:15:38 +00:00
var replayButton=document.getElementById("replayButton");
cjCall("Play", "stopReplay");
replayWindow.style.visibility = 'hidden';
replayButton.style.visibility = 'hidden';
2022-11-24 06:49:02 +00:00
}
window.onload=function(){
closeReplayWindow();
}
cheerpjInit();
var divElement = document.getElementById("replayWindowGame");
cheerpjCreateDisplay(500,500,divElement);
cheerpjRunMain("Play", "/app/Mario-AI-Interface.jar", "0", "f_l");
GameLoad()
2022-11-24 06:49:02 +00:00
closeReplayWindow();
</script>
<section id="Reviews">
<div class="container">
<div class="page-header">
<h1>
<i class="icon-cloud"></i> Reviews
</h1>
</div>
<br>
<div class="row clearfix">
<div class="col-md-4">
2022-12-09 13:41:03 +00:00
<h4>Level A</h4>
2022-11-24 06:49:02 +00:00
<p style="color:darkgrey">Drag Picture To Move</p>
<div style="overflow-x: scroll; height: 350px;" >
<img src="../levels/{{level1}}.png" height="100%">
2022-11-24 06:49:02 +00:00
</div>
<br><br>
2022-12-09 13:49:26 +00:00
<button onclick="Replay(1)" class="cirButton"><b> Watch Level A Replay</b> </button>
</div>
<div class="col-md-4">
2022-12-09 13:41:03 +00:00
<h4>Level B</h4>
<p style="color:darkgrey">Drag Picture To Move</p>
<div style="overflow-x: scroll; height: 350px;" >
<img src="../levels/{{level2}}.png" height="100%">
</div>
<br><br>
2022-12-09 13:49:26 +00:00
<button onclick="Replay(2)" class="cirButton"><b> Watch Level B Replay</b> </button>
2022-11-24 06:49:02 +00:00
</div>
<div class="col-md-4">
2022-12-09 13:41:03 +00:00
<h4>Level C</h4>
<p style="color:darkgrey">Drag Picture To Move</p>
<div style="overflow-x: scroll; height: 350px;" >
<img src="../levels/{{level3}}.png" height="100%">
</div>
<br><br>
2022-12-09 13:49:26 +00:00
<button onclick="Replay(3)" class="cirButton"><b> Watch Level C Replay</b> </button>
</div>
2022-11-24 06:49:02 +00:00
</div>
</div>
<br><br>
<div class="container">
<h1>
2023-02-07 19:38:06 +00:00
<i class="icon-heart-empty"></i> Please rank the above levels in terms of "fun" (from highest to lowest)
2022-11-24 06:49:02 +00:00
</h1>
2023-02-07 19:38:06 +00:00
<p>[Please drag and drop the boxes below to your favourite ranking]</p>
2022-11-24 06:49:02 +00:00
<br>
<div class="wrapper">
<div class="item">
2022-12-09 13:41:03 +00:00
<span class="text">Level A</span>
<i class="fas fa-bars" ></i>
</div>
<div class="item">
2022-12-09 13:41:03 +00:00
<span class="text">Level B</span>
<i class="fas fa-bars"></i>
</div>
<div class="item">
2022-12-09 13:41:03 +00:00
<span class="text">Level C</span>
<i class="fas fa-bars"></i>
</div>
</div>
2022-11-24 06:49:02 +00:00
<script>
const dragArea = document.querySelector(".wrapper");
s = new Sortable(dragArea, {
animation: 350,
dataIdAttr: "a"
});
function post(URL, PARAM) {
var temp = document.createElement("form");
temp.action = URL;
temp.method = "post";
temp.style.display = "none";
var opt = document.createElement("textarea");
opt.name = PARAM;
opt.value = PARAM;
// alert(opt.name)
temp.appendChild(opt);
document.body.appendChild(temp);
temp.submit();
return temp;
}
//['443', '3v3', '3vq'] [c,k,r]
function postOrder(){
slist = s.toArray();
2022-12-14 12:07:02 +00:00
console.log(slist)
result = []
for (i = 0; i < 3; i++) {
2022-12-14 12:07:02 +00:00
if(slist[i] === '3fx'){
result[i] = "c"
2022-12-14 12:07:02 +00:00
}else if(slist[i] === '3fy'){
result[i] = "k"
2022-12-14 12:07:02 +00:00
}else if(slist[i] === '3fz'){
result[i] = "r"
}else{
console.log("you have change the name, dont you?")
}
}
post(window.location.href+"/result",result)
}
</script>
<br>
<button onclick="postOrder()">Submit</button>
</div>
2022-11-24 06:49:02 +00:00
</section>
<!-- Footer mx-auto -->
<footer class="py-5 bg-dark">
<div class="container">
<div class="row clearfix">
2022-11-24 06:49:02 +00:00
<div class="col-md-10 column">
<br><br>
<p class="m-0 text-center text-white">Copyright © Jialin Liu</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="../templates/Web/jquery.min.js"></script>
<script src="../templates/Web/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="../templates/Web/jquery.easing.min.js"></script>
<!-- Custom JavaScript for this theme -->
<script src="../templates/Web/scrolling-nav.js"></script>
</body></html>