Open source survey management
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

122 lines
4.7 KiB

  1. <html ng-app="surveybuilder">
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="style.css">
  4. <link rel="stylesheet" type="text/css" href="css/survey_builder.css" />
  5. <link rel="stylesheet" href="css/bootstrap.min.css">
  6. <script src="js/angular.min.js"></script>
  7. <script src="js/builder.js"></script>
  8. <title>Survey Builder</title>
  9. </head>
  10. <body ng-controller="surveybuildercontroller">
  11. <div id="container">
  12. <div id="top">
  13. <h1 style="margin-top: 0px;">Survey Builder</h1>
  14. </div>
  15. <span ng-repeat="module in modules" ng-init="moduleIndex = $index">
  16. <div class="template">
  17. <span ng-init="edit = false">
  18. <h2 ng-show="!edit" ng-click="edit = true">{{module.title}}</h2>
  19. <span ng-show="edit">
  20. <input type="text" class="except" ng-model="module.title">
  21. <button class="btn btn-sm" ng-click="edit = false">
  22. <span class="glyphicon glyphicon-ok green"></span>
  23. </button>
  24. </span>
  25. </span>
  26. <span ng-init="edit_subtext = false">
  27. <p ng-show="!edit_subtext" ng-click="edit_subtext = true">{{module.subtext}}</p>
  28. <br ng-show="edit_subtext">
  29. <span ng-show="edit_subtext">
  30. <input type="text" class="except" ng-model="module.subtext">
  31. <button class="btn btn-sm" ng-click="edit_subtext = false">
  32. <span class="glyphicon glyphicon-ok green"></span>
  33. </button>
  34. </span>
  35. </span>
  36. <!-- Type-specific code -->
  37. <!--Radio Select-->
  38. <span ng-if="module.type == 0" ng-repeat="option in module.options">
  39. <div ng-init="edit = false">
  40. <label ng-show="!edit" ng-click="edit = true">{{option.label}}</label>
  41. <span ng-show="edit">
  42. <input type="text" class="except" ng-model="option.label">
  43. <button class="btn btn-sm" ng-click="edit = false">
  44. <span class="glyphicon glyphicon-ok green"></span>
  45. </button>
  46. </span>
  47. <input type="radio" name="{{module.name}}" value="{{option.value}}" />
  48. <button type="button" class="btn btn-danger btn-sm" ng-click="removeOption(moduleIndex, $index)">
  49. <span class="glyphicon glyphicon-minus"></span>
  50. </button>
  51. </div>
  52. </span>
  53. <!--Checkbox select-->
  54. <span ng-if="module.type == 1" ng-repeat="option in module.options">
  55. <div ng-init="edit = false">
  56. <label ng-show="!edit" ng-click="edit = true">{{option.label}}</label>
  57. <span ng-show="edit">
  58. <input type="text" class="except" ng-model="option.label">
  59. <button class="btn btn-sm" ng-click="edit = false">
  60. <span class="glyphicon glyphicon-ok green"></span>
  61. </button>
  62. </span>
  63. <input type="checkbox" name="{{module.name}}" value="{{option.value}}" />
  64. <button type="button" class="btn btn-danger btn-sm" ng-click="removeOption(moduleIndex, $index)">
  65. <span class="glyphicon glyphicon-minus"></span>
  66. </button>
  67. </div>
  68. </span>
  69. <!--Numberbox-->
  70. <span ng-if="module.type == 2" ng-repeat="option in module.options">
  71. <div ng-init="module.label_edit = false" class="numberdiv">
  72. <label ng-show="!module.label_edit" ng-click="module.label_edit = true">{{module.label}}</label>
  73. <span ng-show="module.label_edit">
  74. <input type="text" class="except" ng-model="module.label">
  75. <button class="btn btn-sm" ng-click="module.label_edit = false;">
  76. <span class="glyphicon glyphicon-ok green"></span>
  77. </button>
  78. </span>
  79. <input type="number" class="number other" />
  80. <span ng-init="module.unit_edit = false">
  81. <span ng-show="!module.unit_edit" ng-click="module.unit_edit = true">{{module.unit}}</span>
  82. <span ng-show="module.unit_edit">
  83. <input type="text" class="except" ng-model="module.unit">
  84. <button class="btn btn-sm" ng-click="module.unit_edit = false;">
  85. <span class="glyphicon glyphicon-ok green"></span>
  86. </button>
  87. </span>
  88. </span>
  89. </div>
  90. </span>
  91. <button type="button" class="btn btn-success btn-sm" ng-click="addNewOption($index)">
  92. <span class="glyphicon glyphicon-plus"></span>
  93. </button>
  94. </div>
  95. <hr>
  96. </span>
  97. <select ng-model="newoption">
  98. <option selected value="-1">Please select</option>
  99. <option value="0">Radio select</option>
  100. <option value="1">Checkbox select</option>
  101. <option value="2">Numberbox</option>
  102. <option value="3">Option ranking</option>
  103. <option value="4">Dropdown</option>
  104. <option value="5">Textbox</option>
  105. <option value="6">Textarea</option>
  106. </select>
  107. <button type="button" class="btn btn-success btn-sm" ng-click="newOptionSelect()">
  108. <span class="glyphicon glyphicon-plus"></span> Add Element
  109. </button>
  110. </div>
  111. </body>
  112. </html>