From 3b5d75133b9e7ef5e59d7f4ecace43bbcd14bf77 Mon Sep 17 00:00:00 2001
From: Joe Fiorini <joe@joefiorini.com>
Date: Fri, 31 Jul 2015 12:21:28 -0400
Subject: [PATCH] Move all survey code to job-templates module

---
 awx/ui/client/src/app.js                      |   2 -
 awx/ui/client/src/controllers/JobTemplates.js |   4 +-
 awx/ui/client/src/forms.js                    |   2 -
 awx/ui/client/src/forms/SurveyQuestion.js     | 304 ----------
 awx/ui/client/src/helpers.js                  |   2 -
 awx/ui/client/src/helpers/JobSubmission.js    |   8 +-
 awx/ui/client/src/job-templates/main.js       |   5 +-
 .../src/job-templates/survey-maker/main.js    |  12 +
 .../survey-maker/questions/edit.factory.js    |  99 ++++
 .../questions/finalize.factory.js             | 185 ++++++
 .../survey-maker/questions/main.js            |   7 +
 .../job-templates/survey-maker/shared/main.js |   5 +
 .../shared/question-definition.form.js        | 303 ++++++++++
 .../survey-maker/surveys/add.factory.js       |  25 +
 .../survey-maker/surveys/delete.factory.js    |  63 ++
 .../survey-maker/surveys/edit.factory.js      |  80 +++
 .../survey-maker/surveys/init.factory.js}     | 537 +-----------------
 .../survey-maker/surveys/main.js              |  13 +
 .../survey-maker/surveys/show.factory.js      |  84 +++
 19 files changed, 906 insertions(+), 834 deletions(-)
 delete mode 100644 awx/ui/client/src/forms/SurveyQuestion.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/main.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/questions/edit.factory.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/questions/finalize.factory.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/questions/main.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/shared/main.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/shared/question-definition.form.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/surveys/add.factory.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/surveys/delete.factory.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/surveys/edit.factory.js
 rename awx/ui/client/src/{helpers/Survey.js => job-templates/survey-maker/surveys/init.factory.js} (50%)
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/surveys/main.js
 create mode 100644 awx/ui/client/src/job-templates/survey-maker/surveys/show.factory.js

diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js
index 2804ca7f09..362e89770a 100644
--- a/awx/ui/client/src/app.js
+++ b/awx/ui/client/src/app.js
@@ -177,14 +177,12 @@ var tower = angular.module('Tower', [
     'LogViewerOptionsDefinition',
     'EventViewerHelper',
     'HostEventsViewerHelper',
-    'SurveyHelper',
     'JobDetailHelper',
     'SocketIO',
     'lrInfiniteScroll',
     'LoadConfigHelper',
     'SocketHelper',
     'AboutAnsibleHelpModal',
-    'SurveyQuestionFormDefinition',
     'PortalJobsListDefinition',
 
 
diff --git a/awx/ui/client/src/controllers/JobTemplates.js b/awx/ui/client/src/controllers/JobTemplates.js
index 9b579bf00b..93fbc9175a 100644
--- a/awx/ui/client/src/controllers/JobTemplates.js
+++ b/awx/ui/client/src/controllers/JobTemplates.js
@@ -654,7 +654,7 @@ export function JobTemplatesAdd($filter, $scope, $rootScope, $compile, $location
 JobTemplatesAdd.$inject = ['$filter', '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobTemplateForm',
     'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope',
     'GetBasePath', 'InventoryList', 'CredentialList', 'ProjectList', 'LookUpInit',
-    'md5Setup', 'ParseTypeChange', 'Wait', 'Empty', 'ToJSON', 'CallbackHelpInit', 'SurveyControllerInit', 'Prompt', 'GetChoices'
+    'md5Setup', 'ParseTypeChange', 'Wait', 'Empty', 'ToJSON', 'CallbackHelpInit', 'initSurvey', 'Prompt', 'GetChoices'
 ];
 
 
@@ -1231,5 +1231,5 @@ JobTemplatesEdit.$inject = ['$filter', '$scope', '$rootScope', '$compile', '$loc
     'ReturnToCaller', 'ClearScope', 'InventoryList', 'CredentialList', 'ProjectList', 'LookUpInit',
     'GetBasePath', 'md5Setup', 'ParseTypeChange', 'JobStatusToolTip', 'FormatDate', 'Wait', 'Stream', 'Empty', 'Prompt',
     'ParseVariableString', 'ToJSON', 'SchedulesControllerInit', 'JobsControllerInit', 'JobsListUpdate', 'GetChoices',
-    'SchedulesListInit', 'SchedulesList', 'CallbackHelpInit', 'PlaybookRun' , 'SurveyControllerInit'
+    'SchedulesListInit', 'SchedulesList', 'CallbackHelpInit', 'PlaybookRun' , 'initSurvey'
 ];
diff --git a/awx/ui/client/src/forms.js b/awx/ui/client/src/forms.js
index 1620543189..5ac8de52d0 100644
--- a/awx/ui/client/src/forms.js
+++ b/awx/ui/client/src/forms.js
@@ -27,7 +27,6 @@ import Permissions from "./forms/Permissions";
 import ProjectStatus from "./forms/ProjectStatus";
 import Projects from "./forms/Projects";
 import Source from "./forms/Source";
-import SurveyQuestion from "./forms/SurveyQuestion";
 import Teams from "./forms/Teams";
 import Users from "./forms/Users";
 
@@ -56,7 +55,6 @@ export
         ProjectStatus,
         Projects,
         Source,
-        SurveyQuestion,
         Teams,
         Users
     };
diff --git a/awx/ui/client/src/forms/SurveyQuestion.js b/awx/ui/client/src/forms/SurveyQuestion.js
deleted file mode 100644
index 4d575799b0..0000000000
--- a/awx/ui/client/src/forms/SurveyQuestion.js
+++ /dev/null
@@ -1,304 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
- /**
- * @ngdoc function
- * @name forms.function:Questions
- * @description This form is for adding a question
-*/
-
-export default
-    angular.module('SurveyQuestionFormDefinition', [])
-        .value('SurveyQuestionForm', {
-
-            addTitle: 'Add Question',
-            editTitle: 'Edit Question',
-            base: 'survey_question',
-            name: 'survey_question',
-            well: true,
-            twoColumns: true,
-            breadcrumbs: false,
-
-        fields: {
-            question_name: {
-                realName: 'question_text',
-                label: 'Name',
-                type: 'text',
-                addRequired: true,
-                editRequired: true,
-                column: 1,
-                awSurveyQuestion: true
-            },
-            question_description: {
-                realName: 'question_description',
-                label: 'Description',
-                type: 'text',
-                addRequired: false,
-                editRequired: false,
-                column: 1
-            },
-            variable: {
-                ealName: 'variable',
-                type: 'custom',
-                control:'<label for="variable"><span class="label-text prepend-asterisk"> Answer Variable Name</span>'+
-                    '<a id="awp-variable" href="" aw-pop-over="<p>The suggested format for variable names is lowercase and underscore-separated. Also note that this field cannot accept variable names with spaces.</p><p>For example: <br>foo_bar<br>'+
-                    'user_id<br>host_name<br><div class=&quot;popover-footer&quot;><span class=&quot;key&quot;>esc</span> or click to close</div>" '+
-                    'data-placement="right" data-container="body" data-title="Answer Variable Name" class="help-link" data-original-title="" title="" tabindex="-1"><i class="fa fa-question-circle"></i></a> </label>'+
-                    '<div><input type="text" ng-model="variable" name="variable" id="survey_question_variable" class="form-control ng-pristine ng-invalid ng-invalid-required" required="" aw-survey-variable-name>'+
-                    '<div class="error ng-hide" id="survey_question-variable-required-error" ng-show="survey_question_form.variable.$dirty && survey_question_form.variable.$error.required">Please enter an answer variable name.</div>'+
-                    '<div class="error ng-hide" id="survey_question-variable-variable-error" ng-show="survey_question_form.variable.$dirty && survey_question_form.variable.$error.variable">Please remove the illegal character from the survey question variable name.</div>'+
-                    '<div class="error ng-hide" id=survey_question-variable-duplicate-error" ng-show="duplicate">This question variable is already in use.  Please enter a different variable name.</div>' +
-                    '<div class="error api-error ng-binding" id="survey_question-variable-api-error" ng-bind="variable_api_error"></div>'+
-                    '</div>',
-                addRequired: true,
-                editRequired: true,
-                column: 1
-            },
-            type: {
-                realName: 'answer_type',
-                label: 'Answer Type',
-                type: 'select',
-                defaultText: 'Choose an answer type',
-                ngOptions: 'answer_types.name for answer_types in answer_types track by answer_types.type',
-                addRequired: true,
-                editRequired: true,
-                column: 2,
-                ngChange: 'typeChange()'
-            },
-            choices: {
-                realName: 'answer_options',
-                label: 'Multiple Choice Options',
-                type: 'textarea',
-                rows: 3,
-                addRequired: true,
-                editRequired: true,
-                ngRequired: "type.type=== 'multiselect' || type.type=== 'multiplechoice' " ,
-                ngShow: 'type.type=== "multiselect" || type.type=== "multiplechoice" ',
-                awPopOver: '<p>Type an option on each line.</p>'+
-                            '<p>For example the following input:<br><br>Apple<br>\n Banana<br>\n Cherry<br><br>would be displayed as:</p>\n'+
-                            '<ol><li>Apple</li><li>Banana</li><li>Cherry</li></ol>',
-                dataTitle: 'Multiple Choice Options',
-                dataPlacement: 'right',
-                dataContainer: "body",
-                column: 2
-            },
-            text_options: {
-                realName: 'answer_options',
-                type: 'custom',
-                control:'<div class="row">'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="text_min"><span class="label-text">Minimum Length</span></label><input id="text_min" type="number" name="text_min" ng-model="text_min" min=0 aw-min="0" aw-max="text_max" class="form-control" integer />'+
-                                    '<div class="error" ng-show="survey_question_form.text_min.$error.integer || survey_question_form.text_min.$error.number">The minimum length you entered is not a valid number.  Please enter a whole number.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.text_min.$error.awMax">The minimium length is too high.  Please enter a lower number.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.text_min.$error.awMin">The minimum length is too low.  Please enter a positive number.</div>'+
-                                '</div>'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="text_max"><span class="label-text">Maximum Length</span></label><input id="text_max" type="number" name="text_max" ng-model="text_max" aw-min="text_min || 0" min=0 class="form-control" integer >'+
-                                    '<div class="error" ng-show="survey_question_form.text_max.$error.integer || survey_question_form.text_max.$error.number">The maximum length you entered is not a valid number.  Please enter a whole nnumber.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.text_max.$error.awMin">The maximum length is too low.  Please enter a number larger than the minimum length you set.</div>'+
-                                '</div>'+
-                            '</div>',
-                ngShow: 'type.type==="text" ',
-                addRequired: true,
-                editRequired: true,
-                column: 2
-            },
-            textarea_options: {
-                realName: 'answer_options',
-                type: 'custom',
-                control:'<div class="row">'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="textarea_min"><span class="label-text">Minimum Length</span></label><input id="textarea_min" type="number" name="textarea_min" ng-model="textarea_min"  min=0 aw-min="0" aw-max="textarea_max" class="form-control" integer />'+
-                                    '<div class="error" ng-show="survey_question_form.textarea_min.$error.integer || survey_question_form.textarea_min.$error.number">The minimum length you entered is not a valid number.  Please enter a whole number.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.textarea_min.$error.awMax">The minimium length is too high.  Please enter a lower number.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.textarea_min.$error.awMin">The minimum length is too low.  Please enter a positive number.</div>'+
-                                '</div>'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="textarea_max"><span class="label-text">Maximum Length</span></label><input id="textarea_max" type="number" name="textarea_max" ng-model="textarea_max" aw-min="textarea_min || 0" min=0 class="form-control" integer >'+
-                                    '<div class="error" ng-show="survey_question_form.textarea_max.$error.integer || survey_question_form.textarea_max.$error.number">The maximum length you entered is not a valid number.  Please enter a whole number.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.textarea_max.$error.awMin">The maximum length is too low.  Please enter a number larger than the minimum length you set.</div>'+
-                                '</div>'+
-                            '</div>',
-                ngShow: 'type.type==="textarea" ',
-                addRequired: true,
-                editRequired: true,
-                column: 2
-            },
-            password_options: {
-                realName: 'answer_options',
-                type: 'custom',
-                control:'<div class="row">'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="password_min"><span class="label-text">Minimum Length</span></label><input id="password_min" type="number" name="password_min" ng-model="password_min" min=0 aw-min="0" aw-max="password_max" class="form-control" integer />'+
-                                    '<div class="error" ng-show="survey_question_form.password_min.$error.integer || survey_question_form.password_min.$error.number">The minimum length you entered is not a valid number.  Please enter a whole number.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.password_min.$error.awMax">The minimium length is too high.  Please enter a lower number.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.password_min.$error.awMin">The minimum length is too low.  Please enter a positive number.</div>'+
-                                '</div>'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="password_max"><span class="label-text">Maximum Length</span></label><input id="password_max" type="number" name="password_max" ng-model="password_max" aw-min="password_min || 0" min=0 class="form-control" integer >'+
-                                    '<div class="error" ng-show="survey_question_form.password_max.$error.integer || survey_question_form.password_max.$error.number">The maximum length you entered is not a valid number.  Please enter a whole number.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.password_max.$error.awMin">The maximum length is too low.  Please enter a number larger than the minimum length you set.</div>'+
-                                '</div>'+
-                            '</div>',
-                ngShow: 'type.type==="password" ',
-                addRequired: true,
-                editRequired: true,
-                column: 2
-            },
-            int_options: {
-                realName: 'answer_options',
-                type: 'custom',
-                control:'<div class="row">'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="minimum"><span class="label-text">Minimum</span></label><input id="int_min" type="number" name="int_min" ng-model="int_min" aw-max="int_max" class="form-control" integer >'+
-                                    '<div class="error" ng-show="survey_question_form.int_min.$error.integer || survey_question_form.int_min.$error.number">Please enter a valid integer.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.int_min.$error.awMax">Please enter a smaller integer.</div>'+
-                                '</div>'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="minimum"><span class="label-text">Maximum</span></label><input id="int_max" type="number" name="int_max" ng-model="int_max" aw-min="int_min" class="form-control" integer >'+
-                                    '<div class="error" ng-show="survey_question_form.int_max.$error.integer || survey_question_form.int_max.$error.number">Please enter a valid integer.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.int_max.$error.awMin">Please enter a larger integer.</div>'+
-                                '</div>'+
-                            '</div>',
-                ngShow: 'type.type==="integer" ',
-                addRequired: true,
-                editRequired: true,
-                column: 2
-            },
-            float_options: {
-                realName: 'answer_options',
-                type: 'custom',
-                control: '<div class="row">'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="minimum"><span class="label-text">Minimum</span></label><input id="float_min" type="number" name="float_min" ng-model="float_min" class="form-control" smart-float aw-max="float_max">'+
-                                    '<div class="error" ng-show="survey_question_form.float_min.$error.float || survey_question_form.float_min.$error.number">Please enter a valid float.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.float_min.$error.awMax">Please enter a smaller float.</div>'+
-                                '</div>'+
-                                '<div class="col-xs-6">'+
-                                    '<label for="maximum"><span class="label-text">Maximum</span></label><input id="float_max" type="number" name="float_max" ng-model="float_max" class="form-control" smart-float  aw-min="float_min">'+
-                                    '<div class="error" ng-show="survey_question_form.float_max.$error.float">Please enter a valid float.</div>'+
-                                    '<div class="error" ng-show="survey_question_form.float_max.$error.awMin">Please enter a larger float.</div>'+
-
-                                '</div>'+
-                            '</div>',
-                ngShow: 'type.type==="float" ',
-                addRequired: true,
-                editRequired: true,
-                column: 2
-            },
-            default:{
-                realName: 'default_answer',
-                type: 'custom' ,
-                control: '<div class="form-group" >'+
-                    '<label for="default"><span class="label-text">Default Answer</span></label>'+
-                    '<div>'+
-                    '<input type="text" ng-model="default" name="default" id="default" class="form-control">'+
-                    '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="invalidChoice">Please enter an answer from the choices listed.</div>' +
-                    '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="minTextError">The answer is shorter than the minimium length. Please make the answer longer. </div>' +
-                    '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="maxTextError">The answer is longer than the maximum length. Please make the answer shorter.  </div>' +
-                    '<div class="error api-error ng-binding" id="survey_question-default-api-error" ng-bind="default_api_error"></div>'+
-                    '</div>'+
-                    '</div>',
-                column: 2,
-                ngShow: 'type.type === "text" || type.type === "multiplechoice" '
-            },
-            default_multiselect: {
-                realName: 'default_answer' ,
-                type: 'custom',
-                control: '<div class="form-group">'+
-                    '<label for="default_multiselect"><span class="label-text">Default Answer</span></label>'+
-                    '<div>'+
-                    '<textarea rows="3" ng-model="default_multiselect" name="default_multiselect" class="form-control ng-pristine ng-valid" id="default_multiselect" aw-watch=""></textarea>'+
-                    '<div class="error ng-hide" id=survey_question-default_multiselect-duplicate-error" ng-show="invalidChoice">Please enter an answer/answers from the choices listed.</div>' +
-                    '<div class="error api-error ng-binding" id="survey_question-default_multiselect-api-error" ng-bind="default_multiselect_api_error"></div>'+
-                    '</div>'+
-                    '</div>',
-                column: 2,
-                ngShow: 'type.type==="multiselect" '
-            },
-            default_int: {
-                realName: 'default_answer',
-                type: 'custom',
-                control:  '<div>'+
-                    '<label for="default_int"><span class="label-text">Default Answer</span></label>'+
-                    '<input type="number" ng-model="default_int" name="default_int" aw-min="int_min" aw-max="int_max"  class="form-control" integer />'+
-                    '<div class="error" ng-show="survey_question_form.default_int.$error.number || survey_question_form.default_int.$error.integer">Please enter a valid integer.</div>'+
-                    '<div class="error" ng-show="survey_question_form.default_int.$error.awMin || survey_question_form.default_int.$error.awMax"> Please enter a value in the range of {{int_min}} to {{int_max}}.</div>'+
-                    '</div>',
-                column: 2,
-                ngShow: 'type.type === "integer" '
-            },
-            default_float: {
-                realName: 'default_answer',
-                type: 'custom',
-                control: '<div>'+
-                    '<label for="default_float"><span class="label-text">Default Answer</span></label>'+
-                    '<input type="number" ng-model="default_float" name="default_float" aw-min="float_min" aw-max="float_max"  class="form-control"  />'+
-                    '<div class="error" ng-show="survey_question_form.default_float.$error.number || survey_question_form.default_float.$error.float">Please enter a valid float.</div>'+
-                    '<div class="error" ng-show="survey_question_form.default_float.$error.awMin || survey_question_form.default_float.$error.awMax"> Please enter a value in the range of {{float_min}} to {{float_max}}!</div>'+
-                    '</div>',
-                column: 2,
-                ngShow: 'type.type=== "float" '
-            },
-            default_textarea: {
-                realName: "default_answer" ,
-                type: 'custom',
-                control: '<div class="form-group">'+
-                    '<label for="default_textarea"><span class="label-text">Default Answer</span></label>'+
-                    '<div>'+
-                    '<textarea rows="3" ng-model="default_textarea" name="default_textarea" class="form-control ng-valid ng-dirty" id="default_textarea"></textarea>'+
-                    '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="minTextError">The answer is shorter than the minimium length. Please make the answer longer. </div>' +
-                    '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="maxTextError">The answer is longer than the maximum length. Please make the answer shorter.  </div>' +
-                    '<div class="error api-error ng-binding" id="survey_question-default_textarea-api-error" ng-bind="default_textarea_api_error"></div>'+
-                    '</div>'+
-                    '</div>',
-                    column : 2,
-                    ngShow: 'type.type === "textarea" '
-            },
-            default_password: {
-                realName: 'default_answer' ,
-                type: 'custom' ,
-                control: '<div class="form-group">'+
-                    '<label for="default_password"><span class="label-text">Default Answer</span></label>'+
-                    '<div>'+
-                    '<div class="input-group">'+
-                    '<span class="input-group-btn">'+
-                    '<button class="btn btn-default show_input_button" id="default_password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="toggleInput(&quot;#default_password&quot;)" data-original-title="" title="">Show</button>'+
-                    '</span>'+
-                    '<input id="default_password" type="password" ng-model="default_password" name="default_password" class="form-control ng-pristine ng-valid-api-error ng-invalid" autocomplete="false">'+
-                    '</div>'+
-                    '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="minTextError">The answer is shorter than the minimium length. Please make the answer longer. </div>' +
-                    '<div class="error ng-hide" id=survey_question-default-password-duplicate-error" ng-show="maxTextError">The answer is longer than the maximum length. Please make the answer shorter.  </div>' +
-                    '<div class="error api-error ng-binding" id="survey_question-default-password-api-error" ng-bind="default_api_error"></div>'+
-                    '</div>'+
-                    '</div>',
-                column: 2,
-                ngShow: 'type.type === "password" '
-            },
-            required: {
-                realName: 'required_answer',
-                label: 'Required',
-                type: 'checkbox',
-                addRequired: false,
-                editRequired: false,
-                column: 2
-            }
-        },
-        buttons: {
-            question_cancel : {
-                label: 'Cancel',
-                'class' : 'btn btn-default',
-                ngClick: 'cancelQuestion($event)'
-            },
-            submit_question: {
-                ngClick: 'submitQuestion($event)',
-                ngDisabled: true,
-                'class': 'btn btn-sm btn-primary',
-                label: 'Add Question'
-            }
-        }
-
-      });
diff --git a/awx/ui/client/src/helpers.js b/awx/ui/client/src/helpers.js
index 05a3f5b12f..be783b45a9 100644
--- a/awx/ui/client/src/helpers.js
+++ b/awx/ui/client/src/helpers.js
@@ -32,7 +32,6 @@ import Projects from "./helpers/Projects";
 import Schedules from "./helpers/Schedules";
 import Selection from "./helpers/Selection";
 import SocketHelper from "./helpers/SocketHelper";
-import Survey from "./helpers/Survey";
 import Users from "./helpers/Users";
 import Variables from "./helpers/Variables";
 import ApiDefaults from "./helpers/api-defaults";
@@ -71,7 +70,6 @@ export
         Schedules,
         Selection,
         SocketHelper,
-        Survey,
         Users,
         Variables,
         ApiDefaults,
diff --git a/awx/ui/client/src/helpers/JobSubmission.js b/awx/ui/client/src/helpers/JobSubmission.js
index 473848b3cc..345183ab82 100644
--- a/awx/ui/client/src/helpers/JobSubmission.js
+++ b/awx/ui/client/src/helpers/JobSubmission.js
@@ -497,10 +497,10 @@ function($compile, Rest, GetBasePath, TextareaResize,CreateDialog, GenerateForm,
       };
     }])
 
