Geczy/gist:114f3618fb425442344b

## gistfile1.txt
var questionID;
$(function() {
	/*	$("#txt_name").keyup(function(){
			alert($(this).val());
		});*/
	$(document).on('click', '.delete', deleteItem);
	$("#addParent").on('click', addParent); //#add means select the thing which has id add. id is for singular things (only one thing may have id add)

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

		console.log(buttonClicked);

		$(buttonClicked).parent().append('<ul><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#childModal">Add Child</button><button class="delete">Delete</button></ul>');
		// var self = this;

		// alert(self);
		// $(self).parent().append('<ul>hellohellohello</ul>');

		// var elems = document.querySelectorAll(".appendTo");
		// [].forEach.call(elems, function(el) {
		// 	el.classList.remove("hover");
		// });

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

	});

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

});

function addParent() {
	var text = $("#newText").val();
	// alert(text);
	$("#tree")
		.append('<li>' + text +
			'<button type="button" class="btn btn-primary" data-target="#firstQuestionModal" id="addBaseQuestion">Add Base Question</button><button class="delete">Delete</button></li>');
	$("#newText").val('');


	$('#addBaseQuestion').on('click', function(e) {
		$('#firstQuestion').data('findid', $(this));
		$('#firstQuestionModal').modal('toggle');
	})
}


function addChild() {
	$("#addBaseQuestion").hide();

	var text = $("#childText").val();

	// $("#tree").parent().append('<ul><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#childModal">Add Child</button><button class="delete">Delete</button></ul>');
	$("#appendTo").parent().append('<ul><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#childModal">Add Child</button><button class="delete">Delete</button></ul>');

}

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='addParent' 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='firstQuestion' data-dismiss="modal">Save changes</button>
    </div>
</div>
</div>
</div>

<!-- Modal For Child -->

<div class="modal fade" id="childModal" tabindex="-1" role="dialog" aria-labelledby="childModalLabel">
  <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="childModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
        What is the prompt for this question? <br>
        <input type='text' id="childQuestionText"/> <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="choicesChild">
            <input type="text" class="choice"> <br>
            <input type="text" class="choice"> <button class="addChoiceChild">...Add Choice</button> <br>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class='addChild' class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
</div>
</div>
<!-- <input type='text' id="newText"/><button id='addParent'>Add</button> -->

<div id = 'tree'>

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

    <input type="submit" id = "submit-ajax" value="submit">
</div>  -->
</body>
</html>
	var questionID;
	$(function() {
	/* $("#txt_name").keyup(function(){
	alert($(this).val());
	});*/
	$(document).on('click', '.delete', deleteItem);
	$("#addParent").on('click', addParent); //#add means select the thing which has id add. id is for singular things (only one thing may have id add)

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

	console.log(buttonClicked);

	$(buttonClicked).parent().append('<ul><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#childModal">Add Child</button><button class="delete">Delete</button></ul>');
	// var self = this;

	// alert(self);
	// $(self).parent().append('<ul>hellohellohello</ul>');

	// var elems = document.querySelectorAll(".appendTo");
	// [].forEach.call(elems, function(el) {
	// el.classList.remove("hover");
	// });

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

	});

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

	});

	function addParent() {
	var text = $("#newText").val();
	// alert(text);
	$("#tree")
	.append('<li>' + text +
	'<button type="button" class="btn btn-primary" data-target="#firstQuestionModal" id="addBaseQuestion">Add Base Question</button><button class="delete">Delete</button></li>');
	$("#newText").val('');


	$('#addBaseQuestion').on('click', function(e) {
	$('#firstQuestion').data('findid', $(this));
	$('#firstQuestionModal').modal('toggle');
	})
	}


	function addChild() {
	$("#addBaseQuestion").hide();

	var text = $("#childText").val();

	// $("#tree").parent().append('<ul><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#childModal">Add Child</button><button class="delete">Delete</button></ul>');
	$("#appendTo").parent().append('<ul><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#childModal">Add Child</button><button class="delete">Delete</button></ul>');

	}

	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='addParent' 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='firstQuestion' data-dismiss="modal">Save changes</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Modal For Child -->

	<div class="modal fade" id="childModal" tabindex="-1" role="dialog" aria-labelledby="childModalLabel">
	<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="childModalLabel">Modal title</h4>
	</div>
	<div class="modal-body">
	What is the prompt for this question? <br>
	<input type='text' id="childQuestionText"/> <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="choicesChild">
	<input type="text" class="choice"> <br>
	<input type="text" class="choice"> <button class="addChoiceChild">...Add Choice</button> <br>

	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	<button type="button" class='addChild' class="btn btn-primary">Save changes</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- <input type='text' id="newText"/><button id='addParent'>Add</button> -->

	<div id = 'tree'>

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

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