Open source survey management

survey_builder.html 4.7KB

    <html ng-app="surveybuilder"> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="css/survey_builder.css" /> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/angular.min.js"></script> <script src="js/builder.js"></script> <title>Survey Builder</title> </head> <body ng-controller="surveybuildercontroller"> <div id="container"> <div id="top"> <h1 style="margin-top: 0px;">Survey Builder</h1> </div> <span ng-repeat="module in modules" ng-init="moduleIndex = $index"> <div class="template"> <span ng-init="edit = false"> <h2 ng-show="!edit" ng-click="edit = true">{{module.title}}</h2> <span ng-show="edit"> <input type="text" class="except" ng-model="module.title"> <button class="btn btn-sm" ng-click="edit = false"> <span class="glyphicon glyphicon-ok green"></span> </button> </span> </span> <span ng-init="edit_subtext = false"> <p ng-show="!edit_subtext" ng-click="edit_subtext = true">{{module.subtext}}</p> <br ng-show="edit_subtext"> <span ng-show="edit_subtext"> <input type="text" class="except" ng-model="module.subtext"> <button class="btn btn-sm" ng-click="edit_subtext = false"> <span class="glyphicon glyphicon-ok green"></span> </button> </span> </span> <!-- Type-specific code --> <!--Radio Select--> <span ng-if="module.type == 0" ng-repeat="option in module.options"> <div ng-init="edit = false"> <label ng-show="!edit" ng-click="edit = true">{{option.label}}</label> <span ng-show="edit"> <input type="text" class="except" ng-model="option.label"> <button class="btn btn-sm" ng-click="edit = false"> <span class="glyphicon glyphicon-ok green"></span> </button> </span> <input type="radio" name="{{module.name}}" value="{{option.value}}" /> <button type="button" class="btn btn-danger btn-sm" ng-click="removeOption(moduleIndex, $index)"> <span class="glyphicon glyphicon-minus"></span> </button> </div> </span> <!--Checkbox select--> <span ng-if="module.type == 1" ng-repeat="option in module.options"> <div ng-init="edit = false"> <label ng-show="!edit" ng-click="edit = true">{{option.label}}</label> <span ng-show="edit"> <input type="text" class="except" ng-model="option.label"> <button class="btn btn-sm" ng-click="edit = false"> <span class="glyphicon glyphicon-ok green"></span> </button> </span> <input type="checkbox" name="{{module.name}}" value="{{option.value}}" /> <button type="button" class="btn btn-danger btn-sm" ng-click="removeOption(moduleIndex, $index)"> <span class="glyphicon glyphicon-minus"></span> </button> </div> </span> <!--Numberbox--> <span ng-if="module.type == 2" ng-repeat="option in module.options"> <div ng-init="module.label_edit = false" class="numberdiv"> <label ng-show="!module.label_edit" ng-click="module.label_edit = true">{{module.label}}</label> <span ng-show="module.label_edit"> <input type="text" class="except" ng-model="module.label"> <button class="btn btn-sm" ng-click="module.label_edit = false;"> <span class="glyphicon glyphicon-ok green"></span> </button> </span> <input type="number" class="number other" /> <span ng-init="module.unit_edit = false"> <span ng-show="!module.unit_edit" ng-click="module.unit_edit = true">{{module.unit}}</span> <span ng-show="module.unit_edit"> <input type="text" class="except" ng-model="module.unit"> <button class="btn btn-sm" ng-click="module.unit_edit = false;"> <span class="glyphicon glyphicon-ok green"></span> </button> </span> </span> </div> </span> <button type="button" class="btn btn-success btn-sm" ng-click="addNewOption($index)"> <span class="glyphicon glyphicon-plus"></span> </button> </div> <hr> </span> <select ng-model="newoption"> <option selected value="-1">Please select</option> <option value="0">Radio select</option> <option value="1">Checkbox select</option> <option value="2">Numberbox</option> <option value="3">Option ranking</option> <option value="4">Dropdown</option> <option value="5">Textbox</option> <option value="6">Textarea</option> </select> <button type="button" class="btn btn-success btn-sm" ng-click="newOptionSelect()"> <span class="glyphicon glyphicon-plus"></span> Add Element </button> </div> </body> </html>