# jquery-question

**Repository Path**: SeasonCCC/jquery-question

## Basic Information

- **Project Name**: jquery-question
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-03-15
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#jquery-question

## 简介

Jquery-question 插件用于创建问答专题的答题部分



## 基本配置

- Html

```html
<script type="text/javascript" src="./assets/js/jquery.min.js"></script>
<script type="text/javascript" src="./assets/js/jquery-question.js"></script>

<div id="questionContent">
    <div data-question="true"></div>
    <div data-question="true"></div>
    <div data-question="true"></div>
    <div data-button="true"></div>
</div>
```

需要给出基本的html结构：data-question内生成题目标题及选项，data-button中生成按钮（若需要）

- Javascript

  ```javascript
  	$(function(){
  		var data = [ //默认题目
  			{
  				id:"1",
  				title: "title1",
  				answer: ["answer1", "answer2", "answer3", "answer4"],
  				type: "radio",
  				inputName: "question_1",
  				inputClass: "radio",
  				inputValue: ["1-answer1", "1-answer2", "1-answer3", "1-answer4"]
  			},
  			{
  				id:"2",
  				title: "title2",
  				answer: ["answer1", "answer2", "answer3", "answer4"],
  				type: "checkbox",
  				inputName: "question_2",
  				inputClass: "checkbox",
  				inputValue: ["2-answer1", "2-answer2", "2-answer3", "2-answer4"]
  			},
  			{
  				id:"3",
  				title: "title3",
  				answer: ["answer1", "answer2", "answer3", "answer4"],
  				type: "radio",
  				inputName: "question_3",
  				inputClass: "radio",
  				inputValue: ["3-answer1", "3-answer2", "3-answer3", "3-answer4"]
  			}
  		];

  		$("#questionContent").jqueryQuestion({
  			templateTitle: "<label id='{id}'>{title}</label>", //标题模板{title}
  			templateAnswer: "<div><input class='{inputClass}' type='{type}' name='{inputName}' value='{inputValue}' />{answer}</div>", //选项模板{type}, {inputName}, {inputValue}, {answer}
  			buttonSet: true, //是否设置按钮(true, false)
  			templateButton: "<button data-button-type='prev'>上一步</button>"+
  					     "<button data-button-type='next'>下一步</button>"+
  					     "<button data-button-type='submit'>提交</button>", //按钮模板（buttonSet设置为true时候生效）
  			index: 0, //从第几题开始，默认0
  			hiddenClass: "hidden", //隐藏的class名
  			data: data,
  			onchange: function(event, index){ //切换时题目触发
  				//console.log(index);
  				event();
  			},
  			submit: function(){ //提交方法
  				alert("提交");
  			}
  		});
  		
  	})
  ```

## 配置项

|      变量名       |                    描述                    |       可选值/参数        |    类型    |
| :------------: | :--------------------------------------: | :-----------------: | :------: |
| templateTitle  |     题目名称模板（data变量中的title将会替换{title}）     | 例子见上图templateTitle  |  String  |
| templateAnswer | 题目答案模板（data变量中：answer替换{answer}、type替换{type}、inputValue替换{inputValue}、inputName替换{inputName}） | 例子见上图templateAnswer |  String  |
|   buttonSet    |              设置是否存在上一题下一题按钮              |     true/false      |   Bool   |
| templateButton |      设置按钮模板（buttonSet设置为true的时候使用）       | 例子见上图templateButton |  String  |
|     index      |                设置开始的题目序号                 |       1/2...        |   int    |
|  hiddenClass   |              隐藏题目的css class              |      默认hidden       |  String  |
|      data      |                    数据                    |      例子见上图data      |  Array   |
|    onchange    |      题目切换的时候触发事件（参数: event, index）       |          -          | function |
|     submit     |                  提交时候触发                  |          -          | function |
|                |                                          |                     |          |