<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
#Announcement {
padding-top: 10px;
}
.explain{
display:none;
margin-top:10px;
font-family
}
.option{
display:none;
}
.question{
margin-top:7px;
margin-bottom:7px;
padding:10px;
}
.quiz-content{
font-family: Verdana, sans-serif;
}
#button{
margin-top:20px;
margin-left:0px;
margin-right:0px;
}
fieldset{
margin:20px;
padding:10px;
}
.fill input{
border-style: solid;
border-left: none;
border-top: none;
border-right: none;
vertical-align: middle;
float:left;
}
.fill label{
float:left;
}
#headimg{
margin-left:70px;
}
.true{
color:green;
font-weight:bold;
float:left;
}
.false{
color:red;
font-weight:bold;
float:left;
}
judge{
float:left;
}
.correctE{
display:none;
}
radio{
}
.answers{
padding-top:12px;
font-family: Verdana, sans-serif;
}
#title{
}
form{
margin-left: 10%;
margin-right: 10%;
}
h1{
margin-left: 11%;
margin-right: 11%;
}
.header{display: block; text-align: center;margin: auto; margin-left: 10%;margin-right: 10%;}
.header img{width:100px;display: inline-block;float:left;
}
.header div{display: block;}
.header h1,h2{display: block; margin-bottom: 0;}
.nav{width: 100%; display: block; clear: both; margin: auto; text-align: center;}
.nav{border-top: 1px solid #999;border-bottom: 1px solid #999;margin: 1em 0;}
.nav a{display:inline-block;margin: 5px 0px;padding: 5px 10px;}
.nav a:hover{background-color: #00468E;color:white;}
.section h1{font-size:13.5pt;background-color: #00468E; color:white;padding:3px 10px;}
.section ul{padding-left: 1.25em;}
.section ul li{line-height: 2em;}
.section table th,.section table td{text-align: left;padding-right:20px;}
.section table td{line-height: 1.5em;}
.section div{}
.section h2{font-size: 12pt;}
.footer{display: block; border-top: 1px solid #999;margin: 2em 0; padding: 1em 1em 0 1em;}
</style>
<title>小测验</title>
</head>
<body>
<div class="header"><!-- 标题栏 -->
<div id="headimg" ><img src="images/zju_logo.jpg"><!-- logo --> </div>
<div id="title">
<h1>小测验</h1>
<h2> 冬学期</h2>
</div>
</div>
<div class="section" id="Announcement">
<h1>  </h1>
<div>
<form>
<fieldset>
<legend >
选择题
</legend>
<div class="question">
<label class="quiz-content">
1. With respect to space and place, VGI is thought to be…
</label>
<div class="answers">
<input class="radio" type="radio" value="A" name="q1" >A. an unprecedented source of platial information</br>
<input class="radio" type="radio" value="B" name="q1" >B. an unprecedented source of spatial information</br>
<input class="radio" type="radio" value="C" name="q1" >C. limited in terms of its “platial” information</br>
</div>
<div class="explain">
<div class="option">A</div>
<div class="correctE">Correct. Social media VGI has unprecedented amounts of platial information.</div>
<div class="incorrectE">Incorrect. Review the social media VGI part of Lecture 4.</div>
</div>
</div><!-- 这是一道题的结尾 -->
<div class="question">
<label class="quiz-content">
2. Which one of the following statements is false about “Geospatial data”?
</label>
<div class="answers">
<input class="radio" type="radio" value="A" name="q2" >A. HTML file is a kind of geospatial data</br>
<input class="radio" type="radio" value="B" name="q2" >B. Remote sensing data is a kind of geospatial data</br>
<input class="radio" type="radio" value="C" name="q2" >C. Geospatial data is information that identifies the geographic location and characteristics of natural and constructed features and boundaries on Earth.</br>
<input class="radio" type="radio" value="C" name="q2" >D. Geospatial data can be acquired using a variety of methods, for example, land surveyors, census takers, aerial photographers can collect geospatial data.
</input>
</div>
<div class="explain">
<div class="option">A</div>
<div class="A">Correct. HTML file is not a kind of geospatial data.</div>
<div class="B">Incorrect. Remote sensing data, like weather data, is a kind of geospatial data.</div>
<div class="C">Incorrect. Review the definition of Geospatial data in Lecture 1.</div>
<div class="D">Incorrect. Review the method to acquire geospatial data in Lecture 2.</div>
</div><!-- 这是一道题的结尾 -->
</fieldset>
<fieldset>
<legend >
多选题
</legend>
<div class="question">
<label class="quiz-content">
2. Which of the following are examples of peer-production VGI?
</label>
<div class="answers">
<input class="checkbox" type="checkbox" value="A" name="q3" >A. Geotagged tweets</br>
<input class="checkbox" type="checkbox" value="B" name="q3" >B. OpenStreetMap data </br>
<input class="checkbox" type="checkbox" value="C" name="q3" >C. Geotagged photos</br>
<input class="checkbox" type="checkbox" value="D" name="q3" >D. Geotagged Wikipedia articles</br>
</div>
<div class="explain">
<div class="option">BD</div>
<div class="correctE">Correct. Social media VGI has unprecedented amounts of platial information.</div>
<div class="incorrectE">Incorrect. Review the social media VGI part of Lecture 4.</div>
</div>
</div><!-- 这是一道题的结尾 -->
</fieldset>
<fieldset>
<legend>
判断题
</legend>
<div class="question">
<label class="quiz-content">
1. Google does not use any VGI in Google Maps because of concerns about accuracy.
</label>
<div class="answers">
<input class="radio" type="radio" value="True" name="q3" > True
<input class="radio" type="radio" value="False" name="q3" > False
</div>
<div class="explain">
<div class="option">True</div>
<div class="correctE"> Correct. Google gathers peer-production VGI quite similar to that in OpenStreetMap through its Google Map Maker program.</div>
<div class="incorrectE">Incorrect. Google gathers peer-production VGI quite similar to that in OpenStreetMap through its Google Map Maker program.</div>
</div>
</div><!-- 这是一道题的结尾 -->
</fieldset>
<fieldset>
<legend>
填空题
</legend>
<div class="fill">
<div class="answers">
<label class="quiz-content">
题目4，这道题是填空题
</label>
<input class="text" type="text" value="" name="q3" >
<div class="quiz-content">了 </br></div>
</div>
<div class="explain">
<div class="option">string</div>
<div class="correctE"> Correct. string</div>
<div class="incorrectE">Incorrect. string</div>
</div>
</div><!-- 这是一道题的结尾 -->
</fieldset>
<div class="submit">
<center><input id="button" type="button" value="提交" onclick="return valid();"></center>
</div>
</form>
</div>
</div>
<script type="text/javascript">
function valid(){
var ex=document.getElementsByClassName("explain");
var an=document.getElementsByClassName("answers");
for(var i=0;i<ex.length;i++){
var answerDot=ex[i];
answerDot.style.display="block";
//实现显示隐藏答案
var dot=document.createElement("div");
option=ex[i].getElementsByClassName("option");
//alert(option[0].innerText);//获得正确选项
var readerChoice="";
var cc=an[i].getElementsByClassName("radio");
if(cc.length==0){
cc=an[i].getElementsByClassName("checkbox");
if(cc.length==0){
cc=an[i].getElementsByClassName("text");
//alert(cc[0].value);
readerChoice=cc[0].value;
}
}
for(var j=0;j<cc.length;j++){
if(cc[j].checked){
readerChoice=readerChoice+cc[j].value;
//alert(readerChoice);
