// Array of all the questions and choices to populate the questions. This might be saved in some JSON file or a database and we would have to read the data in. var all_questions = [{ question_string: "Is Fronz-Tec Illuminati confirmed?", choices: { correct: "Probably yes", wrong: ["He's a Reptilian. Ofcourse is Fronz-Tec Illuminati confirmed", "No", "No, but he's a carrot"] } }, { question_string: "What is the newest game by Fronz-Tec?", choices: { correct: "Debugging Simulator 2017", wrong: ["What is a game?", "Debugging Simulator 2016", "Bootleg Simultor"] } }, { question_string: "Fronz-Tec invented the chips-bag with only one chips inside, the Omega Retro Falcon and...", choices: { correct: "Debugging Simulator", wrong: ["Humanity", "God", "PewDiePie"] } },{ question_string: "What is Fronz-Tec?", choices: { correct: "A Human", wrong: ["An Alien", "A Reptilian", "A Carrot"] } },{ question_string: "What is the name of Fronz-Tec", choices: { correct: "Fronz-Tec", wrong: ["Aperture Laboratoies", "Black Mesa", "Um....Front?"] } },{ question_string: "When Fronz-Tec coded his first program?", choices: { correct: "Spring 2015", wrong: ["Summer 2015", "Spring 2016", "7th July 2015"] } },{ question_string: 'Where do Fronz-Tec live?', choices: { correct: "On a planet in the milky way", wrong: ["Under the Golden Gate Bridge", "In Trump's private Jet", "Inside a dark Dungeon"] } },{ question_string: 'What is not a quote by Fronz-Tec?', choices: { correct: "Humans need to be more like stones", wrong: ["Life is like a circle. An endless loop without an end.", "Our Debugging-Simulator 2017 is a gem of curiosity", "Back to the Roots, because the rest of the tree is burned down."] } },{ question_string: 'How long does the family of Fronz-Tec exist?', choices: { correct: "Since 1406", wrong: ["Since 1673", "Since 2016", "Since 1592"] } },{ question_string: 'How many People died during development of Debugging-Simulator?', choices: { correct: "Almost none", wrong: ["3 People", "Over 9000 People", "4 People and 17 Animals"] } },{ question_string: '"It may happen, that blood flow from your eyes, after you start the game. Calm down, your eyes want just prove, that they want to see more from the game." From which game is tis quote?', choices: { correct: "Debugging-Simulator 2016", wrong: ["Debugging-Simulator 2017", "Bootleg Simultor", "No game. This happen to me all the time!"] } },{ question_string: 'What is Bootleg Simultor?', choices: { correct: "A parody of Debugging-Simulator", wrong: ["A spelling error", "A new kind of food", "A virus"] } },{ question_string: 'When was the first version of Debugging-Simulator 2016 made?', choices: { correct: "9th August 2016", wrong: ["8th August 2016", "10th August 2016", "Sometimes between first January and 31th December 2016?"] } },{ question_string: 'What have the Debugging-Simulator to do with Debugging?', choices: { correct: "This one of the mysteries, no human can explain", wrong: ["The Debugging of the errors", "The Debugging is a lie!", "Debugging = errors*old design - Fronz-Tec"] } },{ question_string: 'How old is Fronz-Tec?', choices: { correct: "He was born before the year 2000", wrong: ["One year", "Older than time and space", "Fronz-Tec have 8 letters. So he's 8 years old!"] } },{ question_string: 'Do you want to sell your soul to Fronz-Tec?', choices: { correct: "Ofcourse yes!", wrong: ["No", "Never", "Nope"] } },{ question_string: 'Should be Patch-Installing a buying argument in the opinion of Fronz-Tec?', choices: { correct: "No", wrong: ["Yes, because it's fun", "Yes, but only if it's made good", "He never said his opinion about this"] } }, { question_string: 'Who is the investor of Fronz-Tec?', choices: { correct: "Phoenix Trading Company", wrong: ["Rex Shop", "New Age IT", "Illuminati"] } },{ question_string: 'What is the slogan of Fronz-Tec?', choices: { correct: "The Spirit of a glory Future", wrong: ["We are Fronz-Tec! We are cool!", "We like to shlaughter puppies", "Illuminati confirmed"] } },{ question_string: 'What is the Omega Retro Falcon by Fronz-Tec?', choices: { correct: "A gaming console made with a Raspberry Pi", wrong: ["A dream of Fronz-Tec", "A machine to shlaughter puppies", "A board game with retro references"] } }]; // An object for a Quiz, which will contain Question objects. var Quiz = function(quiz_name) { // Private fields for an instance of a Quiz object. this.quiz_name = quiz_name; // This one will contain an array of Question objects in the order that the questions will be presented. this.questions = []; } // A function that you can enact on an instance of a quiz object. This function is called add_question() and takes in a Question object which it will add to the questions field. Quiz.prototype.add_question = function(question) { // Randomly choose where to add question var index_to_add_question = Math.floor(Math.random() * this.questions.length); this.questions.splice(index_to_add_question, 0, question); } // A function that you can enact on an instance of a quiz object. This function is called render() and takes in a variable called the container, which is the

