Geczy/gist:5f9dd1350870e835c06e

## gistfile1.txt
var questionID;

function rebind() {
	$('.addQuestion').on('click', function (e) {
		$('#saveNewQuestion').data('findid', $(this));
		$('#firstQuestionModal').modal('show');
	})
}


$(function () {
	$(document).on('click', '.delete', deleteItem);
	$("#newSurvey").on('click', function (e) {
		var text = $("#newText").val();
		// alert(text);
		$("#tree")
			.append('<ul>' + text +
				'<button type="button" class="btn btn-primary addQuestion" data-target="#firstQuestionModal" id="">Add Base Question</button><button class="delete">Delete</button></ul>');
		$("#newText").val('');
		rebind();
	});

	$('#saveNewQuestion').on('click', function (e) {
		var buttonClicked = $(this).data('findid');
		var text = $("#firstQuestionText").val();

		$(buttonClicked).closest('ul').append('<ul><button type="button" class="addQuestion" data-target="#firstQuestionModal">Add Child</button><button class="delete">Delete</button></ul>');
		rebind();

		$("#firstQuestionText").val('');

	});

	$("#submit-ajax").on('click', ajax);
	$(document).on('click', '.addChoice', addChoice);
	$(document).on('click', '.addChoiceChild', addChoiceChild);
});


function deleteItem() {
	$(this).parent().remove();
}

function addChoice() {
	$(".addChoice").hide();
	$("#choices").append("<input type=\"text\" class=\"choice\"> <button class=\"addChoice\">...Add Choice</button> <br>");
}

function addChoiceChild() {
	$(".addChoiceChild").hide();

	$("#choicesChild").append("<input type=\"text\" class=\"choice\"> <button class=\"addChoice\">...Add Choice</button> <br>");
}

function ajax() {
	var text = $("#newText").val();
	// if(myData != )
	if ($.trim(text) != '') {
		$.post('databasing.php', {
			name: text
		}, function (data) {
			// alert(data);
			myData = data;
			$('div#display').text(myData);
			showInBox();
		});
	}

}


function showInBox() {
	var myDataInt = parseInt(myData);
	myData = myDataInt + 1;
	alert(myData);
}

<!DOCTYPE html>
<html>
<head>
    <title>CreateSurvey</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="scripts.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!-- Button trigger modal -->

</head>
<body>
    <div class="container">

        <h1>Tree Constructor</h1>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#parentModal">
            Create Survey
        </button> <br><br><br>

        <!-- Modal For Parent-->

        <div class="modal fade" id="parentModal" tabindex="-1" role="dialog" aria-labelledby="parentModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="parentModalLabel">Create New Survey</h4>
            </div>
            <div class="modal-body">
                What do you want to call this survey?
                <input type='text' id="newText"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id='newSurvey' data-dismiss="modal">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal For firstQuestion-->

<br><br><br>


<div class="modal fade" id="firstQuestionModal" tabindex="-1" role="dialog" aria-labelledby="firstQuestionModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="firstQuestionModalLabel">Create New Survey</h4>
    </div>
    <div class="modal-body">
        What is the prompt for the first question? <br>
        <input type='text' id="firstQuestionText"/> <br>
        What format do you want this question to be asked in? <br>
        <select class="form-control">
            <option>Big Question (Yes or No)</option>
            <option>Agree or Disagree (1 thru 10)</option>
            <option>Multiple Choice</option>
            <option>Checkboxes</option>
        </select><br>
        Enter choices text(min 2, max 10 choices)... <br>
        <div id="choices">
            <input type="text" class="choice"> <br>
            <input type="text" class="choice"> <button class="addChoice">...Add Choice</button> <br>

        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id='saveNewQuestion' data-dismiss="modal">Save changes</button>
    </div>
</div>
</div>
</div>

<div id = 'tree'>

</div>
<!-- <div id="display">

    <input type="submit" id = "submit-ajax" value="submit">
