|
|
| Line 48: |
Line 48: |
| | } | | } |
| | </style> | | </style> |
| − | <script> | + | <script src="//2015.igem.org/Team:Cambridge-JIC/Make_Your_Own_js?action=raw&ctype=text/javascript"></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');
| + | |
| − | | + | |
| − | step0 = new q.step("Tell us which options you'd like for your microscope.", {
| + | |
| − | 1: "Okay!"
| + | |
| − | });
| + | |
| − | step1 = new q.step("Besides bright-field, do you need dark-field imaging?", {
| + | |
| − | 0: "Yes",
| + | |
| − | 1: "No"
| + | |
| − | });
| + | |
| − | step2 = new q.step("Do you need to image GFP fluorescence?", {
| + | |
| − | 0: "Yes",
| + | |
| − | 1: "No"
| + | |
| − | });
| + | |
| − | step3 = new q.step("Do you need to image RFP fluorescence?", {
| + | |
| − | 0: "Yes",
| + | |
| − | 1: "No"
| + | |
| − | });
| + | |
| − | step4 = new q.step("Do you need to image other fluorescent proteins, e.g. YFP?", {
| + | |
| − | 0: "Yes",
| + | |
| − | 1: "No"
| + | |
| − | });
| + | |
| − | step5 = new q.step("Do you want your microscope to be manual, motorised, or will you need to swap between both?", {
| + | |
| − | 0: "Manual only",
| + | |
| − | 1: "Motorised only",
| + | |
| − | 2: "Both",
| + | |
| − | });
| + | |
| − | step6 = new q.step("Do you need your microscope to be fully battery-powered, e.g. for fieldwork?", {
| + | |
| − | 0: "Yes",
| + | |
| − | 1: "No"
| + | |
| − | });
| + | |
| − | | + | |
| − | final = function(options) {
| + | |
| − | window.location.href="#CC0";
| + | |
| − | ret = '<h3>Thanks!</h3><br/><table><tr><th>Number</th><th>Part</th><th>Cost (GBP)</th><th>STL file</th><th>SCAD file</th></tr><tr><td>1</td><td>main stage</td></tr><tr><td>3</td><td>legs</td></tr><tr><td>2</td><td>side supports for z axis</td></tr><tr><td>1</td><td>z axis in 3 parts (vertical + horizontal + connector)</td></tr><tr><td>1</td><td>connecting ring bw z axes</td></tr><tr><td>1</td><td>3-legged camera holder</td></tr><tr><td>1</td><td>bright-field cube</td></tr><tr><td>2</td><td>slide clips</td></tr>'
| + | |
| − | if(options[2] == 0 && options[3] == 0 && options[4] == 0) {
| + | |
| − | ret += '<tr><td>3</td><td>epicubes</td></tr>'
| + | |
| − | }
| + | |
| − | else if((options[2] == 0 && options[3] == 0) || (options[2] == 0 && options[4] == 0) || (options[3] == 0 && options[4] == 0)) {
| + | |
| − | ret += '<tr><td>2</td><td>epicubes</td></tr>'
| + | |
| − | } else if(options[2] == 0 || options[3] == 0 || options[4] == 0) {
| + | |
| − | ret += '<tr><td>jsjdjd</td><td>2</td></tr>'
| + | |
| − | }
| + | |
| − | ret += '</table>'
| + | |
| − | return $('<div>').html(ret)
| + | |
| − | }
| + | |
| − | | + | |
| − | step0.bind(step1, [1]);
| + | |
| − | | + | |
| − | step1.bind(step2, [0]);
| + | |
| − | step1.bind(step2, [1]);
| + | |
| − | | + | |
| − | step2.bind(step3, [0]);
| + | |
| − | step2.bind(step3, [1]);
| + | |
| − | | + | |
| − | step3.bind(step4, [0]);
| + | |
| − | step3.bind(step4, [1]);
| + | |
| − | | + | |
| − | step4.bind(step5, [0]);
| + | |
| − | step4.bind(step5, [1]);
| + | |
| − | | + | |
| − | step5.bind(step6, [0]);
| + | |
| − | step5.bind(step6, [1]);
| + | |
| − | step5.bind(step6, [2]);
| + | |
| − | | + | |
| − | step6.bind(final, [0]);
| + | |
| − | step6.bind(final, [1]);
| + | |
| − |
| + | |
| − | q.start(step0);
| + | |
| − | });
| + | |
| − | | + | |
| − | </script>
| + | |
| | | | |
| | <section style="background:white"> | | <section style="background:white"> |
