jQuery_jquery로 구현된 온라인 질의응답 기능

온라인 설문조사, 다양한 지식의 온라인 테스트 및 기타 애플리케이션과 같은 온라인 테스트 기능을 웹 페이지에 추가해야 하는 경우가 있습니다. 이러한 애플리케이션에는 많은 프런트엔드 및 백엔드 기술이 필요합니다. 오늘은 질의 응답 기능을 테스트하는 jQuery 기반의 프런트 엔드 애플리케이션을 여러분과 공유하겠습니다.

HTML

먼저 jquery 라이브러리 파일과 quit.js, 필수 CSS 스타일 파일 styles.css를 로드합니다.

<script src="jquery.js"></script> 
<script src="quiz.js"></script> 
<link rel="stylesheet" href="styles.css" /> 

그런 다음 시험 문제를 배치해야 하는 곳에 div#quiz-container를 추가하세요.

코드 복사 코드는 다음과 같습니다.

jQuery

먼저 질문과 답변 옵션을 정의합니다. 질문은 질문이고, 답변은 답변 옵션이며, 올바른 답변은 정답입니다. 정의된 init은 json 데이터 형식임을 알 수 있다.

코드 복사 코드는 다음과 같습니다.

var init={'questions':[{'question':'jQuery가 무엇인가요? ','답변':['자바스크립트 라이브러리','CSS 라이브러리','PHP 프레임워크','해당 사항 없음'],'corrightAnswer':1},{'question':'다른 카테고리의 항목을 찾으십니까? ','답변':['책상','소파','TV','식탁보'],'corrightAnswer':3},{'question':'국토 면적이 가장 넓은 국가는 다음과 같습니다.',' 답변': ['미국','중국','러시아','캐나다'],'corrightAnswer':3},{'question':'달은 지구에서 얼마나 떨어져 있나요? ','답변':['180,000킬로미터','380,000킬로미터','100만 킬로미터','180만 킬로미터'],'corrightAnswer':2}]};

다음으로, quit.js에서 제공하는 플러그인 메소드를 직접 호출한 후 페이지를 열어 해당 페이지에 온라인 테스트 프로젝트가 생성된 것을 확인합니다.

$(function(){ 
  $('#quiz-container').jquizzy({ 
    questions: init.questions 
  }); 
}); 

따라서 맞춤 시험 문제 스타일 레이아웃을 수정하려면 퀴즈.js 및 styles.css 파일을 적절하게 수정하면 됩니다.

질문 이 시점에서 조심스러운 친구들은 문제가 다가오고 있음을 알게 될 것입니다:
1. js 코드에서 질문에 대한 정답을 직접 표시하는 것은 안전하지 않나요? 공식 테스트 프로젝트에 대한 답변은 누군가가 직접 정답을 얻기 위해 소스 코드를 보는 것을 방지하기 위해 백그라운드에서 결정되어야 하는지 여부입니다.
2. 배경과 상호작용하는 방법은 무엇입니까? 예를 들어, 테스트 문제에 답하기 전에 신원을 확인하고, 문제에 답한 후 결과를 백엔드로 보냅니다.
제가 말하고 싶은 것은 이것이 프론트엔드 코드 데모 프로젝트라는 것입니다. 실제 애플리케이션 답변은 프론트엔드 코드에 나타나지 않습니다. 실제로는 퀴즈.js에 백그라운드 Ajax와 상호작용하기 위한 인터페이스가 있습니다. 다음 기사를 소개합니다. 기사 제목인 jQuery PHP MySQL을 사용하여 온라인 테스트 프로젝트를 구현하는 방법을 이미 생각해 두었습니다. 계속 지켜봐 주시기 바랍니다.

데모 보기 소스 코드 다운로드

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