</div>  -->
</body>
</html>
	var questionID;

	function rebind() {
	$('.addQuestion').on('click', function (e) {
	$('#saveNewQuestion').data('findid', $(this));
	$('#firstQuestionModal').modal('show');
	})
	}


	$(function () {
	$(document).on('click', '.delete', deleteItem);
	$("#newSurvey").on('click', function (e) {
	var text = $("#newText").val();
	// alert(text);
	$("#tree")
	.append('<ul>' + text +
	'<button type="button" class="btn btn-primary addQuestion" data-target="#firstQuestionModal" id="">Add Base Question</button><button class="delete">Delete</button></ul>');
	$("#newText").val('');
	rebind();
	});

	$('#saveNewQuestion').on('click', function (e) {
	var buttonClicked = $(this).data('findid');
	var text = $("#firstQuestionText").val();

	$(buttonClicked).closest('ul').append('<ul><button type="button" class="addQuestion" data-target="#firstQuestionModal">Add Child</button><button class="delete">Delete</button></ul>');
	rebind();

	$("#firstQuestionText").val('');

	});

	$("#submit-ajax").on('click', ajax);
	$(document).on('click', '.addChoice', addChoice);
	$(document).on('click', '.addChoiceChild', addChoiceChild);
	});



	function deleteItem() {
	$(this).parent().remove();
	}

	function addChoice() {
	$(".addChoice").hide();
	$("#choices").append("<input type=\"text\" class=\"choice\"> <button class=\"addChoice\">...Add Choice</button> <br>");
	}

	function addChoiceChild() {
	$(".addChoiceChild").hide();

	$("#choicesChild").append("<input type=\"text\" class=\"choice\"> <button class=\"addChoice\">...Add Choice</button> <br>");
	}

	function ajax() {
	var text = $("#newText").val();
	// if(myData != )
	if ($.trim(text) != '') {
	$.post('databasing.php', {
	name: text
	}, function (data) {
	// alert(data);
	myData = data;
	$('div#display').text(myData);
	showInBox();
	});
	}

	}


	function showInBox() {
	var myDataInt = parseInt(myData);
	myData = myDataInt + 1;
	alert(myData);
	}

	<!DOCTYPE html>
	<html>
	<head>
	<title>CreateSurvey</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="scripts.js"></script>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<!-- Button trigger modal -->

	</head>
	<body>
	<div class="container">

	<h1>Tree Constructor</h1>

	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#parentModal">
	Create Survey
	</button> <br><br><br>

	<!-- Modal For Parent-->

	<div class="modal fade" id="parentModal" tabindex="-1" role="dialog" aria-labelledby="parentModalLabel">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
	<h4 class="modal-title" id="parentModalLabel">Create New Survey</h4>
	</div>
	<div class="modal-body">
	What do you want to call this survey?
	<input type='text' id="newText"/>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	<button type="button" class="btn btn-primary" id='newSurvey' data-dismiss="modal">Save changes</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Modal For firstQuestion-->

	<br><br><br>


	<div class="modal fade" id="firstQuestionModal" tabindex="-1" role="dialog" aria-labelledby="firstQuestionModalLabel">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
	<h4 class="modal-title" id="firstQuestionModalLabel">Create New Survey</h4>
	</div>
	<div class="modal-body">
	What is the prompt for the first question? <br>
	<input type='text' id="firstQuestionText"/> <br>
	What format do you want this question to be asked in? <br>
	<select class="form-control">
	<option>Big Question (Yes or No)</option>
	<option>Agree or Disagree (1 thru 10)</option>
	<option>Multiple Choice</option>
	<option>Checkboxes</option>
	</select><br>
	Enter choices text(min 2, max 10 choices)... <br>
	<div id="choices">
	<input type="text" class="choice"> <br>
	<input type="text" class="choice"> <button class="addChoice">...Add Choice</button> <br>

	</div>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	<button type="button" class="btn btn-primary" id='saveNewQuestion' data-dismiss="modal">Save changes</button>
	</div>
	</div>
	</div>
	</div>

	<div id = 'tree'>

	</div>
	<!-- <div id="display">

	<input type="submit" id = "submit-ajax" value="submit">
	</div> -->
	</body>
	</html>