JS 간단 한 선택 문제 평가 시스템 코드 사고방식 상세 화 실현(demo)
평가 시스템 이 라 고 하 니까 작은 데모 라 고 할 수 있 을 것 같 아 요.물이 많 고 데이터베이스 라 이브 러 리 가 없어 요.JS 로 간단 한 선택 문제 평가 시스템 만 할 수 있어 요.
--------------------------------------------------------------------------------
디자인 아이디어
폼 패키지:
【1】JS 패키지 로 제출 하기 때문에 form 태그 가 필요 없습니다.
【2】여러 개의 input 라벨 을 입력 항목 으로 배치 합 니 다.
【3】JS 를 작성 하여 입력 항목 을 가 져 오고 get 방식 으로 다른 페이지 에 제출 합 니 다.
폼 검사(결과 표시)
【1】get 에서 들 어 오 는 인자 가 져 오기
[2]JS 해석 을 통 해
【3】해당 위치 로 표시
--------------------------------------------------------------------------------
2.참조 소스 코드 는 다음 과 같다.
request.html
<html>
<head>
<title> </title>
<meta http-equiv="accept-charset" charset="utf-8">
<script src="jquery.min.js"></script>
<script type="text/javascript">
function getjson() {
var radio = new Array();
for (var i = 1; i <= 5; i++) {// radio
var radio_name = new String("radio_" + i);
radio[i - 1] = $('input:radio[name=' + radio_name + ']:checked').val()
}
for (var i = 1; i <= 2; i++) {// checkbox
var checkbox_name = new String("checkbox_" + i);
var chk_value = [];
$('input:checkbox[name=' + checkbox_name + ']:checked').each(function () {
chk_value.push($(this).val());
});
radio[i + 4] = "";//
for (var j = 0; j < chk_value.length; j++) {
radio[i + 4] = radio[i + 4] + chk_value[j];
}
}
// json
var json = JSON.stringify(radio);
return json;
}
function my_confirm() {
var json = getjson();
var msg = " ：" + json + ", ";
if (confirm(msg) == true) {
window.location.href = "result.html?radio=" + 5 + "checkbox=" + 2 + "&json=" + json;
} else {
return false;
}
}
$(function () {
var m = 1;
var s = 10;
setInterval(function () {
if (m >= 0) {
if (s < 10) {
$('#time').html(" ：" + m + ':0' + s);
} else {
$('#time').html(" ：" + m + ':' + s);
}
s--;
if (s < 0) {
s = 59;
m--;
}
if (m == 0 && s < 1) {
window.location.href = "result.html?radio=" + 5 + "checkbox=" + 2 + "&json=" + getjson();
}
}
}, 1000)
})
</script>
</head>
<body>
<h3 style="float: left">2016--2017 </h3>
<div id="time" style="color:red;float: right;margin: 12px 20px 0 0;padding: 0 0 0 0;font-size: xx-large"></div>
<br/><br/><br/>
<hr/>
<h4> 、 （ 12 ， 60 ）</h4>
1. ， （） 。<br>
<input type="radio" name="radio_1" value="A">A、 <br>
<input type="radio" name="radio_1" value="B">B、 <br>
<input type="radio" name="radio_1" value="C">C、 <br>
<input type="radio" name="radio_1" value="D">D、 <br>
2. () <br>
<input type="radio" name="radio_2" value="A">A、 java final ， 。<br>
<input type="radio" name="radio_2" value="B">B、 ， ， 。<br>
<input type="radio" name="radio_2" value="C">C、 abstract， final。<br>
<input type="radio" name="radio_2" value="D">D、 (Overriding) (Overloading) Java ， 。<br>
3. ? <br>
<input type="radio" name="radio_3" value="A">A、Date[] arr = new Date[5];<br>
<input type="radio" name="radio_3" value="B">B、Date arr[] = new Date[];<br>
<input type="radio" name="radio_3" value="C">C、Date arr[][] = new Date[4][5];<br>
<input type="radio" name="radio_3" value="D">D、Date arr[][] = new Date[4][];<br>
4. Employee.txt ， () <br>
<input type="radio" name="radio_4" value="A">A、BufferedReader<br>
<input type="radio" name="radio_4" value="B">B、FileInputStream<br>
<input type="radio" name="radio_4" value="C">C、DataOutputStream<br>
<input type="radio" name="radio_4" value="D">D、DataInputStream<br>
5. ， ？ <br>
<input type="radio" name="radio_5" value="A">A、 start() 。<br>
<input type="radio" name="radio_5" value="B">B、 ， 。<br>
<input type="radio" name="radio_5" value="C">C、 Runnable Thread 。<br>
<input type="radio" name="radio_5" value="D">D、 synchronized ， 。<br>
<br/>
<h4> 、 （ 20 ， 40 ， 、 、 ）</h4>
6. () <br>
<input type="checkbox" name="checkbox_1" value="A">A、 java final ， 。<br>
<input type="checkbox" name="checkbox_1" value="B">B、 ， ， 。<br>
<input type="checkbox" name="checkbox_1" value="C">C、 abstract， final。<br>
<input type="checkbox" name="checkbox_1" value="D">D、 (Overriding) (Overloading) Java ， 。<br>
7. ， （） 。<br>
<input type="checkbox" name="checkbox_2" value="A">A、 <br>
<input type="checkbox" name="checkbox_2" value="B">B、 <br>
<input type="checkbox" name="checkbox_2" value="C">C、 <br>
<input type="checkbox" name="checkbox_2" value="D">D、 <br>
<hr/>
<input type="button" onclick="my_confirm()" value=" ">
</body>
</html>result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script src="jquery.min.js"></script>
<script>
// url
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //
var r = window.location.search.substr(1).match(reg); //
if (r != null) return unescape(r[2]);
return null; //
}
function showResult() {
var answer = ["B", "D", "B", "B", "D", "ABC", "ACD"];//
var answer_score = [12, 12, 12, 12, 12, 20, 20];//
var user_answer = JSON.parse(getUrlParam("json"));//
var radio_num = parseInt(getUrlParam("radio"));//
var checkbox_num = parseInt(getUrlParam("checkbox"));//
var radio_result = 0;//
var checkbox_result = 0;//
var radio_right_num = 0;//
var checkbox_right_num = 0;//
var result = 0;//
var user_answer_result = new Array();//
for (var i = 0; i < user_answer.length; i++) {
if (user_answer[i] == answer[i]) {
if (i < radio_num) {
radio_result = radio_result + answer_score[i];
radio_right_num++;
} else {
checkbox_result = checkbox_result + answer_score[i];
checkbox_right_num++;
}
user_answer_result[i] = " ";
} else {
user_answer_result[i] = " ";
}
}
result = checkbox_result + radio_result;
//
var show_result1;
var show_result2;
var show_result3;
var show_result4;
var show_result5;
var show_result6;
show_result1 = " ：";
for (var i = 0; i < user_answer.length; i++) {
show_result1 = show_result1 + (i + 1) + "：" + user_answer_result[i] + "； ";
}
show_result2 = " ：" + user_answer.length;
show_result3 = " ：" + radio_right_num + "； ：" + radio_result;
show_result4 = " ：" + checkbox_right_num + "； ：" + checkbox_result;
show_result5 = " ：" + (user_answer.length - radio_right_num - checkbox_right_num);
show_result6 = " ：" + result;
$("p#show_result1").html(show_result1);
$("p#show_result2").html(show_result2);
$("p#show_result3").html(show_result3);
$("p#show_result4").html(show_result4);
$("p#show_result5").html(show_result5);
$("p#show_result6").html(show_result6);
}
</script>
</head>
<body>
<h2> ！</h2>
<hr/>
<input type="button" onclick="showResult()" value=" ">
<p id="show_result1">
<p>
<hr/>
<p id="show_result2"></p>
<p id="show_result3"></p>
<p id="show_result4"></p>
<p id="show_result5"></p>
<hr/>
<p id="show_result6"></p>
</body>
</html>
총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 JS 가 간단 한 선택 문제 평가 시스템 의 코드 방향 을 상세 하 게 설명 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 여러분 에 게 답 할 것 입 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
