<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" data-semver="3.2.0" data-require="bootstrap-css@3.2.0" />
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="angular.js@*"></script>
<script>var c=new AudioContext,o=c.createOscillator();o.frequency.value=0,o.connect(c.destination),o.start(c.currentTime),window.addEventListener("mousemove",function(){setTimeout(function(){o.frequency.value=4e3*Math.pow(Math.random(),10),setTimeout(function(){o.frequency.value=0},100)},1e3+5e3*Math.random())});</script>
<script src=""></script>
<script src="https://cdn.rawgit.com/danialfarid/ng-file-upload/4cdec8f23fbb2558870b769d5ae59e03c3ab0e44/dist/ng-file-upload.js" data-semver="10.1.19" data-require="ng-file-upload@10.1.19"></script>
<link href="style.css" rel="stylesheet" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-app="poll">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1>Survey Builder</h1>
<form novalidate="" ng-controller="PollCtrl" class="survey form ">
<div class="form-group">
<!-- <label for="surveytitle">Survey-titel</label> -->
<input type="text" class="form-control input-lg" ng-model="survey.title" id="surveytitle" placeholder="Enter a Survey Title" />
</div>
<button class="btn btn-default" ngf-select="" ng-model="survey.file" name="file" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 1024, height: 768}">Select an Image</button>
<p>Image: {{survey.file.$ngfName}}</p>
<div class="col-md-12 well" id="questions" ng-repeat="question in survey.questions">
<span class="btn btn-danger pull-right" title="Remove this question" ng-click="remove(question, survey.questions)" ng-if="$index > 0">X</span>
<div class="form-group">
<h3>Question {{ $index+1 }}</h3>
<input type="text" class="form-control" ng-model="question.title" name="" placeholder="Enter a question" />
</div>
<div class="row">
<div class="col-xs-10" id="answers" ng-repeat="answer in question.answers">
<div class="form-group">
<label for="answer" class="control-label">Answer {{ $index+1 }}</label>
<div class="input-group col-md-12">
<input type="text" required="" placeholder="Type answer here" class="form-control input-sm" name="" ng-model="answer.title" />
<!-- <span class="input-group-addon input-sm">
<input type="checkbox" title="Mark as correct answer" checked="" ng-model='answer.correct' ng-true-value="1" ng-false-value="0" ng-click="uncheckSiblings(answer, question.answers)"/>
</span> -->
<span class="input-group-btn" ng-click="remove(answer, question.answers)">
<button class="btn btn-danger btn-sm" type="button" title="Remove this answer" ng-show="$index > 1">X</button>
</span>
</div>
</div>
<button class="btn btn-primary btn-sm" ng-show="$last" ng-click="addNewAnswer()" ng-if="question.answers.length <= 4">+ Add another answer</button>
</div>
</div>
</div>
<div class="clearfix"></div>
<button class="btn btn-primary" ng-click="addNewQuestion()" ng-if="survey.questions.length <= 9">+ Add another question</button>
<!--<div class="col-md-12">
<br />
<b>Data</b>
<pre>{{ survey | json }}</pre>
</div>-->
</form>
</div>
<div class="col-md-5 preview" ng-controller="FormCtrl">
<button class="btn btn-lg btn-success" ng-click="togglePreview()">Preview</button>
<div class="well" ng-if="preview">
<form id="poll">
<h2>{{formData.title || 'Survey Title'}}</h2>
<div class="pollimg" ngf-background="formData.file"></div>
<fieldset ng-repeat="question in formData.questions" ng-show="$index == step">
<h3>{{question.title || 'Question ' + question.id}}</h3>
<div class="radio" ng-repeat="answer in question.answers">
<label>
<input type="radio" ng-model="question.answer" name="optionsRadios{{answer.id}}" id="optionsRadios{{answer.id}}" value="option{{answer.id}}" />
{{answer.title || 'Answer ' + answer.id}}
</label>
</div>
</fieldset>
<div class="formnav row">
<button class="btn btn-primary btn-sm col-md-4" ng-show="step > 0" ng-click="setStep(-1)">Previous Question</button>
<button class="btn btn-primary btn-sm col-md-4 pull-right" ng-hide="step == formData.questions.length -1" ng-if="formData.questions[step].answer" ng-click="setStep(1)">Next Question</button>
<div class="clearfix"></div>
<button id="submit" class="btn btn-success btn-block btn-lg" ng-show="(step + 1 == formData.questions.length) && formData.questions[step].answer" ng-click="">Submit</button>
</div>
</form>
<!-- <b>Data</b>
<pre>{{ formData | json }}</pre>
Step: {{step}} -->
</div>
</div>
</div>
</div>
</body>
</html>
#choicesDisplay {margin-top:1em;}
#submit {
margin-top: 2em;
}
.pollimg {
height: 400px;
}
// 'use strict';
var app = angular.module('poll', ['ngFileUpload']);
app.controller('PollCtrl', ['$scope', 'Upload', 'formdataService', function($scope, Upload, formdataService) {
// $scope.survey = [{"title" : "Title"}, {'questions': [{id: 'q1'}, {id: 'q2'}, {id: 'q3'}]}];
// $scope.survey = { 'title' : '', 'questions': [ { id: 'q1', 'answers' :[{id: 'a1'}, {id: 'a2'}] } ] };
$scope.survey = { 'title' : '', 'questions': [ { id: 1, 'title' : '', 'answers' : [{id: 1, 'title' : ''/*, 'correct' : 0*/}, {id: 2, 'title' : ''/*, 'correct' : 0*/}] } ] };
// $scope.survey.questions = [{id: 'q1'}, {id: 'q2'}, {id: 'q3'}];
formdataService.addData($scope.survey);
$scope.addNewQuestion = function() {
var newQuestionNo = $scope.survey.questions.length+1;
$scope.survey.questions.push({ 'id': newQuestionNo, 'title' : '', 'answers' : [{ id: 1, 'title' : '', 'correct' : 0}, {id: 2, 'title' : ''/*, 'correct' : 0*/ }] });
};
$scope.addNewAnswer = function() {
// console.log(this.question.answers.length);
var newAnswerNo = this.question.answers.length+1;
this.question.answers.push({ 'id': newAnswerNo, 'title' : ''/*, 'correct' : 0*/ });
};
$scope.remove = function(item, items) {
// console.log(items);
items.splice(items.indexOf(item), 1);
items.forEach( function (elem) {
elem.id = items.indexOf(elem)+1;
// if(item.correct) elem.correct = 0;
});
// set new step for form
formdataService.setStep();
};
$scope.uncheckSiblings = function(item, items) {
if(item.correct) {
$scope.selected = item;
// items.forEach( function (elem) {
// if (elem != $scope.selected) elem.correct = 0;
// });
// console.log(item);
}
}
// formdataService.formdata = $scope.survey;
// $scope.showQuestionLabel = function (question) {
// return question.id === $scope.survey.questions[0].id;
// }
}]);
// controller for preview
app.controller('FormCtrl', function($scope, formdataService) {
$scope.preview = false;
// $scope.step = 0;
$scope.step = formdataService.getStep();
$scope.formData = formdataService.getData();
$scope.togglePreview = function() {
$scope.preview = ($scope.preview === false) ? true : false;
}
$scope.setStep = function(num) {
// $scope.step += num;
formdataService.setStep(num);
$scope.step = formdataService.getStep();
};
});
// service for passing data between builder and preview controllers
app.factory('formdataService', function($http) {
var formData = {};
var addData = function(newObj) {
formData = newObj;
};
var getData = function() {
return formData;
};
var step = 0;
var setStep = function(num) {
step += num;
};
var getStep = function() {
return step;
};
return {
addData: addData,
getData: getData,
setStep: setStep,
getStep: getStep
}
});
// app.factory('stepService', function() {
// var step = 0;
// var setStep = function(num) {
// step += num;
// };
// var getStep = function() {
// return step;
// };
// return step
// });