Difference between revisions of "Team:Cambridge-JIC/Practices"
KaterinaMN (Talk | contribs) |
KaterinaMN (Talk | contribs) |
||
Line 24: | Line 24: | ||
<h2> Design Copyright </h2> | <h2> Design Copyright </h2> | ||
</div></div></section> | </div></div></section> | ||
+ | |||
+ | <script src="http://code.jquery.com/jquery-1.11.1.js"></script> | ||
+ | <style> | ||
+ | #cam-quiz { | ||
+ | background-color: #8c3427; | ||
+ | border: 1px solid black; | ||
+ | } | ||
+ | |||
+ | .cam-quiz-question, .cam-quiz-result { | ||
+ | border: 1px solid black; | ||
+ | padding: 5px; | ||
+ | margin: 5px; | ||
+ | } | ||
+ | |||
+ | .cam-quiz-question { | ||
+ | background-color: #27348c; | ||
+ | } | ||
+ | |||
+ | .cam-quiz-answer.cam-quiz-selected { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .cam-quiz-result { | ||
+ | background-color: #2734cc; | ||
+ | } | ||
+ | </style> | ||
+ | <script> | ||
+ | quiz = function(elem){ | ||
+ | this.elem = $(elem); | ||
+ | this.steps = []; | ||
+ | |||
+ | this.step = function(question, answers) { | ||
+ | this.question = question; | ||
+ | this.answers = {}; | ||
+ | this.bind = function(target, keys) { | ||
+ | if (typeof keys === "undefined") { | ||
+ | keys = Object.keys(this.answers); | ||
+ | } | ||
+ | |||
+ | for (var i=0; i<keys.length; i++) { | ||
+ | key = keys[i]; | ||
+ | this.answers[key].target = target; | ||
+ | } | ||
+ | }; | ||
+ | this.elem = function(quiz, index) { | ||
+ | elem = $('<div class="cam-quiz-question">'); | ||
+ | elem.append($('<h3>').text(this.question)); | ||
+ | for (key in this.answers) { | ||
+ | elem.append($('<div class="cam-quiz-answer">') | ||
+ | .text(this.answers[key].answer) | ||
+ | .data("key", key) | ||
+ | .data("step", this) | ||
+ | .data("quiz", quiz) | ||
+ | .data("index", index) | ||
+ | .click(function(){ | ||
+ | key = $(this).data("key"); | ||
+ | step = $(this).data("step"); | ||
+ | quiz = $(this).data("quiz"); | ||
+ | index = $(this).data("index"); | ||
+ | ref = quiz.steps[index]; | ||
+ | ref.elem.find('.cam-quiz-selected').removeClass('cam-quiz-selected'); | ||
+ | $(this).addClass('cam-quiz-selected'); | ||
+ | |||
+ | for (var i=quiz.steps.length; --i>index;) { | ||
+ | quiz.steps[i].elem.remove(); | ||
+ | quiz.steps.pop(); | ||
+ | } | ||
+ | |||
+ | quiz.steps[index].option = key; | ||
+ | nstep = step.answers[key].target; | ||
+ | switch (typeof nstep) { | ||
+ | case "object": | ||
+ | var nindex = quiz.steps.length; | ||
+ | var nref = { | ||
+ | 'step': nstep, | ||
+ | 'elem': nstep.elem(quiz, nindex), | ||
+ | 'option': undefined | ||
+ | }; | ||
+ | quiz.steps.push(nref); | ||
+ | quiz.elem.append(nref.elem); | ||
+ | break; | ||
+ | case "function": | ||
+ | options = []; | ||
+ | for (var i=0; i<quiz.steps.length; i++) { | ||
+ | options.push(quiz.steps[i].option); | ||
+ | } | ||
+ | var nref = { | ||
+ | 'step': undefined, | ||
+ | 'elem': $('<div class="cam-quiz-result">') | ||
+ | .append(nstep(options)), | ||
+ | 'option': undefined | ||
+ | }; | ||
+ | quiz.steps.push(nref); | ||
+ | quiz.elem.append(nref.elem); | ||
+ | break; | ||
+ | default: | ||
+ | alert("Quiz error! Please contact the site maintainers...."); | ||
+ | break; | ||
+ | } | ||
+ | })); | ||
+ | } | ||
+ | return elem; | ||
+ | }; | ||
+ | |||
+ | for (key in answers) { | ||
+ | answer = answers[key]; | ||
+ | this.answers[key] = { | ||
+ | 'answer': answer, | ||
+ | 'target': undefined | ||
+ | }; | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | this.start = function(step) { | ||
+ | index = this.steps.length; | ||
+ | ref = { | ||
+ | 'step': step, | ||
+ | 'elem': step.elem(this, index), | ||
+ | 'option': undefined | ||
+ | }; | ||
+ | this.steps.push(ref); | ||
+ | this.elem.append(ref.elem); | ||
+ | }; | ||
+ | }; | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | q = new quiz('#cam-quiz'); | ||
+ | |||
+ | step1 = new q.step("Which do you like more?", { | ||
+ | 0: "apples", | ||
+ | 1: "oranges" | ||
+ | }); | ||
+ | step2a = new q.step("What's your favourite thing about apples?", { | ||
+ | 'a': "their taste", | ||
+ | 'b': "their shape", | ||
+ | 'c': "hard to say" | ||
+ | }); | ||
+ | step2b = new q.step("What's your favourite thing about oranges?", { | ||
+ | 1: "their colour", | ||
+ | 2: "their smell", | ||
+ | 3: "prefer not to say" | ||
+ | }); | ||
+ | step3 = new q.step("Do you like any other fruit?", { | ||
+ | 'y': "yes", | ||
+ | 'n': "no" | ||
+ | }); | ||
+ | |||
+ | step1.bind(step2a, [0]); | ||
+ | step1.bind(step2b, [1]); | ||
+ | step2a.bind(step3); | ||
+ | step2b.bind(step3); | ||
+ | step3.bind(function(selection){ | ||
+ | console.log(selection); | ||
+ | return $('<span>').text(selection.join(", ")); | ||
+ | }); | ||
+ | |||
+ | q.start(step1); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | <body> | ||
+ | <div id="cam-quiz"></div> | ||
+ | </body> | ||
+ | |||
+ | </html> | ||
+ | |||
</html> | </html> | ||
{{:Team:Cambridge-JIC/Templates/Footer}} | {{:Team:Cambridge-JIC/Templates/Footer}} |
Revision as of 10:02, 8 September 2015
Hardware Licensing
Design Copyright
</html>