that I will render the quiz in. Quiz.prototype.render = function(container) { // For when we're out of scope var self = this; // Hide the quiz results modal $('#quiz-results').hide(); // Write the name of the quiz $('#quiz-name').text(this.quiz_name); // Create a container for questions var question_container = $('

').attr('id', 'question').insertAfter('#quiz-name'); // Helper function for changing the question and updating the buttons function change_question() { self.questions[current_question_index].render(question_container); $('#prev-question-button').prop('disabled', current_question_index === 0); $('#next-question-button').prop('disabled', current_question_index === self.questions.length - 1); // Determine if all questions have been answered var all_questions_answered = true; for (var i = 0; i < self.questions.length; i++) { if (self.questions[i].user_choice_index === null) { all_questions_answered = false; break; } } $('#submit-button').prop('disabled', !all_questions_answered); } // Render the first question var current_question_index = 0; change_question(); // Add listener for the previous question button $('#prev-question-button').click(function() { if (current_question_index > 0) { current_question_index--; change_question(); } }); // Add listener for the next question button $('#next-question-button').click(function() { if (current_question_index < self.questions.length - 1) { current_question_index++; change_question(); } }); // Add listener for the submit answers button $('#submit-button').click(function() { // Determine how many questions the user got right var score = 0; for (var i = 0; i < self.questions.length; i++) { if (self.questions[i].user_choice_index === self.questions[i].correct_choice_index) { score++; } } // Display the score with the appropriate message var percentage = score / self.questions.length; console.log(percentage); var message; if (percentage === 1) { message = "Great job! It's almost you are stalking Fronz-Tec. (I hope you don't do that)" } else if (percentage >= .75) { message = 'You did alright. But there is room for more' } else if (percentage >= .5) { message = 'You are your own fault! You was not very good. Maybe you should learn more about Fronz-Tec' } else { message = 'So, you do not succeed. You really should buy a brain.' } $('#quiz-results-message').text(message); $('#quiz-results-score').html('You got ' + score + '/' + self.questions.length + ' questions correct.'); $('#quiz-results').slideDown(); $('#quiz button').slideUp(); }); // Add a listener on the questions container to listen for user select changes. This is for determining whether we can submit answers or not. question_container.bind('user-select-change', function() { var all_questions_answered = true; for (var i = 0; i < self.questions.length; i++) { if (self.questions[i].user_choice_index === null) { all_questions_answered = false; break; } } $('#submit-button').prop('disabled', !all_questions_answered); }); } // An object for a Question, which contains the question, the correct choice, and wrong choices. This block is the constructor. var Question = function(question_string, correct_choice, wrong_choices) { // Private fields for an instance of a Question object. this.question_string = question_string; this.choices = []; this.user_choice_index = null; // Index of the user's choice selection // Random assign the correct choice an index this.correct_choice_index = Math.floor(Math.random() * wrong_choices.length + 1); // Fill in this.choices with the choices var number_of_choices = wrong_choices.length + 1; for (var i = 0; i < number_of_choices; i++) { if (i === this.correct_choice_index) { this.choices[i] = correct_choice; } else { // Randomly pick a wrong choice to put in this index var wrong_choice_index = Math.floor(Math.random(0, wrong_choices.length)); this.choices[i] = wrong_choices[wrong_choice_index]; // Remove the wrong choice from the wrong choice array so that we don't pick it again wrong_choices.splice(wrong_choice_index, 1); } } } // A function that you can enact on an instance of a question object. This function is called render() and takes in a variable called the container, which is the

that I will render the question in. This question will "return" with the score when the question has been answered. Question.prototype.render = function(container) { // For when we're out of scope var self = this; // Fill out the question label var question_string_h2; if (container.children('h2').length === 0) { question_string_h2 = $('

').appendTo(container); } else { question_string_h2 = container.children('h2').first(); } question_string_h2.text(this.question_string); // Clear any radio buttons and create new ones if (container.children('input[type=radio]').length > 0) { container.children('input[type=radio]').each(function() { var radio_button_id = $(this).attr('id'); $(this).remove(); container.children('label[for=' + radio_button_id + ']').remove(); }); } for (var i = 0; i < this.choices.length; i++) { // Create the radio button var choice_radio_button = $('') .attr('id', 'choices-' + i) .attr('type', 'radio') .attr('name', 'choices') .attr('value', 'choices-' + i) .attr('checked', i === this.user_choice_index) .appendTo(container); // Create the label var choice_label = $('') .text(this.choices[i]) .attr('for', 'choices-' + i) .appendTo(container); } // Add a listener for the radio button to change which one the user has clicked on $('input[name=choices]').change(function(index) { var selected_radio_button_value = $('input[name=choices]:checked').val(); // Change the user choice index self.user_choice_index = parseInt(selected_radio_button_value.substr(selected_radio_button_value.length - 1, 1)); // Trigger a user-select-change container.trigger('user-select-change'); }); } // "Main method" which will create all the objects and render the Quiz. $(document).ready(function() { // Create an instance of the Quiz object var quiz = new Quiz('The big Fronz-Tec Quiz'); // Create Question objects from all_questions and add them to the Quiz object for (var i = 0; i < all_questions.length; i++) { // Create a new Question object var question = new Question(all_questions[i].question_string, all_questions[i].choices.correct, all_questions[i].choices.wrong); // Add the question to the instance of the Quiz object that we created previously quiz.add_question(question); } // Render the quiz var quiz_container = $('#quiz'); quiz.render(quiz_container); });

The big Fronz-Tec Quiz-Game.