jQuery PHP MySQL을 사용하여 온라인 테스트를 구현하는 방법 project_php 예제

이전 글에서는 jQuery를 활용해 얻은 시험문제 효과를 소개했습니다. 그런 다음 이 기사에서는 예제를 사용하여 질문의 동적 읽기, 질문에 답변한 후 백그라운드 채점 및 답변 결과 반환을 포함하여 jQuery PHP MySQL을 사용하여 온라인 테스트 문제를 구현하는 방법을 소개합니다. 이 글은 포괄적인 웹 애플리케이션 글입니다. 이 글을 읽는 독자는 HTML, jQuery, PHP, MySQL에 대한 기본 지식을 갖고 있는 것이 좋습니다.

quiz.php

여기서는 설명의 편의를 위해 퀴즈.php 파일에 php와 HTML을 섞어서 넣었습니다. 먼저, 본 사이트의 이전 글과 동일합니다. jQuery로 구현한 시험답안 기능입니다. jQuery 라이브러리와 quits.js 파일을 로드한 후, 적절한 위치에 시험문제 html 구조를 추가합니다.

<div id="quiz-container"></div> 

페이지가 로드될 때 문제 정보를 읽고 jQuery를 호출하여 표시해야 합니다. 질문 정보는 먼저 데이터베이스에서 가져옵니다. 질문과 해당 답변 옵션 정보를 데이터 테이블 퀴즈에 추가할 수 있습니다.
SQL 문을 구성하고, PHP를 사용하여 데이터베이스에 쿼리하고, 질문 및 답변 옵션 정보를 읽습니다. 이때 정답을 읽을 필요는 없습니다. 그런 다음 질문 정보를 JSON 형식의 변수 $json에 할당합니다.

<&#63;php 
include_once("connect.php");//连接数据库 
 
$sql = "select * from quiz order by id asc"; 
$query = mysql_query($sql); //查询数据 
while($row=mysql_fetch_array($query)){ 
  $answers = explode('###',$row['answer']); //将答案选项分开 
  $arr[] = array( 
    'question' => $row['id'].'、'.$row['question'], //题目 
    'answers' => $answers //答案选项 
  ); 
} 
$json = json_encode($arr); //转换json格式 
&#63;> 

json 형식의 데이터 문자열을 얻은 후 이전 글에서 소개한 대로 jquizzy()를 호출했습니다.

$(function(){ 
  $('#quiz-container').jquizzy({ 
    questions: <&#63;php echo $json;&#63;>, //试题信息 
    sendResultsURL: 'data.php' //结果处理地址 
  }); 
}); 

이렇게 해서 웹페이지 quit.php를 다시 실행하여 테스트 문제가 생성되었는지 확인해보겠습니다. 소스코드를 보면 json 데이터만 보이고 테스트 문제에 해당하는 답변 부분은 보이지 않습니다.

data.php

테스트 질문을 호출할 때 sendResultsURL 옵션이 있습니다. 사용자가 질문 입력을 마치고 "마침" 버튼을 클릭하면 Ajax 대화형 요청이 백그라운드 data.php로 전송됩니다. , 정답을 비교한 후 사용자의 점수를 부여합니다.

include_once("connect.php"); //连接数据库 
 
$data = $_REQUEST['an']; //获取答题信息 
$answers = explode('|',$data); //分析数据 
$an_len = count($answers)-1; //题目数 
 
$sql = "select correct from quiz order by id asc"; 
$query = mysql_query($sql); //查询表 
$i = 0; 
$score = 0; //初始得分 
$q_right = 0; //答对的题数 
while($row=mysql_fetch_array($query)){ 
  if($answers[$i]==$row['correct']){ //比对正确答案 
    $arr['res'][] = 1; //正确 
    $q_right += 1; //正确答题数+1 
  }else{ 
    $arr['res'][] = 0; //错误 
  } 
  $i++; 
} 
$arr['score'] = round(($q_right/$an_len)*100); //计算总得分 
echo json_encode($arr); 

data.php에서 먼저 데이터베이스에 연결하고 프런트엔드 사용자의 질문에 대한 답변인 처리 매개변수 an을 수신한 다음 데이터 테이블을 쿼리하고 사용자가 제출한 답변과 정답을 비교합니다. 데이터 테이블의 질문을 처리하고, 사용자의 답변으로 얻은 점수를 계산한 후 최종적으로 json 형식의 데이터를 출력하여 프론트 데스크 통화에 반환합니다.

quizs.js

프런트 및 백엔드 Ajax 상호작용 부분을 중심으로 js 코드를 수정했습니다. 퀴즈.js의 핵심 부분은 다음과 같습니다.

if (config.sendResultsURL !== null) { 
  var collate = []; 
  var myanswers = ''; 
  //获取用户所答题的答案 
  for (r = 0; r < userAnswers.length; r++) { 
    collate.push('{"questionNumber":"' + parseInt(r + 1, 10) + '", "userAnswer":"' + userAnswers[r] + '"}'); 
    myanswers = myanswers + userAnswers[r]+'|'; 
  } 
   
  //Ajax交互 
  $.getJSON(config.sendResultsURL,{an:myanswers},function(json){ 
    if(json==null){ 
      alert('通讯失败！'); 
    }else{       
      var corects = json['res']; 
      $.each(corects,function(index,array){ 
        resultSet += '<div class="result-row">' + (corects[index] === 1 &#63; "<div class='correct'>#"+(index + 1)+"<span></span></div>": "<div class='wrong'>#"+(index + 1)+"<span></span></div>")+'</div>'; 
      }); 
      resultSet = '<h2 class="qTitle">' + judgeSkills(json.score) + '<br/> 您的分数： ' + json.score + '</h2><div class="jquizzy-clear"></div>' + resultSet + '<div class="jquizzy-clear"></div>'; 
             
             
      superContainer.find('.result-keeper').html(resultSet).show(500); 
    }   
  }); 
} 

사용자가 질문에 답변한 후, 사용자가 답변한 질문에 대한 답변을 "1|2|4|1|3|" 형식의 문자열로 구성하여 해당 답변을 파라미터에 제출합니다. $.getJSON을 통해 백그라운드로, 그리고 백그라운드 PHP 처리 비율을 정답으로 확인한 후 반환된 결과는 다음과 같습니다. {"res":[1,0,1,1,0] ,"score":60}, res는 답변 비교 결과로, 5개의 질문에 대한 답변 결과를 나타내며, 1은 답변이 정상임을 의미하고, 0은 답변이 틀렸음을 의미하며, Score는 점수를 의미합니다. 그런 다음 반환된 결과를 처리하여 각 질문의 평가 결과와 총점을 얻고 해당 html 구조가 생성됩니다.

MySQL

마지막으로 mysql 데이터 테이블 퀴즈의 구조를 첨부합니다.

CREATE TABLE IF NOT EXISTS `quiz` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `question` varchar(100) NOT NULL, 
 `answer` varchar(500) NOT NULL, 
 `correct` tinyint(2) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

테이블에 정보를 추가하거나 소스 패키지에 있는 퀴즈.sql 파일을 직접 가져올 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.