-    .factory('PromptForSurvey', ['$filter', '$compile', 'Wait', 'Alert', 'CredentialForm', 'CreateLaunchDialog', 'SurveyControllerInit' , 'GetBasePath', 'Rest' , 'Empty',
-    'GenerateForm', 'ShowSurveyModal', 'ProcessErrors', '$routeParams' ,
-    function($filter, $compile, Wait, Alert, CredentialForm, CreateLaunchDialog, SurveyControllerInit, GetBasePath, Rest, Empty,
-      GenerateForm, ShowSurveyModal, ProcessErrors, $routeParams) {
+    .factory('PromptForSurvey', ['$filter', '$compile', 'Wait', 'Alert', 'CredentialForm', 'CreateLaunchDialog', 'GetBasePath', 'Rest' , 'Empty',
+    'GenerateForm', 'ProcessErrors', '$routeParams' ,
+    function($filter, $compile, Wait, Alert, CredentialForm, CreateLaunchDialog, GetBasePath, Rest, Empty,
+      GenerateForm, ProcessErrors, $routeParams) {
         return function(params) {
           var html = params.html || "",
           id= params.id,
diff --git a/awx/ui/client/src/job-templates/main.js b/awx/ui/client/src/job-templates/main.js
index f38fce2023..f69679e350 100644
--- a/awx/ui/client/src/job-templates/main.js
+++ b/awx/ui/client/src/job-templates/main.js
@@ -5,7 +5,10 @@
  *************************************************/
 
 import deleteJobTemplate from './delete-job-template.service';
+import surveyMaker from './survey-maker/main';
 
 export default
-    angular.module('jobTemplates', [])
+    angular.module('jobTemplates',
+                   [    surveyMaker.name
+                   ])
         .service('deleteJobTemplate', deleteJobTemplate);
diff --git a/awx/ui/client/src/job-templates/survey-maker/main.js b/awx/ui/client/src/job-templates/survey-maker/main.js
new file mode 100644
index 0000000000..38d30679d9
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/main.js
@@ -0,0 +1,12 @@
+import listGenerator from '../../shared/list-generator/main';
+import questions from './questions/main';
+import surveys from './surveys/main';
+import shared from './shared/main';
+
+export default
+    angular.module('jobTemplates.surveyMaker',
+                   [ listGenerator.name,
+                     questions.name,
+                     surveys.name,
+                     shared.name
+                   ]);
diff --git a/awx/ui/client/src/job-templates/survey-maker/questions/edit.factory.js b/awx/ui/client/src/job-templates/survey-maker/questions/edit.factory.js
new file mode 100644
index 0000000000..6a4ab46eea
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/questions/edit.factory.js
@@ -0,0 +1,99 @@
+export default
+    function EditQuestion(GetBasePath, Rest, Wait, ProcessErrors, $compile, GenerateForm, SurveyQuestionForm) {
+        return function(params) {
+
+            var scope = params.scope,
+                index = params.index,
+                element,
+                tmpVar,
+                i,
+                question = params.question, //scope.survey_questions[index],
+                form = SurveyQuestionForm;
+
+            $('#survey-save-button').attr('disabled', 'disabled');
+            angular.element('#survey_question_question_cancel_btn').trigger('click');
+            $('#add_question_btn').hide();
+            // $('#new_question .aw-form-well').remove();
+            element = $('.question_final:eq('+index+')');
+            element.css('opacity', 1.0);
+            element.empty();
+            scope.text_min = null;
+            scope.text_max = null;
+            scope.int_min = null;
+            scope.int_max = null;
+            scope.float_min = null;
+            scope.float_max = null;
+            scope.password_min = null;
+            scope.password_max = null;
+            scope.pwcheckbox = false;
+
+            if (scope.removeFillQuestionForm) {
+                scope.removeFillQuestionForm();
+            }
+            scope.removeFillQuestionForm = scope.$on('FillQuestionForm', function() {
+                for( var fld in form.fields){
+                    scope[fld] = question[fld];
+                    if(form.fields[fld].type === 'select'){
+                        for (i = 0; i < scope.answer_types.length; i++) {
+                            if (question[fld] === scope.answer_types[i].type) {
+                                scope[fld] = scope.answer_types[i];
+                            }
+                        }
+                    }
+                }
+                if( question.type === 'text'){
+                    scope.text_min = question.min;
+                    scope.text_max = question.max;
+                    scope.default_text = question.default;
+                }
+                if( question.type === 'textarea'){
+                    scope.textarea_min = question.min;
+                    scope.textarea_max = question.max;
+                    scope.default_textarea= question.default;
+                }
+                if(question.type === 'password'){
+                    scope.password_min = question.min;
+                    scope.password_max = question.max;
+                    scope.default_password = question.default;
+                }
+                if( question.type === 'integer'){
+                    scope.int_min = question.min;
+                    scope.int_max = question.max;
+                    scope.default_int = question.default;
+                }
+                else if( question.type  === 'float'  ) {
+                    scope.float_min = question.min;
+                    scope.float_max = question.max;
+                    scope.default_float = question.default;
+
+                }
+                else if ( question.type === 'multiselect'){
+                    scope.default_multiselect = question.default;
+                }
+            });
+
+            if (scope.removeGenerateForm) {
+                scope.removeGenerateForm();
+            }
+            scope.removeGenerateForm = scope.$on('GenerateForm', function() {
+                tmpVar = scope.mode;
+                GenerateForm.inject(form, { id: 'question_'+index, mode: 'edit' , related: false, scope:scope, breadCrumbs: false});
+                scope.mode = tmpVar;
+                scope.$emit('FillQuestionForm');
+            });
+
+
+            scope.$emit('GenerateForm');
+
+        };
+    }
+
+EditQuestion.$inject =
+    [   'GetBasePath',
+        'Rest',
+        'Wait',
+        'ProcessErrors',
+        '$compile',
+        'GenerateForm',
+        'questionDefinitionForm'
+    ];
diff --git a/awx/ui/client/src/job-templates/survey-maker/questions/finalize.factory.js b/awx/ui/client/src/job-templates/survey-maker/questions/finalize.factory.js
new file mode 100644
index 0000000000..9c81ec8d37
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/questions/finalize.factory.js
@@ -0,0 +1,185 @@
+/**
+ * Takes a finalized question and displays it on the survey maker page
+ *
+ * FinalizeQuestion({
+ *     scope:       $scope containing list of survey form fields
+ *     question: question object that was submitted by the question form
+ *     id:          id of job template that survey is attached to
+ *     callback:    $scope.$emit label to call when delete is completed
+ * })
+ *
+ */
+export default
+    function FinalizeQuestion(GetBasePath, Rest, Wait, ProcessErrors, $compile, Empty, $filter) {
+        return function(params) {
+
+            var scope = params.scope,
+                question = params.question,
+                index = params.index,
+                required,
+                element,
+                choices,
+                i,
+                checked,
+                max,
+                min,
+                defaultValue,
+                answers,
+                html = "";
+
+            question.index = index;
+            question.question_name = $filter('sanitize')(question.question_name);
+            question.question_description = (question.question_description) ? $filter('sanitize')(question.question_description) : undefined;
+
+
+            if(!$('#question_'+question.index+':eq(0)').is('div')){
+                html+='<div id="question_'+question.index+'" class="question_final row"></div>';
+                $('#finalized_questions').append(html);
+            }
+
+            required = (question.required===true) ? "prepend-asterisk" : "";
+            html = '<div class="question_title col-xs-12">';
+            html += '<label for="'+question.variable+'"><span class="label-text '+required+'"> '+question.question_name+'</span></label>';
+            html += '</div>';
+
+            if(!Empty(question.question_description)){
+                html += '<div class="col-xs-12 description"><i>'+question.question_description+'</i></div>\n';
+            }
+
+            if(question.type === 'text' ){
+                defaultValue = (question.default) ? question.default : "";
+                defaultValue = $filter('sanitize')(defaultValue);
+                defaultValue = scope.serialize(defaultValue);
+                html+='<div class="row">'+
+                    '<div class="col-xs-8">'+
+                    '<input type="text" placeholder="'+defaultValue+'"  class="form-control ng-pristine ng-invalid-required ng-invalid final" required="" readonly>'+
+                    '</div></div>';
+            }
+            if(question.type === "textarea"){
+                defaultValue = (question.default) ? question.default : (question.default_textarea) ? question.default_textarea:  "" ;
+                defaultValue =  $filter('sanitize')(defaultValue);
+                defaultValue = scope.serialize(defaultValue);
+                html+='<div class="row">'+
+                    '<div class="col-xs-8 input_area">'+
+                    '<textarea class="form-control ng-pristine ng-invalid-required ng-invalid final" required="" rows="3" readonly>'+defaultValue+'</textarea>'+
+                    '</div></div>';
+            }
+            if(question.type === 'multiplechoice' || question.type === "multiselect"){
+                choices = question.choices.split(/\n/);
+                element = (question.type==="multiselect") ? "checkbox" : 'radio';
+                question.default = (question.default) ? question.default : (question.default_multiselect) ? question.default_multiselect : "" ;
+                answers = question.default.split(/\n/);
+                html += '<div class="input_area">';
+                for( i = 0; i<choices.length; i++){
+                    checked = (!Empty(question.default) && $.inArray(choices[i], answers) !== -1) ? "checked" : "";
+                    choices[i] = $filter('sanitize')(choices[i]);
+                    choices[i] = scope.serialize(choices[i]);
+                    html+= '<input  type="'+element+'"  class="mc" ng-required="!'+question.variable+'" name="'+question.variable+ ' " id="'+question.variable+'" value=" '+choices[i]+' " '+checked+' disabled>' +
+                        '<span>'+choices[i] +'</span><br>' ;
+                }
+                html += '</div>';
+            }
+
+            if(question.type === 'password'){
+              defaultValue = (question.default) ? question.default : "";
+              defaultValue = $filter('sanitize')(defaultValue);
+              defaultValue = scope.serialize(defaultValue);
+              html+='<div class="row">'+
+                  ' <div class="col-xs-8 input_area input-group">'+
+                  '<span class="input-group-btn">'+
+                  '<button class="btn btn-default survey-maker-password show_input_button" id="'+question.variable+'_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="toggleInput(&quot;#'+question.variable+'&quot;)" data-original-title="" title="">ABC</button>'+
+                  '</span>'+
+                  '<input id="'+ question.variable +'" type="password" ng-model="default_password" name="'+ question.variable +'" class="form-control ng-pristine ng-valid-api-error ng-invalid" autocomplete="false" readonly>'+
+                  '</div>'+
+                  '</div>';
+            }
+
+            if(question.type === 'integer'){
+                min = (!Empty(question.min)) ? question.min : "";
+                max = (!Empty(question.max)) ? question.max : "" ;
+                defaultValue = (!Empty(question.default)) ? question.default : (!Empty(question.default_int)) ? question.default_int : "" ;
+                html+='<div class="row">'+
+                    '<div class="col-xs-8 input_area">'+
+                    '<input type="number" class="final form-control" name="'+question.variable+'" min="'+min+'" max="'+max+'" value="'+defaultValue+'" readonly>'+
+                    '</div></div>';
+
+            }
+            if(question.type === "float"){
+                min = (!Empty(question.min)) ? question.min : "";
+                max = (!Empty(question.max)) ? question.max : "" ;
+                defaultValue = (!Empty(question.default)) ? question.default : (!Empty(question.default_float)) ? question.default_float : "" ;
+                html+='<div class="row">'+
+                    '<div class="col-xs-8 input_area">'+
+                    '<input type="number" class="final form-control" name="'+question.variable+'" min="'+min+'" max="'+max+'" value="'+defaultValue+'" readonly>'+
+                    '</div></div>';
+
+            }
+            html += '<div class="col-xs-12 text-right question_actions">';
+            html += '<a id="edit-question_'+question.index+'" data-placement="top" aw-tool-tip="Edit question" data-original-title="" title=""><i class="fa fa-pencil"></i> </a>';
+            html += '<a id="delete-question_'+question.index+'" data-placement="top" aw-tool-tip="Delete question" data-original-title="" title=""><i class="fa fa-trash-o"></i> </a>';
+            html += '<a id="question-up_'+question.index+'" data-placement="top" aw-tool-tip="Move up" data-original-title="" title=""><i class="fa fa-arrow-up"></i> </a>';
+            html += '<a id="question-down_'+question.index+'" data-placement="top" aw-tool-tip="Move down" data-original-title="" title=""><i class="fa fa-arrow-down"></i> </a>';
+            html+='</div></div>';
+
+            $('#question_'+question.index).append(html);
+
+            element = angular.element(document.getElementById('question_'+question.index));
+            // // element.html(html);
+            //element.css('opacity', 0.7);
+            $compile(element)(scope);
+            // var questionScope = scope.$new;
+
+            $('#add_question_btn').show();
+            $('#add_question_btn').removeAttr('disabled');
+            $('#add_question_btn').focus();
+            $('#survey_maker_save_btn').removeAttr('disabled');
+
+            // Sometimes the $event.target returns the anchor element that wraps the icon, and sometimes the icon itself
+            // is returned. So for each icon click event we check to see which target the user clicked, and depending no which one
+            // they clicked, we move up the dom hierarchy to get the index on the question. Ultimatley the object that is passed to
+            // each one of these functions should be the index of the question that the user is trying to perform an action on.
+            $('#delete-question_'+question.index+'').on('click', function($event){
+                if($event.target.nodeName==="A"){
+                    scope.deleteQuestion($event.target.parentElement.parentElement.id.split('_')[1]);
+                }
+                else if($event.target.nodeName === "I"){
+                    scope.deleteQuestion($event.target.parentElement.parentElement.parentElement.id.split('_')[1]);
+                }
+            });
+            $('#edit-question_'+question.index+'').on('click', function($event){
+                if($event.target.nodeName==="A"){
+                    scope.editQuestion($event.target.parentElement.parentElement.id.split('_')[1]);
+                }
+                else if($event.target.nodeName === "I"){
+                    scope.editQuestion($event.target.parentElement.parentElement.parentElement.id.split('_')[1]);
+                }
+            });
+            $('#question-up_'+question.index+'').on('click', function($event){
+                if($event.target.nodeName==="A"){
+                    scope.questionUp($event.target.parentElement.parentElement.id.split('_')[1]);
+                }
+                else if($event.target.nodeName === "I"){
+                    scope.questionUp($event.target.parentElement.parentElement.parentElement.id.split('_')[1]);
+                }
+            });
+            $('#question-down_'+question.index+'').on('click', function($event){
+                if($event.target.nodeName==="A"){
+                    scope.questionDown($event.target.parentElement.parentElement.id.split('_')[1]);
+                }
+                else if($event.target.nodeName === "I"){
+                    scope.questionDown($event.target.parentElement.parentElement.parentElement.id.split('_')[1]);
+                }
+
+            });
+        };
+    }
+
+FinalizeQuestion.$inject =
+    [   'GetBasePath',
+        'Rest',
+        'Wait',
+        'ProcessErrors',
+        '$compile',
+        'Empty',
+        '$filter'
+    ];
diff --git a/awx/ui/client/src/job-templates/survey-maker/questions/main.js b/awx/ui/client/src/job-templates/survey-maker/questions/main.js
new file mode 100644
index 0000000000..f1bbd8bc7c
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/questions/main.js
@@ -0,0 +1,7 @@
+import finalize from './finalize.factory';
+import edit from './edit.factory';
+
+export default
+    angular.module('jobTemplates.surveyMaker.questions', [])
+        .factory('finalizeQuestion', finalize)
+        .factory('editQuestion', edit);
diff --git a/awx/ui/client/src/job-templates/survey-maker/shared/main.js b/awx/ui/client/src/job-templates/survey-maker/shared/main.js
new file mode 100644
index 0000000000..8ee46b0bcf
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/shared/main.js
@@ -0,0 +1,5 @@
+import form from './question-definition.form';
+
+export default
+    angular.module('jobTemplates.surveyMaker.shared', [])
+        .value('questionDefinitionForm', form);
diff --git a/awx/ui/client/src/job-templates/survey-maker/shared/question-definition.form.js b/awx/ui/client/src/job-templates/survey-maker/shared/question-definition.form.js
new file mode 100644
index 0000000000..01bfff1f5f
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/shared/question-definition.form.js
@@ -0,0 +1,303 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+ /**
+ * @ngdoc function
+ * @name forms.function:Questions
+ * @description This form is for adding a question
+*/
+
+export default
+    {
+
+        addTitle: 'Add Question',
+        editTitle: 'Edit Question',
+        base: 'survey_question',
+        name: 'survey_question',
+        well: true,
+        twoColumns: true,
+        breadcrumbs: false,
+
+    fields: {
+        question_name: {
+            realName: 'question_text',
+            label: 'Name',
+            type: 'text',
+            addRequired: true,
+            editRequired: true,
+            column: 1,
+            awSurveyQuestion: true
+        },
+        question_description: {
+            realName: 'question_description',
+            label: 'Description',
+            type: 'text',
+            addRequired: false,
+            editRequired: false,
+            column: 1
+        },
+        variable: {
+            ealName: 'variable',
+            type: 'custom',
+            control:'<label for="variable"><span class="label-text prepend-asterisk"> Answer Variable Name</span>'+
+                '<a id="awp-variable" href="" aw-pop-over="<p>The suggested format for variable names is lowercase and underscore-separated. Also note that this field cannot accept variable names with spaces.</p><p>For example: <br>foo_bar<br>'+
+                'user_id<br>host_name<br><div class=&quot;popover-footer&quot;><span class=&quot;key&quot;>esc</span> or click to close</div>" '+
+                'data-placement="right" data-container="body" data-title="Answer Variable Name" class="help-link" data-original-title="" title="" tabindex="-1"><i class="fa fa-question-circle"></i></a> </label>'+
+                '<div><input type="text" ng-model="variable" name="variable" id="survey_question_variable" class="form-control ng-pristine ng-invalid ng-invalid-required" required="" aw-survey-variable-name>'+
+                '<div class="error ng-hide" id="survey_question-variable-required-error" ng-show="survey_question_form.variable.$dirty && survey_question_form.variable.$error.required">Please enter an answer variable name.</div>'+
+                '<div class="error ng-hide" id="survey_question-variable-variable-error" ng-show="survey_question_form.variable.$dirty && survey_question_form.variable.$error.variable">Please remove the illegal character from the survey question variable name.</div>'+
+                '<div class="error ng-hide" id=survey_question-variable-duplicate-error" ng-show="duplicate">This question variable is already in use.  Please enter a different variable name.</div>' +
+                '<div class="error api-error ng-binding" id="survey_question-variable-api-error" ng-bind="variable_api_error"></div>'+
+                '</div>',
+            addRequired: true,
+            editRequired: true,
+            column: 1
+        },
+        type: {
+            realName: 'answer_type',
+            label: 'Answer Type',
+            type: 'select',
+            defaultText: 'Choose an answer type',
+            ngOptions: 'answer_types.name for answer_types in answer_types track by answer_types.type',
+            addRequired: true,
+            editRequired: true,
+            column: 2,
+            ngChange: 'typeChange()'
+        },
+        choices: {
+            realName: 'answer_options',
+            label: 'Multiple Choice Options',
+            type: 'textarea',
+            rows: 3,
+            addRequired: true,
+            editRequired: true,
+            ngRequired: "type.type=== 'multiselect' || type.type=== 'multiplechoice' " ,
+            ngShow: 'type.type=== "multiselect" || type.type=== "multiplechoice" ',
+            awPopOver: '<p>Type an option on each line.</p>'+
+                        '<p>For example the following input:<br><br>Apple<br>\n Banana<br>\n Cherry<br><br>would be displayed as:</p>\n'+
+                        '<ol><li>Apple</li><li>Banana</li><li>Cherry</li></ol>',
+            dataTitle: 'Multiple Choice Options',
+            dataPlacement: 'right',
+            dataContainer: "body",
+            column: 2
+        },
+        text_options: {
+            realName: 'answer_options',
+            type: 'custom',
+            control:'<div class="row">'+
+                            '<div class="col-xs-6">'+
+                                '<label for="text_min"><span class="label-text">Minimum Length</span></label><input id="text_min" type="number" name="text_min" ng-model="text_min" min=0 aw-min="0" aw-max="text_max" class="form-control" integer />'+
+                                '<div class="error" ng-show="survey_question_form.text_min.$error.integer || survey_question_form.text_min.$error.number">The minimum length you entered is not a valid number.  Please enter a whole number.</div>'+
+                                '<div class="error" ng-show="survey_question_form.text_min.$error.awMax">The minimium length is too high.  Please enter a lower number.</div>'+
+                                '<div class="error" ng-show="survey_question_form.text_min.$error.awMin">The minimum length is too low.  Please enter a positive number.</div>'+
+                            '</div>'+
+                            '<div class="col-xs-6">'+
+                                '<label for="text_max"><span class="label-text">Maximum Length</span></label><input id="text_max" type="number" name="text_max" ng-model="text_max" aw-min="text_min || 0" min=0 class="form-control" integer >'+
+                                '<div class="error" ng-show="survey_question_form.text_max.$error.integer || survey_question_form.text_max.$error.number">The maximum length you entered is not a valid number.  Please enter a whole nnumber.</div>'+
+                                '<div class="error" ng-show="survey_question_form.text_max.$error.awMin">The maximum length is too low.  Please enter a number larger than the minimum length you set.</div>'+
+                            '</div>'+
+                        '</div>',
+            ngShow: 'type.type==="text" ',
+            addRequired: true,
+            editRequired: true,
+            column: 2
+        },
+        textarea_options: {
+            realName: 'answer_options',
+            type: 'custom',
+            control:'<div class="row">'+
+                            '<div class="col-xs-6">'+
+                                '<label for="textarea_min"><span class="label-text">Minimum Length</span></label><input id="textarea_min" type="number" name="textarea_min" ng-model="textarea_min"  min=0 aw-min="0" aw-max="textarea_max" class="form-control" integer />'+
+                                '<div class="error" ng-show="survey_question_form.textarea_min.$error.integer || survey_question_form.textarea_min.$error.number">The minimum length you entered is not a valid number.  Please enter a whole number.</div>'+
+                                '<div class="error" ng-show="survey_question_form.textarea_min.$error.awMax">The minimium length is too high.  Please enter a lower number.</div>'+
+                                '<div class="error" ng-show="survey_question_form.textarea_min.$error.awMin">The minimum length is too low.  Please enter a positive number.</div>'+
+                            '</div>'+
+                            '<div class="col-xs-6">'+
+                                '<label for="textarea_max"><span class="label-text">Maximum Length</span></label><input id="textarea_max" type="number" name="textarea_max" ng-model="textarea_max" aw-min="textarea_min || 0" min=0 class="form-control" integer >'+
+                                '<div class="error" ng-show="survey_question_form.textarea_max.$error.integer || survey_question_form.textarea_max.$error.number">The maximum length you entered is not a valid number.  Please enter a whole number.</div>'+
+                                '<div class="error" ng-show="survey_question_form.textarea_max.$error.awMin">The maximum length is too low.  Please enter a number larger than the minimum length you set.</div>'+
+                            '</div>'+
+                        '</div>',
+            ngShow: 'type.type==="textarea" ',
+            addRequired: true,
+            editRequired: true,
+            column: 2
+        },
+        password_options: {
+            realName: 'answer_options',
+            type: 'custom',
+            control:'<div class="row">'+
+                            '<div class="col-xs-6">'+
+                                '<label for="password_min"><span class="label-text">Minimum Length</span></label><input id="password_min" type="number" name="password_min" ng-model="password_min" min=0 aw-min="0" aw-max="password_max" class="form-control" integer />'+
+                                '<div class="error" ng-show="survey_question_form.password_min.$error.integer || survey_question_form.password_min.$error.number">The minimum length you entered is not a valid number.  Please enter a whole number.</div>'+
+                                '<div class="error" ng-show="survey_question_form.password_min.$error.awMax">The minimium length is too high.  Please enter a lower number.</div>'+
+                                '<div class="error" ng-show="survey_question_form.password_min.$error.awMin">The minimum length is too low.  Please enter a positive number.</div>'+
+                            '</div>'+
+                            '<div class="col-xs-6">'+
+                                '<label for="password_max"><span class="label-text">Maximum Length</span></label><input id="password_max" type="number" name="password_max" ng-model="password_max" aw-min="password_min || 0" min=0 class="form-control" integer >'+
+                                '<div class="error" ng-show="survey_question_form.password_max.$error.integer || survey_question_form.password_max.$error.number">The maximum length you entered is not a valid number.  Please enter a whole number.</div>'+
+                                '<div class="error" ng-show="survey_question_form.password_max.$error.awMin">The maximum length is too low.  Please enter a number larger than the minimum length you set.</div>'+
+                            '</div>'+
+                        '</div>',
+            ngShow: 'type.type==="password" ',
+            addRequired: true,
+            editRequired: true,
+            column: 2
+        },
+        int_options: {
+            realName: 'answer_options',
+            type: 'custom',
+            control:'<div class="row">'+
+                            '<div class="col-xs-6">'+
+                                '<label for="minimum"><span class="label-text">Minimum</span></label><input id="int_min" type="number" name="int_min" ng-model="int_min" aw-max="int_max" class="form-control" integer >'+
+                                '<div class="error" ng-show="survey_question_form.int_min.$error.integer || survey_question_form.int_min.$error.number">Please enter a valid integer.</div>'+
+                                '<div class="error" ng-show="survey_question_form.int_min.$error.awMax">Please enter a smaller integer.</div>'+
+                            '</div>'+
+                            '<div class="col-xs-6">'+
+                                '<label for="minimum"><span class="label-text">Maximum</span></label><input id="int_max" type="number" name="int_max" ng-model="int_max" aw-min="int_min" class="form-control" integer >'+
+                                '<div class="error" ng-show="survey_question_form.int_max.$error.integer || survey_question_form.int_max.$error.number">Please enter a valid integer.</div>'+
+                                '<div class="error" ng-show="survey_question_form.int_max.$error.awMin">Please enter a larger integer.</div>'+
+                            '</div>'+
+                        '</div>',
+            ngShow: 'type.type==="integer" ',
+            addRequired: true,
+            editRequired: true,
+            column: 2
+        },
+        float_options: {
+            realName: 'answer_options',
+            type: 'custom',
+            control: '<div class="row">'+
+                            '<div class="col-xs-6">'+
+                                '<label for="minimum"><span class="label-text">Minimum</span></label><input id="float_min" type="number" name="float_min" ng-model="float_min" class="form-control" smart-float aw-max="float_max">'+
+                                '<div class="error" ng-show="survey_question_form.float_min.$error.float || survey_question_form.float_min.$error.number">Please enter a valid float.</div>'+
+                                '<div class="error" ng-show="survey_question_form.float_min.$error.awMax">Please enter a smaller float.</div>'+
+                            '</div>'+
+                            '<div class="col-xs-6">'+
+                                '<label for="maximum"><span class="label-text">Maximum</span></label><input id="float_max" type="number" name="float_max" ng-model="float_max" class="form-control" smart-float  aw-min="float_min">'+
+                                '<div class="error" ng-show="survey_question_form.float_max.$error.float">Please enter a valid float.</div>'+
+                                '<div class="error" ng-show="survey_question_form.float_max.$error.awMin">Please enter a larger float.</div>'+
+
+                            '</div>'+
+                        '</div>',
+            ngShow: 'type.type==="float" ',
+            addRequired: true,
+            editRequired: true,
+            column: 2
+        },
+        default:{
+            realName: 'default_answer',
+            type: 'custom' ,
+            control: '<div class="form-group" >'+
+                '<label for="default"><span class="label-text">Default Answer</span></label>'+
+                '<div>'+
+                '<input type="text" ng-model="default" name="default" id="default" class="form-control">'+
+                '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="invalidChoice">Please enter an answer from the choices listed.</div>' +
+                '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="minTextError">The answer is shorter than the minimium length. Please make the answer longer. </div>' +
+                '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="maxTextError">The answer is longer than the maximum length. Please make the answer shorter.  </div>' +
+                '<div class="error api-error ng-binding" id="survey_question-default-api-error" ng-bind="default_api_error"></div>'+
+                '</div>'+
+                '</div>',
+            column: 2,
+            ngShow: 'type.type === "text" || type.type === "multiplechoice" '
+        },
+        default_multiselect: {
+            realName: 'default_answer' ,
+            type: 'custom',
+            control: '<div class="form-group">'+
+                '<label for="default_multiselect"><span class="label-text">Default Answer</span></label>'+
+                '<div>'+
+                '<textarea rows="3" ng-model="default_multiselect" name="default_multiselect" class="form-control ng-pristine ng-valid" id="default_multiselect" aw-watch=""></textarea>'+
+                '<div class="error ng-hide" id=survey_question-default_multiselect-duplicate-error" ng-show="invalidChoice">Please enter an answer/answers from the choices listed.</div>' +
+                '<div class="error api-error ng-binding" id="survey_question-default_multiselect-api-error" ng-bind="default_multiselect_api_error"></div>'+
+                '</div>'+
+                '</div>',
+            column: 2,
+            ngShow: 'type.type==="multiselect" '
+        },
+        default_int: {
+            realName: 'default_answer',
+            type: 'custom',
+            control:  '<div>'+
+                '<label for="default_int"><span class="label-text">Default Answer</span></label>'+
+                '<input type="number" ng-model="default_int" name="default_int" aw-min="int_min" aw-max="int_max"  class="form-control" integer />'+
+                '<div class="error" ng-show="survey_question_form.default_int.$error.number || survey_question_form.default_int.$error.integer">Please enter a valid integer.</div>'+
+                '<div class="error" ng-show="survey_question_form.default_int.$error.awMin || survey_question_form.default_int.$error.awMax"> Please enter a value in the range of {{int_min}} to {{int_max}}.</div>'+
+                '</div>',
+            column: 2,
+            ngShow: 'type.type === "integer" '
+        },
+        default_float: {
+            realName: 'default_answer',
+            type: 'custom',
+            control: '<div>'+
+                '<label for="default_float"><span class="label-text">Default Answer</span></label>'+
+                '<input type="number" ng-model="default_float" name="default_float" aw-min="float_min" aw-max="float_max"  class="form-control"  />'+
+                '<div class="error" ng-show="survey_question_form.default_float.$error.number || survey_question_form.default_float.$error.float">Please enter a valid float.</div>'+
+                '<div class="error" ng-show="survey_question_form.default_float.$error.awMin || survey_question_form.default_float.$error.awMax"> Please enter a value in the range of {{float_min}} to {{float_max}}!</div>'+
+                '</div>',
+            column: 2,
+            ngShow: 'type.type=== "float" '
+        },
+        default_textarea: {
+            realName: "default_answer" ,
+            type: 'custom',
+            control: '<div class="form-group">'+
+                '<label for="default_textarea"><span class="label-text">Default Answer</span></label>'+
+                '<div>'+
+                '<textarea rows="3" ng-model="default_textarea" name="default_textarea" class="form-control ng-valid ng-dirty" id="default_textarea"></textarea>'+
+                '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="minTextError">The answer is shorter than the minimium length. Please make the answer longer. </div>' +
+                '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="maxTextError">The answer is longer than the maximum length. Please make the answer shorter.  </div>' +
+                '<div class="error api-error ng-binding" id="survey_question-default_textarea-api-error" ng-bind="default_textarea_api_error"></div>'+
+                '</div>'+
+                '</div>',
+                column : 2,
+                ngShow: 'type.type === "textarea" '
+        },
+        default_password: {
+            realName: 'default_answer' ,
+            type: 'custom' ,
+            control: '<div class="form-group">'+
+                '<label for="default_password"><span class="label-text">Default Answer</span></label>'+
+                '<div>'+
+                '<div class="input-group">'+
+                '<span class="input-group-btn">'+
+                '<button class="btn btn-default show_input_button" id="default_password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="toggleInput(&quot;#default_password&quot;)" data-original-title="" title="">Show</button>'+
+                '</span>'+
+                '<input id="default_password" type="password" ng-model="default_password" name="default_password" class="form-control ng-pristine ng-valid-api-error ng-invalid" autocomplete="false">'+
+                '</div>'+
+                '<div class="error ng-hide" id=survey_question-default-duplicate-error" ng-show="minTextError">The answer is shorter than the minimium length. Please make the answer longer. </div>' +
+                '<div class="error ng-hide" id=survey_question-default-password-duplicate-error" ng-show="maxTextError">The answer is longer than the maximum length. Please make the answer shorter.  </div>' +
+                '<div class="error api-error ng-binding" id="survey_question-default-password-api-error" ng-bind="default_api_error"></div>'+
+                '</div>'+
+                '</div>',
+            column: 2,
+            ngShow: 'type.type === "password" '
+        },
+        required: {
+            realName: 'required_answer',
+            label: 'Required',
+            type: 'checkbox',
+            addRequired: false,
+            editRequired: false,
+            column: 2
+        }
+    },
+    buttons: {
+        question_cancel : {
+            label: 'Cancel',
+            'class' : 'btn btn-default',
+            ngClick: 'cancelQuestion($event)'
+        },
+        submit_question: {
+            ngClick: 'submitQuestion($event)',
+            ngDisabled: true,
+            'class': 'btn btn-sm btn-primary',
+            label: 'Add Question'
+        }
+    }
+
+  };
diff --git a/awx/ui/client/src/job-templates/survey-maker/surveys/add.factory.js b/awx/ui/client/src/job-templates/survey-maker/surveys/add.factory.js
new file mode 100644
index 0000000000..62b8576d06
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/surveys/add.factory.js
@@ -0,0 +1,25 @@
+export default
+    function AddFactory($location, $routeParams, ShowSurveyModal, Wait) {
+        return function(params) {
+            var scope = params.scope;
+
+            if (scope.removeDialogReady) {
+                scope.removeDialogReady();
+            }
+            scope.removeDialogReady = scope.$on('DialogReady', function() {
+                $('#survey-modal-dialog').dialog('open');
+                scope.addQuestion();
+            });
+            Wait('start');
+            $('#form-container').empty();
+            scope.resetForm();
+            ShowSurveyModal({ title: "Add Survey", scope: scope, callback: 'DialogReady' });
+        };
+    }
+
+AddFactory.$inject =
+    [   '$location',
+        '$routeParams',
+        'showSurvey',
+        'Wait'
+    ];
diff --git a/awx/ui/client/src/job-templates/survey-maker/surveys/delete.factory.js b/awx/ui/client/src/job-templates/survey-maker/surveys/delete.factory.js
new file mode 100644
index 0000000000..4c753816c6
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/surveys/delete.factory.js
@@ -0,0 +1,63 @@
+/**
+ * Delete a survey. Prompts user to confirm delete
+ *
+ * DeleteSurvey({
+ *     scope:       $scope containing list of survey form fields
+ *     id:          id of job template that survey is attached to
+ *     callback:    $scope.$emit label to call when delete is completed
+ * })
+ *
+ */
+export default
+    function DeleteSurvey(GetBasePath, Rest, Wait, ProcessErrors) {
+        return function(params) {
+
+            var scope = params.scope,
+                id = params.id,
+                // callback = params.callback,
+                url;
+
+
+            if (scope.removeSurveyDeleted) {
+                scope.removeSurveyDeleted();
+            }
+            scope.$on('SurveyDeleted', function(){
+                scope.survey_name = "";
+                scope.survey_description = "";
+                scope.survey_questions = [];
+                Wait('stop');
+                scope.survey_exists = false;
+                $('#job_templates_delete_survey_btn').hide();
+                $('#job_templates_edit_survey_btn').hide();
+                $('#job_templates_create_survey_btn').show();
+            });
+
+
+            Wait('start');
+
+            if(scope.mode==="add"){
+                scope.$emit("SurveyDeleted");
+
+            } else {
+                url = GetBasePath('job_templates')+ id + '/survey_spec/';
+
+                Rest.setUrl(url);
+                Rest.destroy()
+                    .success(function () {
+                        scope.$emit("SurveyDeleted");
+
+                    })
+                    .error(function (data, status) {
+                        ProcessErrors(scope, data, status, { hdr: 'Error!',
+                            msg: 'Failed to delete survey. DELETE returned status: ' + status });
+                    });
+            }
+        };
+    }
+
+DeleteSurvey.$inject =
+    [   'GetBasePath',
+        'Rest',
+        'Wait',
+        'ProcessErrors'
+    ];
diff --git a/awx/ui/client/src/job-templates/survey-maker/surveys/edit.factory.js b/awx/ui/client/src/job-templates/survey-maker/surveys/edit.factory.js
new file mode 100644
index 0000000000..857136096f
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/surveys/edit.factory.js
@@ -0,0 +1,80 @@
+export default
+    function EditFactory($routeParams, SchedulerInit, ShowSurveyModal, Wait, Rest, ProcessErrors, GetBasePath, GenerateForm,
+        Empty, AddSurvey) {
+        return function(params) {
+            var scope = params.scope,
+                id = params.id,
+                tempSurv = {},
+                url = GetBasePath('job_templates') + id + '/survey_spec/', i;
+
+            if (scope.removeDialogReady) {
+                scope.removeDialogReady();
+            }
+            scope.removeDialogReady = scope.$on('DialogReady', function() {
+                $('#survey-modal-dialog').dialog('open');
+            });
+
+            scope.resetForm();
+            Wait('start');
+            //for adding a job template:
+            if(scope.mode === 'add'){
+                tempSurv.survey_name = scope.survey_name;
+                tempSurv.survey_description = scope.survey_description;
+                tempSurv.survey_questions = scope.survey_questions;
+
+                ShowSurveyModal({ title: "Edit Survey", scope: scope, callback: 'DialogReady' });
+
+                // scope.survey_name = tempSurv.survey_name;
+                // scope.survey_description = tempSurv.survey_description;
+
+                for(i=0; i<tempSurv.survey_questions.length; i++){
+                    scope.finalizeQuestion(tempSurv.survey_questions[i], i);
+                }
+            }
+            //editing an existing job template:
+            else{
+                // Get the existing record
+                Rest.setUrl(url);
+                Rest.get()
+                    .success(function (data) {
+                            if(!Empty(data)){
+                                ShowSurveyModal({ title: "Edit Survey", scope: scope, callback: 'DialogReady' });
+
+                                scope.survey_name = data.name;
+                                scope.survey_description = data.description;
+                                scope.survey_questions = data.spec;
+                                for(i=0; i<scope.survey_questions.length; i++){
+                                    scope.finalizeQuestion(scope.survey_questions[i], i);
+                                }
+                                // scope.addQuestion();
+                                Wait('stop');
+                            } else {
+                                AddSurvey({
+                                    scope: scope
+                                });
+                            }
+
+                        })
+                    .error(function (data, status) {
+                        ProcessErrors(scope, data, status, null,  { hdr: 'Error!',
+                            msg: 'Failed to retrieve survey. GET returned status: ' + status });
+                    });
+
+            }
+        };
+    }
+
+
+EditFactory.$inject =
+    [   '$routeParams',
+        'SchedulerInit',
+        'showSurvey',
+        'Wait',
+        'Rest',
+        'ProcessErrors',
+        'GetBasePath',
+        'GenerateForm',
+        'Empty',
+        'addSurvey'
+    ];
+
diff --git a/awx/ui/client/src/helpers/Survey.js b/awx/ui/client/src/job-templates/survey-maker/surveys/init.factory.js
similarity index 50%
rename from awx/ui/client/src/helpers/Survey.js
rename to awx/ui/client/src/job-templates/survey-maker/surveys/init.factory.js
index 0b70a14229..b710fc0a92 100644
--- a/awx/ui/client/src/helpers/Survey.js
+++ b/awx/ui/client/src/job-templates/survey-maker/surveys/init.factory.js
@@ -1,520 +1,5 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-    /**
- * @ngdoc function
- * @name helpers.function:Survey
- * @description
- *  Schedules Helper
- *
- *  Display the scheduler widget in a dialog
- *
- */
-
-import listGenerator from '../shared/list-generator/main';
-
 export default
-angular.module('SurveyHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper', 'SearchHelper', 'PaginationHelpers', listGenerator.name, 'ModalDialog' ,
-    'GeneratorHelpers', 'sanitizeFilter'])
-
-    .factory('ShowSurveyModal', ['Wait', 'CreateDialog', 'Empty', '$compile' ,
-        function(Wait, CreateDialog, Empty, $compile) {
-        return function(params) {
-            // Set modal dimensions based on viewport width
-
-            var scope = params.scope,
-                callback = params.callback,
-                mode = (params.mode) ? params.mode : "survey-maker",
-                title = params.title,
-                element,
-                target = (mode==='survey-taker') ? 'password-modal' : "survey-modal-dialog",
-                buttons = [{
-                "label": "Cancel",
-                "onClick": function() {
-                    scope.cancelSurvey(this);
-                },
-                "icon": "fa-times",
-                "class": "btn btn-default",
-                "id": "survey-close-button"
-            },{
-                "label": (mode==='survey-taker') ? "Launch" : "Save" ,
-                "onClick": function() {
-                    setTimeout(function(){
-                        scope.$apply(function(){
-                            if(mode==='survey-taker'){
-                                scope.$emit('SurveyTakerCompleted');
-                            } else{
-                                scope.saveSurvey();
-                            }
-                        });
-                    });
-                },
-                "icon":  (mode==='survey-taker') ? "fa-rocket" : "fa-check",
-                "class": "btn btn-primary",
-                "id": "survey-save-button"
-            }];
-
-            CreateDialog({
-                id: target,
-                title: title,
-                scope: scope,
-                buttons: buttons,
-                width: 700,
-                height: 725,
-                minWidth: 400,
-                onClose: function() {
-                    $('#'+target).empty();
-                },
-                onOpen: function() {
-                    Wait('stop');
-                    if(mode!=="survey-taker"){
-                        // if(scope.mode === 'add'){
-                        //     $('#survey-save-button').attr('disabled' , true);
-                        // } else
-                        if(scope.can_edit === false){
-                            $('#survey-save-button').attr('disabled', "disabled");
-                        }
-                        else {
-                            $('#survey-save-button').attr('ng-disabled', "survey_questions.length<1 ");
-                        }
-                        element = angular.element(document.getElementById('survey-save-button'));
-                        $compile(element)(scope);
-
-                    }
-                    if(mode==="survey-taker"){
-                        $('#survey-save-button').attr('ng-disabled',  "survey_taker_form.$invalid");
-                        element = angular.element(document.getElementById('survey-save-button'));
-                        $compile(element)(scope);
-
-                    }
-
-                },
-                callback: callback
-            });
-        };
-    }])
-
-    .factory('EditSurvey', ['$routeParams','SchedulerInit', 'ShowSurveyModal', 'Wait', 'Rest', 'ProcessErrors', 'GetBasePath', 'GenerateForm',
-            'Empty', 'AddSurvey',
-    function($routeParams, SchedulerInit, ShowSurveyModal, Wait, Rest, ProcessErrors, GetBasePath, GenerateForm,
-        Empty, AddSurvey) {
-        return function(params) {
-            var scope = params.scope,
-                id = params.id,
-                tempSurv = {},
-                url = GetBasePath('job_templates') + id + '/survey_spec/', i;
-
-            if (scope.removeDialogReady) {
-                scope.removeDialogReady();
-            }
-            scope.removeDialogReady = scope.$on('DialogReady', function() {
-                $('#survey-modal-dialog').dialog('open');
-            });
-
-            scope.resetForm();
-            Wait('start');
-            //for adding a job template:
-            if(scope.mode === 'add'){
-                tempSurv.survey_name = scope.survey_name;
-                tempSurv.survey_description = scope.survey_description;
-                tempSurv.survey_questions = scope.survey_questions;
-
-                ShowSurveyModal({ title: "Edit Survey", scope: scope, callback: 'DialogReady' });
-
-                // scope.survey_name = tempSurv.survey_name;
-                // scope.survey_description = tempSurv.survey_description;
-
-                for(i=0; i<tempSurv.survey_questions.length; i++){
-                    scope.finalizeQuestion(tempSurv.survey_questions[i], i);
-                }
-            }
-            //editing an existing job template:
-            else{
-                // Get the existing record
-                Rest.setUrl(url);
-                Rest.get()
-                    .success(function (data) {
-                            if(!Empty(data)){
-                                ShowSurveyModal({ title: "Edit Survey", scope: scope, callback: 'DialogReady' });
-
-                                scope.survey_name = data.name;
-                                scope.survey_description = data.description;
-                                scope.survey_questions = data.spec;
-                                for(i=0; i<scope.survey_questions.length; i++){
-                                    scope.finalizeQuestion(scope.survey_questions[i], i);
-                                }
-                                // scope.addQuestion();
-                                Wait('stop');
-                            } else {
-                                AddSurvey({
-                                    scope: scope
-                                });
-                            }
-
-                        })
-                    .error(function (data, status) {
-                        ProcessErrors(scope, data, status, null,  { hdr: 'Error!',
-                            msg: 'Failed to retrieve survey. GET returned status: ' + status });
-                    });
-
-            }
-        };
-    }])
-
-    .factory('AddSurvey', ['$location', '$routeParams', 'SchedulerInit', 'ShowSurveyModal', 'Wait',
-    function($location, $routeParams, SchedulerInit, ShowSurveyModal, Wait) {
-        return function(params) {
-            var scope = params.scope;
-                // callback= params.callback,
-                // base = $location.path().replace(/^\//, '').split('/')[0],
-                // url =  GetBasePath(base),
-                // generator = GenerateForm,
-                // form = SurveyQuestionForm;
-
-            if (scope.removeDialogReady) {
-                scope.removeDialogReady();
-            }
-            scope.removeDialogReady = scope.$on('DialogReady', function() {
-                $('#survey-modal-dialog').dialog('open');
-                scope.addQuestion();
-            });
-            Wait('start');
-            $('#form-container').empty();
-            scope.resetForm();
-            ShowSurveyModal({ title: "Add Survey", scope: scope, callback: 'DialogReady' });
-        };
-    }])
-
-    /**
-     * Delete a survey. Prompts user to confirm delete
-     *
-     * DeleteSurvey({
-     *     scope:       $scope containing list of survey form fields
-     *     id:          id of job template that survey is attached to
-     *     callback:    $scope.$emit label to call when delete is completed
-     * })
-     *
-     */
-    .factory('DeleteSurvey', ['GetBasePath','Rest', 'Wait', 'ProcessErrors',
-    function(GetBasePath, Rest, Wait, ProcessErrors) {
-        return function(params) {
-
-            var scope = params.scope,
-                id = params.id,
-                // callback = params.callback,
-                url;
-
-
-            if (scope.removeSurveyDeleted) {
-                scope.removeSurveyDeleted();
-            }
-            scope.$on('SurveyDeleted', function(){
-                scope.survey_name = "";
-                scope.survey_description = "";
-                scope.survey_questions = [];
-                Wait('stop');
-                scope.survey_exists = false;
-                $('#job_templates_delete_survey_btn').hide();
-                $('#job_templates_edit_survey_btn').hide();
-                $('#job_templates_create_survey_btn').show();
-            });
-
-
-            Wait('start');
-
-            if(scope.mode==="add"){
-                scope.$emit("SurveyDeleted");
-
-            } else {
-                url = GetBasePath('job_templates')+ id + '/survey_spec/';
-
-                Rest.setUrl(url);
-                Rest.destroy()
-                    .success(function () {
-                        scope.$emit("SurveyDeleted");
-
-                    })
-                    .error(function (data, status) {
-                        ProcessErrors(scope, data, status, { hdr: 'Error!',
-                            msg: 'Failed to delete survey. DELETE returned status: ' + status });
-                    });
-            }
-        };
-    }])
-
-/**
-     * Takes a finalized question and displays it on the survey maker page
-     *
-     * FinalizeQuestion({
-     *     scope:       $scope containing list of survey form fields
-     *     question: question object that was submitted by the question form
-     *     id:          id of job template that survey is attached to
-     *     callback:    $scope.$emit label to call when delete is completed
-     * })
-     *
-     */
-    .factory('FinalizeQuestion', ['GetBasePath','Rest', 'Wait', 'ProcessErrors', '$compile', 'Empty', '$filter',
-    function(GetBasePath, Rest, Wait, ProcessErrors, $compile, Empty, $filter) {
-        return function(params) {
-
-            var scope = params.scope,
-                question = params.question,
-                index = params.index,
-                required,
-                element,
-                choices,
-                i,
-                checked,
-                max,
-                min,
-                defaultValue,
-                answers,
-                html = "";
-
-            question.index = index;
-            question.question_name = $filter('sanitize')(question.question_name);
-            question.question_description = (question.question_description) ? $filter('sanitize')(question.question_description) : undefined;
-
-
-            if(!$('#question_'+question.index+':eq(0)').is('div')){
-                html+='<div id="question_'+question.index+'" class="question_final row"></div>';
-                $('#finalized_questions').append(html);
-            }
-
-            required = (question.required===true) ? "prepend-asterisk" : "";
-            html = '<div class="question_title col-xs-12">';
-            html += '<label for="'+question.variable+'"><span class="label-text '+required+'"> '+question.question_name+'</span></label>';
-            html += '</div>';
-
-            if(!Empty(question.question_description)){
-                html += '<div class="col-xs-12 description"><i>'+question.question_description+'</i></div>\n';
-            }
-
-            if(question.type === 'text' ){
-                defaultValue = (question.default) ? question.default : "";
-                defaultValue = $filter('sanitize')(defaultValue);
-                defaultValue = scope.serialize(defaultValue);
-                html+='<div class="row">'+
-                    '<div class="col-xs-8">'+
-                    '<input type="text" placeholder="'+defaultValue+'"  class="form-control ng-pristine ng-invalid-required ng-invalid final" required="" readonly>'+
-                    '</div></div>';
-            }
-            if(question.type === "textarea"){
-                defaultValue = (question.default) ? question.default : (question.default_textarea) ? question.default_textarea:  "" ;
-                defaultValue =  $filter('sanitize')(defaultValue);
-                defaultValue = scope.serialize(defaultValue);
-                html+='<div class="row">'+
-                    '<div class="col-xs-8 input_area">'+
-                    '<textarea class="form-control ng-pristine ng-invalid-required ng-invalid final" required="" rows="3" readonly>'+defaultValue+'</textarea>'+
-                    '</div></div>';
-            }
-            if(question.type === 'multiplechoice' || question.type === "multiselect"){
-                choices = question.choices.split(/\n/);
-                element = (question.type==="multiselect") ? "checkbox" : 'radio';
-                question.default = (question.default) ? question.default : (question.default_multiselect) ? question.default_multiselect : "" ;
-                answers = question.default.split(/\n/);
-                html += '<div class="input_area">';
-                for( i = 0; i<choices.length; i++){
-                    checked = (!Empty(question.default) && $.inArray(choices[i], answers) !== -1) ? "checked" : "";
-                    choices[i] = $filter('sanitize')(choices[i]);
-                    choices[i] = scope.serialize(choices[i]);
-                    html+= '<input  type="'+element+'"  class="mc" ng-required="!'+question.variable+'" name="'+question.variable+ ' " id="'+question.variable+'" value=" '+choices[i]+' " '+checked+' disabled>' +
-                        '<span>'+choices[i] +'</span><br>' ;
-                }
-                html += '</div>';
-            }
-
-            if(question.type === 'password'){
-              defaultValue = (question.default) ? question.default : "";
-              defaultValue = $filter('sanitize')(defaultValue);
-              defaultValue = scope.serialize(defaultValue);
-              html+='<div class="row">'+
-                  ' <div class="col-xs-8 input_area input-group">'+
-                  '<span class="input-group-btn">'+
-                  '<button class="btn btn-default survey-maker-password show_input_button" id="'+question.variable+'_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="toggleInput(&quot;#'+question.variable+'&quot;)" data-original-title="" title="">ABC</button>'+
-                  '</span>'+
-                  '<input id="'+ question.variable +'" type="password" ng-model="default_password" name="'+ question.variable +'" class="form-control ng-pristine ng-valid-api-error ng-invalid" autocomplete="false" readonly>'+
-                  '</div>'+
-                  '</div>';
-            }
-
-            if(question.type === 'integer'){
-                min = (!Empty(question.min)) ? question.min : "";
-                max = (!Empty(question.max)) ? question.max : "" ;
-                defaultValue = (!Empty(question.default)) ? question.default : (!Empty(question.default_int)) ? question.default_int : "" ;
-                html+='<div class="row">'+
-                    '<div class="col-xs-8 input_area">'+
-                    '<input type="number" class="final form-control" name="'+question.variable+'" min="'+min+'" max="'+max+'" value="'+defaultValue+'" readonly>'+
-                    '</div></div>';
-
-            }
-            if(question.type === "float"){
-                min = (!Empty(question.min)) ? question.min : "";
-                max = (!Empty(question.max)) ? question.max : "" ;
-                defaultValue = (!Empty(question.default)) ? question.default : (!Empty(question.default_float)) ? question.default_float : "" ;
-                html+='<div class="row">'+
-                    '<div class="col-xs-8 input_area">'+
-                    '<input type="number" class="final form-control" name="'+question.variable+'" min="'+min+'" max="'+max+'" value="'+defaultValue+'" readonly>'+
-                    '</div></div>';
-
-            }
-            html += '<div class="col-xs-12 text-right question_actions">';
-            html += '<a id="edit-question_'+question.index+'" data-placement="top" aw-tool-tip="Edit question" data-original-title="" title=""><i class="fa fa-pencil"></i> </a>';
-            html += '<a id="delete-question_'+question.index+'" data-placement="top" aw-tool-tip="Delete question" data-original-title="" title=""><i class="fa fa-trash-o"></i> </a>';
-            html += '<a id="question-up_'+question.index+'" data-placement="top" aw-tool-tip="Move up" data-original-title="" title=""><i class="fa fa-arrow-up"></i> </a>';
-            html += '<a id="question-down_'+question.index+'" data-placement="top" aw-tool-tip="Move down" data-original-title="" title=""><i class="fa fa-arrow-down"></i> </a>';
-            html+='</div></div>';
-
-            $('#question_'+question.index).append(html);
-
-            element = angular.element(document.getElementById('question_'+question.index));
-            // // element.html(html);
-            //element.css('opacity', 0.7);
-            $compile(element)(scope);
-            // var questionScope = scope.$new;
-
-            $('#add_question_btn').show();
-            $('#add_question_btn').removeAttr('disabled');
-            $('#add_question_btn').focus();
-            $('#survey_maker_save_btn').removeAttr('disabled');
-
-            // Sometimes the $event.target returns the anchor element that wraps the icon, and sometimes the icon itself
-            // is returned. So for each icon click event we check to see which target the user clicked, and depending no which one
-            // they clicked, we move up the dom hierarchy to get the index on the question. Ultimatley the object that is passed to
-            // each one of these functions should be the index of the question that the user is trying to perform an action on.
-            $('#delete-question_'+question.index+'').on('click', function($event){
-                if($event.target.nodeName==="A"){
-                    scope.deleteQuestion($event.target.parentElement.parentElement.id.split('_')[1]);
-                }
-                else if($event.target.nodeName === "I"){
-                    scope.deleteQuestion($event.target.parentElement.parentElement.parentElement.id.split('_')[1]);
-                }
-            });
-            $('#edit-question_'+question.index+'').on('click', function($event){
-                if($event.target.nodeName==="A"){
-                    scope.editQuestion($event.target.parentElement.parentElement.id.split('_')[1]);
-                }
-                else if($event.target.nodeName === "I"){
-                    scope.editQuestion($event.target.parentElement.parentElement.parentElement.id.split('_')[1]);
-                }
-            });
-            $('#question-up_'+question.index+'').on('click', function($event){
-                if($event.target.nodeName==="A"){
-                    scope.questionUp($event.target.parentElement.parentElement.id.split('_')[1]);
-                }
-                else if($event.target.nodeName === "I"){
-                    scope.questionUp($event.target.parentElement.parentElement.parentElement.id.split('_')[1]);
-                }
-            });
-            $('#question-down_'+question.index+'').on('click', function($event){
-                if($event.target.nodeName==="A"){
-                    scope.questionDown($event.target.parentElement.parentElement.id.split('_')[1]);
-                }
-                else if($event.target.nodeName === "I"){
-                    scope.questionDown($event.target.parentElement.parentElement.parentElement.id.split('_')[1]);
-                }
-
-            });
-        };
-    }])
-
-
-     .factory('EditQuestion', ['GetBasePath','Rest', 'Wait', 'ProcessErrors', '$compile', 'GenerateForm', 'SurveyQuestionForm',
-    function(GetBasePath, Rest, Wait, ProcessErrors, $compile, GenerateForm, SurveyQuestionForm) {
-        return function(params) {
-
-            var scope = params.scope,
-                index = params.index,
-                element,
-                tmpVar,
-                i,
-                question = params.question, //scope.survey_questions[index],
-                form = SurveyQuestionForm;
-
-            $('#survey-save-button').attr('disabled', 'disabled');
-            angular.element('#survey_question_question_cancel_btn').trigger('click');
-            $('#add_question_btn').hide();
-            // $('#new_question .aw-form-well').remove();
-            element = $('.question_final:eq('+index+')');
-            element.css('opacity', 1.0);
-            element.empty();
-            scope.text_min = null;
-            scope.text_max = null;
-            scope.int_min = null;
-            scope.int_max = null;
-            scope.float_min = null;
-            scope.float_max = null;
-            scope.password_min = null;
-            scope.password_max = null;
-            scope.pwcheckbox = false;
-
-            if (scope.removeFillQuestionForm) {
-                scope.removeFillQuestionForm();
-            }
-            scope.removeFillQuestionForm = scope.$on('FillQuestionForm', function() {
-                for( var fld in form.fields){
-                    scope[fld] = question[fld];
-                    if(form.fields[fld].type === 'select'){
-                        for (i = 0; i < scope.answer_types.length; i++) {
-                            if (question[fld] === scope.answer_types[i].type) {
-                                scope[fld] = scope.answer_types[i];
-                            }
-                        }
-                    }
-                }
-                if( question.type === 'text'){
-                    scope.text_min = question.min;
-                    scope.text_max = question.max;
-                    scope.default_text = question.default;
-                }
-                if( question.type === 'textarea'){
-                    scope.textarea_min = question.min;
-                    scope.textarea_max = question.max;
-                    scope.default_textarea= question.default;
-                }
-                if(question.type === 'password'){
-                    scope.password_min = question.min;
-                    scope.password_max = question.max;
-                    scope.default_password = question.default;
-                }
-                if( question.type === 'integer'){
-                    scope.int_min = question.min;
-                    scope.int_max = question.max;
-                    scope.default_int = question.default;
-                }
-                else if( question.type  === 'float'  ) {
-                    scope.float_min = question.min;
-                    scope.float_max = question.max;
-                    scope.default_float = question.default;
-
-                }
-                else if ( question.type === 'multiselect'){
-                    scope.default_multiselect = question.default;
-                }
-            });
-
-            if (scope.removeGenerateForm) {
-                scope.removeGenerateForm();
-            }
-            scope.removeGenerateForm = scope.$on('GenerateForm', function() {
-                tmpVar = scope.mode;
-                GenerateForm.inject(form, { id: 'question_'+index, mode: 'edit' , related: false, scope:scope, breadCrumbs: false});
-                scope.mode = tmpVar;
-                scope.$emit('FillQuestionForm');
-            });
-
-
-            scope.$emit('GenerateForm');
-
-        };
-    }])
-
-    .factory('SurveyControllerInit', ['$location', 'DeleteSurvey', 'EditSurvey', 'AddSurvey', 'GenerateForm', 'SurveyQuestionForm', 'Wait', 'Alert',
-            'GetBasePath', 'Rest', 'ProcessErrors' , '$compile', 'FinalizeQuestion', 'EditQuestion', '$sce',
-        function($location, DeleteSurvey, EditSurvey, AddSurvey, GenerateForm, SurveyQuestionForm, Wait, Alert,
+        function Init($location, DeleteSurvey, EditSurvey, AddSurvey, GenerateForm, SurveyQuestionForm, Wait, Alert,
             GetBasePath, Rest, ProcessErrors, $compile, FinalizeQuestion, EditQuestion, $sce) {
         return function(params) {
             var scope = params.scope,
@@ -1049,4 +534,22 @@ angular.module('SurveyHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper',
             };
 
         };
-    }]);
+    }
+
+Init.$inject =
+    [   '$location',
+        'deleteSurvey',
+        'editSurvey',
+        'addSurvey',
+        'GenerateForm',
+        'questionDefinitionForm',
+        'Wait',
+        'Alert',
+        'GetBasePath',
+        'Rest',
+        'ProcessErrors',
+        '$compile',
+        'finalizeQuestion',
+        'editQuestion',
+        '$sce'
+    ];
diff --git a/awx/ui/client/src/job-templates/survey-maker/surveys/main.js b/awx/ui/client/src/job-templates/survey-maker/surveys/main.js
new file mode 100644
index 0000000000..a16c10073c
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/surveys/main.js
@@ -0,0 +1,13 @@
+import add from './add.factory';
+import edit from './edit.factory';
+import _delete from './delete.factory';
+import init from './init.factory';
+import show from './show.factory';
+
+export default
+    angular.module('jobTemplates.surveyMaker.surveys', [])
+        .factory('showSurvey', show)
+        .factory('addSurvey', add)
+        .factory('editSurvey', edit)
+        .factory('deleteSurvey', _delete)
+        .factory('initSurvey', init);
diff --git a/awx/ui/client/src/job-templates/survey-maker/surveys/show.factory.js b/awx/ui/client/src/job-templates/survey-maker/surveys/show.factory.js
new file mode 100644
index 0000000000..74b0b7fd1c
--- /dev/null
+++ b/awx/ui/client/src/job-templates/survey-maker/surveys/show.factory.js
@@ -0,0 +1,84 @@
+export default
+    function ShowFactory(Wait, CreateDialog, Empty, $compile) {
+        return function(params) {
+            // Set modal dimensions based on viewport width
+
+            var scope = params.scope,
+                callback = params.callback,
+                mode = (params.mode) ? params.mode : "survey-maker",
+                title = params.title,
+                element,
+                target = (mode==='survey-taker') ? 'password-modal' : "survey-modal-dialog",
+                buttons = [{
+                "label": "Cancel",
+                "onClick": function() {
+                    scope.cancelSurvey(this);
+                },
+                "icon": "fa-times",
+                "class": "btn btn-default",
+                "id": "survey-close-button"
+            },{
+                "label": (mode==='survey-taker') ? "Launch" : "Save" ,
+                "onClick": function() {
+                    setTimeout(function(){
+                        scope.$apply(function(){
+                            if(mode==='survey-taker'){
+                                scope.$emit('SurveyTakerCompleted');
+                            } else{
+                                scope.saveSurvey();
+                            }
+                        });
+                    });
+                },
+                "icon":  (mode==='survey-taker') ? "fa-rocket" : "fa-check",
+                "class": "btn btn-primary",
+                "id": "survey-save-button"
+            }];
+
+            CreateDialog({
+                id: target,
+                title: title,
+                scope: scope,
+                buttons: buttons,
+                width: 700,
+                height: 725,
+                minWidth: 400,
+                onClose: function() {
+                    $('#'+target).empty();
+                },
+                onOpen: function() {
+                    Wait('stop');
+                    if(mode!=="survey-taker"){
+                        // if(scope.mode === 'add'){
+                        //     $('#survey-save-button').attr('disabled' , true);
+                        // } else
+                        if(scope.can_edit === false){
+                            $('#survey-save-button').attr('disabled', "disabled");
+                        }
+                        else {
+                            $('#survey-save-button').attr('ng-disabled', "survey_questions.length<1 ");
+                        }
+                        element = angular.element(document.getElementById('survey-save-button'));
+                        $compile(element)(scope);
+
+                    }
+                    if(mode==="survey-taker"){
+                        $('#survey-save-button').attr('ng-disabled',  "survey_taker_form.$invalid");
+                        element = angular.element(document.getElementById('survey-save-button'));
+                        $compile(element)(scope);
+
+                    }
+
+                },
+                callback: callback
+            });
+        };
+    }
+
+ShowFactory.$inject =
+    [   'Wait',
+        'CreateDialog',
+        'Empty',
+        '$compile'
+    ];
+