MarioWeb/templates/Main.html
2023-04-03 14:03:25 +08:00

1194 lines
61 KiB
HTML

<!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>
<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">
<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;
border-radius: 40px;
cursor: pointer;
border: none;
font-weight: 600;
}
.cirButton:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.groupname {
justify-content: center;
display: flex;
position: relative;
text-align: center;
font-size: 45px;
font-weight: bold;
}
.slogan {
justify-content: center;
display: flex;
position: relative;
text-align: center;
font-size: 40px;
font-style: italic;
/* font-weight:Light 300 italic; */
font-family: 'Consolas', monospace;
color: #c4cbcf;
}
.hiddenpart {
opacity: 0;
max-width: 0;
color: #c4cbcf;
transition: 1.3s ease-out;
}
.slogan:hover .hiddenpart {
opacity: 1;
max-width: 10em;
}
.news_prefix {
display: inline-block;
width: 30px;
height: 30px;
background-image: url("static/img/news_prefix.png");
background-size: 150px, 30px;
}
svg {
width: 50px;
height: 26px;
vertical-align: middle;
}
label {
display: block;
line-height: 100px;
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 13.33333px;
right: 0;
bottom: 0;
left: 0;
height: 40px;
width: 40px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: #0d007e;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
@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;
}
}
@media screen and (max-width: 768px) {
body {
min-width: fit-content;
}
}
@media screen and (max-width:992px) and (min-width:769px) {
#info {
min-width: fit-content;
}
}
/* from question */
.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;
border-radius: 40px;
cursor: pointer;
border: none;
font-weight: 600;
}
.cirButton:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.groupname {
justify-content: center;
display: flex;
position: relative;
text-align: center;
font-size: 45px;
font-weight: bold;
}
.slogan {
justify-content: center;
display: flex;
position: relative;
text-align: center;
font-size: 40px;
font-style: italic;
/* font-weight:Light 300 italic; */
font-family: 'Consolas', monospace;
color: #c4cbcf;
}
.hiddenpart {
opacity: 0;
max-width: 0;
color: #c4cbcf;
transition: 1.3s ease-out;
}
.slogan:hover .hiddenpart {
opacity: 1;
max-width: 10em;
}
.news_prefix {
display: inline-block;
width: 30px;
height: 30px;
background-image: url("static/img/news_prefix.png");
background-size: 150px, 30px;
}
svg {
width: 50px;
height: 26px;
vertical-align: middle;
}
label {
display: block;
line-height: 30px;
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 10px;
right: 0;
bottom: 0;
left: 0;
height: 30px;
width: 30px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: #0d007e;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
@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;
}
}
/*from tu*/
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
<script src="../templates/data.js"></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/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">
<style>
#funding:hover+#prove {
display: block;
}
.groupname {
justify-content: center;
display: flex;
position: relative;
text-align: center;
font-size: 45px;
font-weight: bold;
}
.slogan {
justify-content: center;
display: flex;
position: relative;
text-align: center;
font-size: 40px;
font-style: italic;
/* font-weight:Light 300 italic; */
font-family: 'Consolas', monospace;
color: #c4cbcf;
}
.hiddenpart {
opacity: 0;
max-width: 0;
color: #c4cbcf;
transition: 1.3s ease-out;
}
.slogan:hover .hiddenpart {
opacity: 1;
max-width: 10em;
}
.news_prefix {
display: inline-block;
width: 30px;
height: 30px;
background-image: url("static/img/news_prefix.png");
background-size: 150px, 30px;
}
svg {
width: 50px;
height: 26px;
vertical-align: middle;
}
.loading-container {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 80px;
margin: 0 auto;
text-align: center;
transform: translate(-50%, -50%);
}
.cirButton {
width: 100%;
height: 60px;
border-radius: 40px;
cursor: pointer;
border: none;
font-weight: 600;
}
.cirButton:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.loader {
position: absolute;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
z-index: 999;
}
.loading-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-size: 16px;
color: #333;
}
.alert {
font-size: x-large;
font-weight: 500;
color: #1967ab;
}
#mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
z-index: 99;
}
.col-md-6 {
z-index: 100;
}
.col-md-12 {
z-index: 100;
}
.GameWindow {
z-index: 100;
}
/*ga*/
</style>
</head>
<script>
function changePage(fromHtml,toHtml){
document.getElementById(fromHtml).style.display = "none";
document.getElementById(toHtml).style.display = "block";
}
</script>
<body id="wel" style="display: block">
<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.40088094 11.62995564-13.74449341 22.2026438-16.9162997s22.20264283-5.28634405 33.83259938-5.2863431 23.25991219 2.11453781 34.88986792 4.22907478c11.62995564 2.11453781 23.25991219 6.34361248 34.88986786 10.57268706 5.28634405 2.11453781 11.62995564 4.2290747 16.91629854 7.40088096 5.28634405 3.17180628 10.57268718 5.28634405 15.85903128 8.4581494 42.29074879 23.25991219 78.23788499 59.20704847 106.78414122 101.49779813-20.08810594-46.51982352-52.86343596-88.81057311-97.26872234-117.35682849-11.62995564-7.40088094-23.25991219-13.74449341-34.88986796-19.03083746-11.62995564-5.28634405-24.31718064-9.51541883-37.00440565-12.68722408-5.28634405-1.05726842-9.51541883-2.11453781-14.80176187-3.17180622-6.34361248-6.34361248-12.687225-15.85903121-14.80176196-24.31718068-2.11453781-5.28634405-2.11453781-10.57268718-1.05726929-14.80176185 0-3.17180628 3.17180628-6.34361248 6.3436126-9.51541889 7.40088094-6.34361248 20.08810594-8.45814938 31.71806147-8.45815016 24.31718064 0 48.63436122 6.34361248 71.8942734 17.97356905 11.62995564 5.28634405 23.25991219 11.62995564 32.77533003 20.08810503 9.51541883 8.45814938 19.03083652 16.91629967 27.48898688 26.43171844 8.45814938 9.51541883 15.85903121 20.08810594 22.20264377 31.71806156 6.34361248 11.62995564 11.62995564 24.31718064 15.85903031 35.94713623s8.45814938 25.37444898 10.57268716 38.06167413l2.1145379 9.51541872c0 3.17180628 1.05726842 6.34361248 1.05726837 9.51541874 1.05726842 6.34361248 1.05726842 13.74449341 2.11453783 20.08810593 2.11453781-13.74449341 2.11453781-27.48898691 2.11453684-41.23348032 0-13.74449341-2.11453781-27.48898691-5.28634304-41.2334803-3.17180628-12.687225-8.45814938-26.43171846-13.74449356-39.11894251s-12.687225-24.31718064-21.14537433-35.94713709c-13.74449341-16.91629967-29.60352474-32.77532999-47.57709282-44.40528576v-8.45815028c1.05726842-5.28634405 2.11453781-8.45814938 4.22907469-11.62995562 3.17180628-2.11453781 5.28634405-4.2290747 9.51541883-6.34361259 4.2290747-2.11453781 8.45814938-3.17180628 13.74449335-3.17180618s9.51541883 1.05726842 14.80176188 2.11453775c10.57268718 2.11453781 20.08810594 7.40088094 28.54625535 13.74449355 8.45814938 6.34361248 16.91629967 14.80176191 23.2599121 23.25991117 13.74449341 17.97356823 23.25991219 39.1189425 29.60352473 61.32158623 2.11453781 10.57268718 4.2290747 22.20264283 6.34361156 33.83259941 1.05726842 6.34361248 1.05726842 11.62995564 2.11453779 17.97356816 1.05726842 6.34361248 1.05726842 11.62995564 1.05726848 17.97356808 0 23.25991219-1.05726842 47.57709278-4.22907472 70.83700398 0-3.17180628 1.05726842-6.34361248 2.11453786-9.51541768 65.55066102 26.43171846 139.5594714 79.29515441 209.33920685 152.2466953 95.15418469 99.38326029 158.59030879 209.33920688 159.64757705 275.94713719 0 64.4933925-46.51982352 125.8149778-130.04405328 173.3920706z">
</path>
<path
d="M1540.72246719 667.41850251c0-1.05726842 0-1.05726842 0 0l-1.0572694-3.17180622s-1.05726842-1.05726842-1.05726841-2.11453785-1.05726842-1.05726842-1.05726846-2.11453688c-1.05726842 0-2.11453781-2.11453781-2.1145379-2.11453768-2.11453781-2.11453781-4.2290747-3.17180628-5.28634304-4.22907483-3.17180628-2.11453781-6.34361248-3.17180628-8.45815036-5.28634404-5.28634405-3.17180628-10.57268718-5.28634405-15.85903022-8.45814945-10.57268718-5.28634405-20.08810594-10.57268718-30.66079313-14.80176182-19.03083652-8.45814938-39.1189425-16.91629967-61.32158618-25.37444999-45.46255498-17.97356823-86.69603532-31.71806156-124.75770944-42.29074858-4.2290747 0-7.40088094 2.11453781-9.51541782 5.28634389-2.11453781 3.17180628 0 7.40088094 3.17180619 9.51541775 39.1189425 21.14537441 80.35242281 40.17621199 117.35682747 58.14978002l58.14978005 27.48898705 5.28634408 2.11453768c8.45814938 4.2290747 15.85903121 8.45814938 24.31718058 12.68722405 0 0 1.05726842 1.05726842 2.11453692 1.05726936-1.05726842 1.05726842-2.11453781 2.11453781-3.17180627 2.11453701-9.51541883 5.28634405-19.03083652 9.51541883-28.54625531 13.74449335l-50.74889904 22.20264283-24.31718061 10.57268709c-34.8898678 14.80176191-69.77973563 29.60352474-104.66960353 45.46255598-4.2290747 1.05726842-5.28634405 6.34361248-4.22907461 9.51541786 1.05726842 3.17180628 4.2290747 5.28634405 7.40088085 5.28634408h2.11453792c39.1189425-8.45814938 80.35242281-21.14537441 126.87224623-35.94713722 22.20264283-7.40088094 43.34801721-14.80176191 62.3788547-23.25991119 10.57268718-4.2290747 21.14537441-8.45814938 30.66079309-13.74449351 4.2290747-2.11453781 10.57268718-5.28634405 15.85903133-8.45815026 3.17180628-2.11453781 5.28634405-4.2290747 8.45814915-6.34361153 1.05726842-2.11453781 3.17180628-3.17180628 5.28634425-5.28634413 1.05726842 0 2.11453781-1.05726842 3.17180621-3.17180627 1.05726842-1.05726842 3.17180628-4.2290747 4.22907471-8.45814939v-4.2290747s0-1.05726842 1.05726827 0c0-2.11453781 0-3.17180628-1.05726827-6.34361246z">
</path>
</symbol>
<symbol id="icon-github" viewBox="0 0 1024 1024">
<path
d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667"
fill="#231F20"></path>
</symbol>
<symbol id="icon-youjian" viewBox="0 0 1024 1024">
<path
d="M780.8 341.333333H243.2l268.8 149.333334v85.333333L213.333333 409.6V682.666667h597.333334V409.6l-298.666667 166.4v-85.333333L780.8 341.333333zM896 256v512H128V256h768z"
fill="#444444"></path>
</symbol>
</svg>
<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>
<section id="Reviews">
<div class="container">
<div class="page-header">
<h1>
<i class="icon-rocket"></i> Welcome to the study of fun!
</h1>
</div>
<br>
<div class="row clearfix">
<div class="col-md-5" style="
width: fit-content;
min-width: fit-content;" height="100%">
<br>
<img src="../img/frameworkAD.gif" max-height="auto">
</div>
<div class="col-md-5" id="info">
<h4>Purpose of the Experiment</h4>
<ul>
<li>
This Experiment is designed to study <b>the notion of "<em>fun</em>"</b> elicited while playing Super
Mario
Bros levels.
</ul>
<br>
<h4>Procedure of the Experiment</h4>
<ul>
<li> This experiment has <b>three phases</b>.
<ol style="list-style-type: lower-roman;">
<li>First you must answer <b>a questionnaire</b>. </li>
<li>Then you will complete a <b>short game tutorial</b>, play<b> 2 levels</b> of the game and answer a
simple question. You will play<b> another 2 levels</b>. </li>
<li>Finally you will play <b>3 levels</b> and answer a simple question.</li>
<li>You can also replay the second phase after finishing the whole process.</li>
</ol>
<li>In total, the experiment takes approximately <b>15 minutes</b> to complete.</li>
<li> Have Fun!
</ul>
<br><br>
<button onclick="window.location.href = '/question';" class="cirButton"><b> Start!</b> </button>
</div>
</div>
</div>
</section>
<script>
console.log(testinput)
</script>
<!-- Footer mx-auto -->
<footer class="py-5 bg-dark">
<div class="container">
<div class="row clearfix">
<!-- <div class="col-md-2 column">
<img class="img-fluid" alt="" src="../templates/Web/Wechat.png" style="width: 100px;">
</div> -->
<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>
<body id="que" style="display: none">
<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.40088094 11.62995564-13.74449341 22.2026438-16.9162997s22.20264283-5.28634405 33.83259938-5.2863431 23.25991219 2.11453781 34.88986792 4.22907478c11.62995564 2.11453781 23.25991219 6.34361248 34.88986786 10.57268706 5.28634405 2.11453781 11.62995564 4.2290747 16.91629854 7.40088096 5.28634405 3.17180628 10.57268718 5.28634405 15.85903128 8.4581494 42.29074879 23.25991219 78.23788499 59.20704847 106.78414122 101.49779813-20.08810594-46.51982352-52.86343596-88.81057311-97.26872234-117.35682849-11.62995564-7.40088094-23.25991219-13.74449341-34.88986796-19.03083746-11.62995564-5.28634405-24.31718064-9.51541883-37.00440565-12.68722408-5.28634405-1.05726842-9.51541883-2.11453781-14.80176187-3.17180622-6.34361248-6.34361248-12.687225-15.85903121-14.80176196-24.31718068-2.11453781-5.28634405-2.11453781-10.57268718-1.05726929-14.80176185 0-3.17180628 3.17180628-6.34361248 6.3436126-9.51541889 7.40088094-6.34361248 20.08810594-8.45814938 31.71806147-8.45815016 24.31718064 0 48.63436122 6.34361248 71.8942734 17.97356905 11.62995564 5.28634405 23.25991219 11.62995564 32.77533003 20.08810503 9.51541883 8.45814938 19.03083652 16.91629967 27.48898688 26.43171844 8.45814938 9.51541883 15.85903121 20.08810594 22.20264377 31.71806156 6.34361248 11.62995564 11.62995564 24.31718064 15.85903031 35.94713623s8.45814938 25.37444898 10.57268716 38.06167413l2.1145379 9.51541872c0 3.17180628 1.05726842 6.34361248 1.05726837 9.51541874 1.05726842 6.34361248 1.05726842 13.74449341 2.11453783 20.08810593 2.11453781-13.74449341 2.11453781-27.48898691 2.11453684-41.23348032 0-13.74449341-2.11453781-27.48898691-5.28634304-41.2334803-3.17180628-12.687225-8.45814938-26.43171846-13.74449356-39.11894251s-12.687225-24.31718064-21.14537433-35.94713709c-13.74449341-16.91629967-29.60352474-32.77532999-47.57709282-44.40528576v-8.45815028c1.05726842-5.28634405 2.11453781-8.45814938 4.22907469-11.62995562 3.17180628-2.11453781 5.28634405-4.2290747 9.51541883-6.34361259 4.2290747-2.11453781 8.45814938-3.17180628 13.74449335-3.17180618s9.51541883 1.05726842 14.80176188 2.11453775c10.57268718 2.11453781 20.08810594 7.40088094 28.54625535 13.74449355 8.45814938 6.34361248 16.91629967 14.80176191 23.2599121 23.25991117 13.74449341 17.97356823 23.25991219 39.1189425 29.60352473 61.32158623 2.11453781 10.57268718 4.2290747 22.20264283 6.34361156 33.83259941 1.05726842 6.34361248 1.05726842 11.62995564 2.11453779 17.97356816 1.05726842 6.34361248 1.05726842 11.62995564 1.05726848 17.97356808 0 23.25991219-1.05726842 47.57709278-4.22907472 70.83700398 0-3.17180628 1.05726842-6.34361248 2.11453786-9.51541768 65.55066102 26.43171846 139.5594714 79.29515441 209.33920685 152.2466953 95.15418469 99.38326029 158.59030879 209.33920688 159.64757705 275.94713719 0 64.4933925-46.51982352 125.8149778-130.04405328 173.3920706z">
</path>
<path
d="M1540.72246719 667.41850251c0-1.05726842 0-1.05726842 0 0l-1.0572694-3.17180622s-1.05726842-1.05726842-1.05726841-2.11453785-1.05726842-1.05726842-1.05726846-2.11453688c-1.05726842 0-2.11453781-2.11453781-2.1145379-2.11453768-2.11453781-2.11453781-4.2290747-3.17180628-5.28634304-4.22907483-3.17180628-2.11453781-6.34361248-3.17180628-8.45815036-5.28634404-5.28634405-3.17180628-10.57268718-5.28634405-15.85903022-8.45814945-10.57268718-5.28634405-20.08810594-10.57268718-30.66079313-14.80176182-19.03083652-8.45814938-39.1189425-16.91629967-61.32158618-25.37444999-45.46255498-17.97356823-86.69603532-31.71806156-124.75770944-42.29074858-4.2290747 0-7.40088094 2.11453781-9.51541782 5.28634389-2.11453781 3.17180628 0 7.40088094 3.17180619 9.51541775 39.1189425 21.14537441 80.35242281 40.17621199 117.35682747 58.14978002l58.14978005 27.48898705 5.28634408 2.11453768c8.45814938 4.2290747 15.85903121 8.45814938 24.31718058 12.68722405 0 0 1.05726842 1.05726842 2.11453692 1.05726936-1.05726842 1.05726842-2.11453781 2.11453781-3.17180627 2.11453701-9.51541883 5.28634405-19.03083652 9.51541883-28.54625531 13.74449335l-50.74889904 22.20264283-24.31718061 10.57268709c-34.8898678 14.80176191-69.77973563 29.60352474-104.66960353 45.46255598-4.2290747 1.05726842-5.28634405 6.34361248-4.22907461 9.51541786 1.05726842 3.17180628 4.2290747 5.28634405 7.40088085 5.28634408h2.11453792c39.1189425-8.45814938 80.35242281-21.14537441 126.87224623-35.94713722 22.20264283-7.40088094 43.34801721-14.80176191 62.3788547-23.25991119 10.57268718-4.2290747 21.14537441-8.45814938 30.66079309-13.74449351 4.2290747-2.11453781 10.57268718-5.28634405 15.85903133-8.45815026 3.17180628-2.11453781 5.28634405-4.2290747 8.45814915-6.34361153 1.05726842-2.11453781 3.17180628-3.17180628 5.28634425-5.28634413 1.05726842 0 2.11453781-1.05726842 3.17180621-3.17180627 1.05726842-1.05726842 3.17180628-4.2290747 4.22907471-8.45814939v-4.2290747s0-1.05726842 1.05726827 0c0-2.11453781 0-3.17180628-1.05726827-6.34361246z">
</path>
</symbol>
<symbol id="icon-github" viewBox="0 0 1024 1024">
<path
d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667"
fill="#231F20"></path>
</symbol>
<symbol id="icon-youjian" viewBox="0 0 1024 1024">
<path
d="M780.8 341.333333H243.2l268.8 149.333334v85.333333L213.333333 409.6V682.666667h597.333334V409.6l-298.666667 166.4v-85.333333L780.8 341.333333zM896 256v512H128V256h768z"
fill="#444444"></path>
</symbol>
</svg>
<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 type="text/javascript">
function beforeSubmit(form) {
var radios = ["playeds", "playedp", "gamestyle", "frequency", "age", "gender", "control"]
for (var i = 0; i < radios.length; i++) {
if (isEmpty(radios[i])) {
alert("Some answers are missing; please fill in the questionnaire before proceeding to play!");
return false;
}
}
return true;
}
function isEmpty(name) {
var elements = document.getElementsByName(name)
for (var i = 0; i < elements.length; i++) { //遍历Radio
if (elements[i].checked) {
return 0;
}
}
return 1;
}
</script>
<section id="Reviews">
<div class="container">
<div class="row clearfix">
<div class="col-md-8" style="margin-left:5vw ;">
<h1>
<i class="icon-question"></i> Questionnaire
</h1>
<br>
<form action="result" method="POST" onSubmit="return beforeSubmit(this);">
<p>
<h4>1. Have you played Super Mario Bros before?</h4>
<label>
<input type="radio" class="option-input radio" name="playeds" value="A">
Yes, a lot
</label>
<label>
<input type="radio" class="option-input radio" name="playeds" value="B">
Yes, rarely
</label>
<label>
<input type="radio" class="option-input radio" name="playeds" value="C">
No
</label>
</p>
<p>
<h4>2. Have you ever played platform games like Super Mario Bros?</h4>
<label>
<input type="radio" class="option-input radio" name="playedp" value="A">
Yes, a lot
</label>
<label>
<input type="radio" class="option-input radio" name="playedp" value="B">
Yes, rarely
</label>
<label>
<input type="radio" class="option-input radio" name="playedp" value="C">
No
</label>
</p>
<p>
<h4>3. Which following selection represents you the best in Super Mario Bros?</h4>
<label>
<input type="radio" class="option-input radio" name="gamestyle" value="A">
Trying to complete a level as fast as possible by running and jumping
</label>
<label>
<input type="radio" class="option-input radio" name="gamestyle" value="B">
Prefer killing all the monsters in a level
</label>
<label>
<input type="radio" class="option-input radio" name="gamestyle" value="C">
Attempt to collect all the coins in a level
</label>
<label>
<input type="radio" class="option-input radio" name="gamestyle" value="D">
None of above
</label>
</p>
<script>
function renew( ){
if ($("input[name='gender']").val()=="D"){
$("input[name='gender']").val($("input[type='text']").val())
}
if( $("input[name='age']").val()=="A"){
$("input[name='age']").val($("input[type='number']").val())
}
}
</script>
<p>
<h4>4. How often do you play games?</h4>
<label>
<input type="radio" class="option-input radio" name="frequency" value="A">
More than 10 hours a week
</label>
<label>
<input type="radio" class="option-input radio" name="frequency" value="B">
3-10 hours per week
</label>
<label>
<input type="radio" class="option-input radio" name="frequency" value="C">
1-3 hours per week
</label>
<label>
<input type="radio" class="option-input radio" name="frequency" value="D">
Rarely
</label>
<label>
<input type="radio" class="option-input radio" name="frequency" value="E">
Never
</label>
</p>
<p>
<h4>5. What is your age?</h4>
<label>
<input type="radio" class="option-input radio" name="age" value= "A">
<input type="number" value="" step="1" placeholder="Input your age">
</label>
<label>
<input type="radio" class="option-input radio" name="age" value="B">
Prefer not to say
</label>
</p>
<p>
<h4>6. What is your gender?</h4>
<label>
<input type="radio" class="option-input radio" name="gender" value="A">
Male
</label>
<label>
<input type="radio" class="option-input radio" name="gender" value="B">
Female
</label>
<label>
<input type="radio" class="option-input radio" name="gender" value="C">
Prefer not to say
</label>
<label>
<input type="radio" class="option-input radio" name="gender" value= "D">
Other:
<input type="text" name="myGender" value="">
</label>
</p>
<p>
<h4>7. Please choose your control for later games.</h4>
<label>
<input type="radio" class="option-input radio" name="control" value="A">
ASD (run to left; duck; run to right) + JK (Jump; Speed Up)
</label>
<label>
<input type="radio" class="option-input radio" name="control" value="B">
←↓→ (run to left; duck; run to right) + SA (Jump; Speed Up)
</label>
</p>
<script>
function renew( ){
$("input[name='gender']").val($("input[type='text']").val())
$("input[name='age']").val($("input[type='number']").val())
}
</script>
<br>
<p><b><input type="submit" value="Submit" class="cirButton"
style="font-weight: 700; font-size: large; width: 60%;" onclick ="" /></b></p>
</form>
</div>
</div>
</div>
<!-- <div class="row clearfix">
<div class="col-md-2"></div>
<div class="col-md-8">
<button onclick="getRadioValue()" class="cirButton"> <h3>Submit</h3> </button>.
<br><br>
</div>
</div> -->
</section>
<!-- Footer mx-auto -->
<footer class="py-5 bg-dark">
<div class="container">
<div class="row clearfix">
<!-- <div class="col-md-2 column">
<img class="img-fluid" alt="" src="../templates/Web/Wechat.png" style="width: 100px;">
</div> -->
<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>
<script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
<script>
cheerpjInit();
cheerpjRunMain("Play", "/app/Mario-AI-Interface.jar", "0", "f_l");
</script>
</body>
<body id="tur" style="display: none">
<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.40088094 11.62995564-13.74449341 22.2026438-16.9162997s22.20264283-5.28634405 33.83259938-5.2863431 23.25991219 2.11453781 34.88986792 4.22907478c11.62995564 2.11453781 23.25991219 6.34361248 34.88986786 10.57268706 5.28634405 2.11453781 11.62995564 4.2290747 16.91629854 7.40088096 5.28634405 3.17180628 10.57268718 5.28634405 15.85903128 8.4581494 42.29074879 23.25991219 78.23788499 59.20704847 106.78414122 101.49779813-20.08810594-46.51982352-52.86343596-88.81057311-97.26872234-117.35682849-11.62995564-7.40088094-23.25991219-13.74449341-34.88986796-19.03083746-11.62995564-5.28634405-24.31718064-9.51541883-37.00440565-12.68722408-5.28634405-1.05726842-9.51541883-2.11453781-14.80176187-3.17180622-6.34361248-6.34361248-12.687225-15.85903121-14.80176196-24.31718068-2.11453781-5.28634405-2.11453781-10.57268718-1.05726929-14.80176185 0-3.17180628 3.17180628-6.34361248 6.3436126-9.51541889 7.40088094-6.34361248 20.08810594-8.45814938 31.71806147-8.45815016 24.31718064 0 48.63436122 6.34361248 71.8942734 17.97356905 11.62995564 5.28634405 23.25991219 11.62995564 32.77533003 20.08810503 9.51541883 8.45814938 19.03083652 16.91629967 27.48898688 26.43171844 8.45814938 9.51541883 15.85903121 20.08810594 22.20264377 31.71806156 6.34361248 11.62995564 11.62995564 24.31718064 15.85903031 35.94713623s8.45814938 25.37444898 10.57268716 38.06167413l2.1145379 9.51541872c0 3.17180628 1.05726842 6.34361248 1.05726837 9.51541874 1.05726842 6.34361248 1.05726842 13.74449341 2.11453783 20.08810593 2.11453781-13.74449341 2.11453781-27.48898691 2.11453684-41.23348032 0-13.74449341-2.11453781-27.48898691-5.28634304-41.2334803-3.17180628-12.687225-8.45814938-26.43171846-13.74449356-39.11894251s-12.687225-24.31718064-21.14537433-35.94713709c-13.74449341-16.91629967-29.60352474-32.77532999-47.57709282-44.40528576v-8.45815028c1.05726842-5.28634405 2.11453781-8.45814938 4.22907469-11.62995562 3.17180628-2.11453781 5.28634405-4.2290747 9.51541883-6.34361259 4.2290747-2.11453781 8.45814938-3.17180628 13.74449335-3.17180618s9.51541883 1.05726842 14.80176188 2.11453775c10.57268718 2.11453781 20.08810594 7.40088094 28.54625535 13.74449355 8.45814938 6.34361248 16.91629967 14.80176191 23.2599121 23.25991117 13.74449341 17.97356823 23.25991219 39.1189425 29.60352473 61.32158623 2.11453781 10.57268718 4.2290747 22.20264283 6.34361156 33.83259941 1.05726842 6.34361248 1.05726842 11.62995564 2.11453779 17.97356816 1.05726842 6.34361248 1.05726842 11.62995564 1.05726848 17.97356808 0 23.25991219-1.05726842 47.57709278-4.22907472 70.83700398 0-3.17180628 1.05726842-6.34361248 2.11453786-9.51541768 65.55066102 26.43171846 139.5594714 79.29515441 209.33920685 152.2466953 95.15418469 99.38326029 158.59030879 209.33920688 159.64757705 275.94713719 0 64.4933925-46.51982352 125.8149778-130.04405328 173.3920706z">
</path>
<path
d="M1540.72246719 667.41850251c0-1.05726842 0-1.05726842 0 0l-1.0572694-3.17180622s-1.05726842-1.05726842-1.05726841-2.11453785-1.05726842-1.05726842-1.05726846-2.11453688c-1.05726842 0-2.11453781-2.11453781-2.1145379-2.11453768-2.11453781-2.11453781-4.2290747-3.17180628-5.28634304-4.22907483-3.17180628-2.11453781-6.34361248-3.17180628-8.45815036-5.28634404-5.28634405-3.17180628-10.57268718-5.28634405-15.85903022-8.45814945-10.57268718-5.28634405-20.08810594-10.57268718-30.66079313-14.80176182-19.03083652-8.45814938-39.1189425-16.91629967-61.32158618-25.37444999-45.46255498-17.97356823-86.69603532-31.71806156-124.75770944-42.29074858-4.2290747 0-7.40088094 2.11453781-9.51541782 5.28634389-2.11453781 3.17180628 0 7.40088094 3.17180619 9.51541775 39.1189425 21.14537441 80.35242281 40.17621199 117.35682747 58.14978002l58.14978005 27.48898705 5.28634408 2.11453768c8.45814938 4.2290747 15.85903121 8.45814938 24.31718058 12.68722405 0 0 1.05726842 1.05726842 2.11453692 1.05726936-1.05726842 1.05726842-2.11453781 2.11453781-3.17180627 2.11453701-9.51541883 5.28634405-19.03083652 9.51541883-28.54625531 13.74449335l-50.74889904 22.20264283-24.31718061 10.57268709c-34.8898678 14.80176191-69.77973563 29.60352474-104.66960353 45.46255598-4.2290747 1.05726842-5.28634405 6.34361248-4.22907461 9.51541786 1.05726842 3.17180628 4.2290747 5.28634405 7.40088085 5.28634408h2.11453792c39.1189425-8.45814938 80.35242281-21.14537441 126.87224623-35.94713722 22.20264283-7.40088094 43.34801721-14.80176191 62.3788547-23.25991119 10.57268718-4.2290747 21.14537441-8.45814938 30.66079309-13.74449351 4.2290747-2.11453781 10.57268718-5.28634405 15.85903133-8.45815026 3.17180628-2.11453781 5.28634405-4.2290747 8.45814915-6.34361153 1.05726842-2.11453781 3.17180628-3.17180628 5.28634425-5.28634413 1.05726842 0 2.11453781-1.05726842 3.17180621-3.17180627 1.05726842-1.05726842 3.17180628-4.2290747 4.22907471-8.45814939v-4.2290747s0-1.05726842 1.05726827 0c0-2.11453781 0-3.17180628-1.05726827-6.34361246z">
</path>
</symbol>
<symbol id="icon-github" viewBox="0 0 1024 1024">
<path
d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667"
fill="#231F20"></path>
</symbol>
<symbol id="icon-youjian" viewBox="0 0 1024 1024">
<path
d="M780.8 341.333333H243.2l268.8 149.333334v85.333333L213.333333 409.6V682.666667h597.333334V409.6l-298.666667 166.4v-85.333333L780.8 341.333333zM896 256v512H128V256h768z"
fill="#444444"></path>
</symbol>
</svg>
<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>
<section style="background-color: rgb(255, 255, 255);">
<div class="container" style="font-weight: 600
;">
<div class="row clearfix" >
<!-- <style=" background-color: rgba(255,255,255);height: 130vh;
margin-top: -90px;"> -->
<div class="col-md-12" style=" background-color: rgba(255,255,255);" >
<div align="center">
<h3>Super Mario Bros Tutorial</h3>
<p > Before proceeding to the main part of the experiment please familiarize yourself with the game.<br>
You may proceed to the next phase of this survey once you are ready!</p>
<b onclick="replay()" style="cursor: pointer;">Click <u style="color:blue; ">ME</u> to show the instruction page again.</b>
<p class="alert">If the game is not responding to your keyboard, please click on the game screen.</p>
</div>
<div align="center" id="GameWindow" style="z-index: 100;">
<div class="loading-container" id="loading" style="visibility: visible">
<div class="loader"></div>
<div class="loading-text">Loading</div>
</div>
</div>
</div>
<div class="col-md-6" align="center" style="visibility: hidden;" id="next">
<br>
<button onclick='
//Init Cheerpj Framework
document.getElementById("game").style.visibility = "hidden";
document.getElementById("next").style.visibility = "hidden";
//var divElement = document.getElementById("GameWindow");
tutorialId = tutorialId+1
var level = "t"+tutorialId;
GameLoad().then(function(){
console.log("Cheerpj Initialize Succeed!");
document.getElementById("loading").style.visibility = "hidden";
$("#mask").hide();
})
var control = ("{{control}}" == "1");
PlayLevel(level,control)
.then(function (){
//play next?
if (tutorialId<parseInt("{{maxT}}")){
document.getElementById("next").style.visibility = "visible";
}
document.getElementById("game").style.visibility = "visible";
});' class="cirButton">
<h3>Repeat Tutorial</h3>
</button>
</div>
<div class="col-md-6" align="center" style="visibility: hidden;" id="game">
<br>
<button onclick="
window.location.href = window.location.href+'/data'
" class="cirButton">
<h3>Play Game</h3>
</button>
</div>
<div id="countdown"
style="z-index:999; position:absolute; left:50px; bottom: 20px; color: #ffffff; font-size: xx-large; ">
</div>
<img style=" height: 90vh;bottom: 3.5vh; left: 0vw;
position: absolute;z-index: 900; visibility: visible; width: 100%;" src="../templates/Web/pic.png"
id="windowshow">
<script>
function countdown() {
// var count = 10; // 设置倒计时秒数
// var timer = setInterval(function () {
// count--;
// if (count <= 0) {
// clearInterval(timer);
// $("#countdown").hide();
// $("#windowshow:visible").hide(); // 倒计时结束后隐藏倒计时容器
// } else {
$("#countdown").html("Click to close."); // 更新倒计时容器内容
$("#windowshow").click(function () {
$("#windowshow").hide();
$("#countdown").hide();
});}
// }
// }, 1000);
// }
$(document).ready(function () {
countdown();
});
</script>
<script>
//Init Cheerpj Framework
cheerpjInit();
var divElement = document.getElementById("GameWindow");
var tutorialId = parseInt("{{tutorial}}")
var level = "t" + "{{tutorial}}";
var img = document.getElementById("windowshow");
cheerpjCreateDisplay(500, 500, divElement);
cheerpjRunMain("Play", "/app/Mario-AI-Interface.jar", "0", "f_l");
GameLoad().then(function () {
console.log("Cheerpj Initialize Succeed!");
$("#windowshow:visible").hide();
$("#countdown").hide();
document.getElementById("loading").style.visibility = 'hidden';
})
var control = ("{{control}}" == "1");
PlayLevel(level, control)
.then(function () {
//play next?
if (tutorialId < parseInt("{{maxT}}")) {
document.getElementById("next").style.visibility = "visible";
}
document.getElementById("game").style.visibility = "visible";
$("#mask").hide();
});
</script>
</div>
<br>
<br>
<div style="padding-left:2%; padding-top: 10px;">
</div>
<!-- <p>more icon-more</p> -->
</div>
<script>
function replay() {
$("#windowshow:hidden").show();
}
</script>
</section>
<!-- Footer mx-auto -->
<footer class="py-5 bg-dark">
<div class="container">
<div class="row clearfix" >
<!-- <div class="col-md-2 column">
<img class="img-fluid" alt="" src="../templates/Web/Wechat.png" style="width: 100px;">
</div> -->
<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>