master
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Survey Test</title>
8
9 <!-- Bootstrap -->
10 <link href="/css/bootstrap.min.css" rel="stylesheet">
11
12 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
13 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
14 <!--[if lt IE 9]>
15 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
16 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
17 <![endif]-->
18 </head>
19 <body>
20 TODO: Label has a checkbox to make it a header
21 TODO: Add checkbox to label to make it a footer
22 <div class="container">
23 <div class="row">
24 <div class="col-xs-2">
25 <div class="btn-group">
26 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
27 Add Item<span class="caret"></span>
28 </button>
29 <ul class="dropdown-menu" role="menu">
30 <li><a data-item="multi-choice">Multiple Choice</a></li>
31 <li><a data-item="select-one">Select One</a></li>
32 <li><a data-item="text-area">Text Response</a></li>
33 <li class="divider"></li>
34 <li><a data-item="sig-block">Header Block</a></li>
35 <li><a data-item="ins-block">Footer Block</a></li>
36 <li><a data-item="ins-block">Label Block</a></li>
37 <li><a data-item="ins-block">Divider Block</a></li>
38 </ul>
39 </div>
40 </div>
41 <div class="col-xs-10">
42 <div id="survey-list" class="list-group sortable">
43 <div class="list-group-item">
44 <h4 class="text-uppercase"><small><strong>Multiple Choice Item</strong></small></h4>
45 <div class="form-horizontal" role="form">
46 <div class="form-group">
47 <label for="multi-choice-q1" class="col-sm-2 control-label">Question</label>
48 <div class="col-sm-10">
49 <div class="input-group">
50 <input type="text" class="form-control" id="multi-choice-q1" placeholder="Multiple choice question">
51 <span class="input-group-btn">
52 <button type="button" class="btn btn-default multi-choice-add">Add Choice</button>
53 </span>
54 </div>
55 </div>
56 </div>
57 </div>
58 </div>
59 </div>
60 </div>
61 </div>
62 </div>
63
64 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
65 <script src="/js/jquery.min.js"></script>
66 <!-- Include all compiled plugins (below), or include individual files as needed -->
67 <script src="/js/bootstrap.min.js"></script>
68 <script src="/js/html.sortable.min.js"></script>
69 <script>
70 $('.sortable').sortable({
71 forcePlaceholderSize: true
72 });
73 var labelCount = 0
74 $(document).ready(function (){
75 $('[data-item]').click(function (){
76 var itemType = $(this).data('item');
77 var itemHTML = ""
78 if (itemType = "multi-choice"){
79 labelCount++;
80 itemHTML = '\
81 <h4 class="text-uppercase"><small><strong>Multiple Choice Item</strong></small></h4>\
82 <div class="form-horizontal" role="form">\
83 <div class="form-group">\
84 <label for="multi-question-'+labelCount+'" class="col-sm-2 control-label">Question</label>\
85 <div class="col-sm-10">\
86 <div class="input-group">\
87 <input type="text" class="form-control" id="multi-question-'+labelCount+'" placeholder="Multiple choice question">\
88 <span class="input-group-btn">\
89 <button type="button" class="btn btn-default multi-choice-add">Add Choice</button>\
90 </span>\
91 </div>\
92 </div>\
93 </div>\
94 </div>\
95 ';
96 }
97 else if (itemType = "select-one"){
98 itemHTML = itemType;
99 }
100 else if (itemType = "text-area"){
101 itemHTML = itemType;
102 }
103 else if (itemType = "sig-block"){
104 itemHTML = itemType;
105 }
106 else if (itemType = "ins-block"){
107 itemHTML = itemType;
108 }
109 $('#survey-list').append('<div class="list-group-item">'+itemHTML+'</div>');
110 $('.sortable').sortable('reload');
111 });
112
113 $(document).on('click', '.multi-choice-add', function() {
114 labelCount++;
115 $(this).closest('.form-horizontal').append('\
116 <div class="form-group">\
117 <label for="multi-choice-'+labelCount+'" class="col-sm-2 control-label">Choice</label>\
118 <div class="col-sm-10">\
119 <div class="input-group">\
120 <input type="text" class="form-control" id="multi-choice-'+labelCount+'" placeholder="Choice label">\
121 <span class="input-group-btn">\
122 <button type="button" class="btn btn-default multi-choice-del"><span class="glyphicon glyphicon-trash"></span></button>\
123 </span>\
124 </div>\
125 </div>\
126 </div>\
127 ');
128 });
129 $(document).on('click', '.multi-choice-del', function() {
130 $(this).closest('.form-group').remove()
131 });
132
133 });
134 </script>
135 </body>
136</html>