MarioWeb/templates/eval.html

186 lines
5.7 KiB
HTML
Raw Normal View History

2022-10-24 11:48:43 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
2022-10-24 14:17:55 +00:00
<style>
*{
margin: 0;
padding: 0;
}
.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;
}
.leftInfoBlock{
margin-top: 20px;
height: 180px;
background: #f1a087;
}
.leftInfo {
width: 90%;
top: 20px;
position:absolute;
background: #f7a2a2;
}
.rightQuery{
width: 10%;
left: 90%;
height: 400px;
top: 20px;
position:absolute;
background: #a19cee;
}
.circleButton{
align-items: center;
border-radius:50%;
border: none
}
.pararadio{
height: 20%;
}
</style>
2022-10-24 11:48:43 +00:00
</head>
2022-10-24 14:17:55 +00:00
<div id="replayWindow" class="popwindow">
2022-10-24 11:48:43 +00:00
<div id="replayWindowGame">
</div>
<div align="center"><button onClick="closeReplayWindow()">Close Window</button></div>
</div>
2022-10-24 14:17:55 +00:00
2022-10-24 11:48:43 +00:00
<body>
2022-10-24 14:17:55 +00:00
<div class = "leftInfo">
<div class = "leftInfoBlock">
<h3 align = "center"> Game 1</h3>
<img src="../levels/test1.png" width="100%" >
<div align="center"><button onClick="Replay('test1')">Replay Game1</button></div>
</div>
<div class = "leftInfoBlock">
<h3 align = "center"> Game 2</h3>
<img src="../levels/test2.png" width="100%" >
<div align="center"><button onClick="Replay('test2')">Replay Game2</button></div>
</div>
2022-10-24 11:48:43 +00:00
2022-10-24 14:17:55 +00:00
<script>
//The Funtions
function closeReplayWindow(){
var replayWindow=document.getElementById("replayWindow");
replayWindow.style.visibility = 'hidden';
}
function Replay(id){
var replayWindow=document.getElementById("replayWindow");
replayWindow.style.visibility = 'visible';
cjCall("Play", "replayGameMain", id, id);
}
function getValue(){
var radio = document.getElementsByName("gameRadio");
for (i=0; i<radio.length; i++) {
if (radio[i].checked) {
alert(radio[i].value)
}
}
}
2022-10-26 03:49:14 +00:00
function PostToServer(data) {
var httpRequest = new XMLHttpRequest();//第一步:建立所需的对象
httpRequest.open("POST",""); //调用AddDataToServer
httpRequest.setRequestHeader("Content-Type", "application/json"); //设置请求头信息
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
//alert('添加成功');
}
}
httpRequest.send(JSON.stringify(data)); //设置为发送给服务器数据
}
2022-10-24 14:17:55 +00:00
window.onload=function(){
closeReplayWindow();
}
</script>
<script>
cheerpjInit();
var divElement = document.getElementById("replayWindowGame");
cheerpjCreateDisplay(500,500,divElement);
cheerpjRunMain("Play", "/app/Mario-AI-Interface.jar", "0", "f_l");
2022-10-24 11:48:43 +00:00
closeReplayWindow();
2022-10-24 14:17:55 +00:00
</script>
</div>
<div class = "rightQuery">
<!-- <button class = "circleButton" style = "width: 100px; height: 100px;"></button>
<button class = "circleButton" style = "width: 60px; height: 60px;"></button>
<button class = "circleButton" style = "width: 40px; height: 40px;"></button>
<button class = "circleButton" style = "width: 60px; height: 60px;"></button>
<button class = "circleButton" style = "width: 100px; height: 100px;"></button> -->
<fieldset style="height: 100%;" >
<legend align="center" height = 30px >Fun</legend>
<div class = "pararadio">
<input type="radio" value="1-2" name="fun">
<label for="gameRadio">Game1 Better</label>
</div>
<div class = "pararadio">
<input type="radio" value="1-1" name="fun">
<label for="gameRadio">Game1 Good</label>
</div>
<div class = "pararadio">
<input type="radio" value="0-0" name="fun">
<label for="gameRadio">Equal</label>
</div>
<div class = "pararadio">
<input type="radio" value="2-1" name="fun">
<label for="gameRadio">Game2 Good</label>
</div>
<div class = "pararadio">
<input type="radio" value="2-2" name="fun">
<label for="gameRadio">Game2 Better</label>
</div>
</fieldset>
<script>
function getRadioValue(){
var obj = document.getElementsByName("fun");
for(var i=0; i<obj.length; i ++){
if(obj[i].checked){
2022-10-26 03:49:14 +00:00
PostToServer(obj[i].value);
2022-10-24 14:17:55 +00:00
alert(obj[i].value);
}
}
// var radio = document.getElementsByName("gameRadio");
// var addressID = $("input[name='sex']:checked").val();
// alert(addressID)
}
</script>
<button onclick="getRadioValue()"> Submit </button>
</div>
2022-10-24 11:48:43 +00:00
</body>
</html>