SHARE
TWEET

Untitled

a guest May 21st, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const title = document.getElementById('title');
  2.  
  3. const start = document.getElementById('start');
  4.  
  5. const homepage = document.getElementById('homepage');
  6. const questions = document.getElementById('questions');
  7. const results = document.getElementById('results');
  8.  
  9. const openQuestions = document.getElementById('openQuestions');
  10. const choices = document.getElementById('choices');
  11.  
  12. const partyList = document.getElementById('partyList');
  13. const nextPage = document.getElementById('nextPage');
  14.  
  15. const question = document.getElementById('question');
  16. const statement = document.getElementById('statement');
  17.  
  18. const backButton = document.getElementById('backButton');
  19.  
  20. const isImportant = document.getElementById('isImportant');
  21.  
  22. const pro = document.getElementById('pro');
  23. const none = document.getElementById('none');
  24. const contra = document.getElementById('contra');
  25. const skip = document.getElementById('skip');
  26. const arrowNext = document.getElementById('arrowNext');
  27.  
  28. const match = document.getElementById('match');
  29.  
  30. const largeParties = document.getElementById('largeParties');
  31. const secularParties = document.getElementById('secularParties');
  32. const noParties = document.getElementById('noParties');
  33.  
  34. const firstPartyElement = document.getElementById('firstPartyElement');
  35. const secondPartyElement = document.getElementById('secondPartyElement');
  36. const thirdPartyElement = document.getElementById('thirdPartyElement');
  37.  
  38. const otherResults = document.getElementById('otherResults');
  39.  
  40. let answers = [];
  41. let counter = 0;
  42. let choicesStep = false;
  43.  
  44. let choicesLoaded = false;
  45.  
  46. window.onload = function()
  47. {
  48.     startPage();
  49. }
  50.  
  51. // This is the function that starts onload that makes the homepage visable.
  52. function startPage()
  53. {
  54.     homepage.style.display = 'block';
  55.     questions.style.display = 'none';
  56.     results.style.display = 'none';
  57.  
  58.     backButton.style.display = 'none';
  59.  
  60.     document.getElementById('questionCount').innerHTML = subjects.length;
  61.  
  62.     start.addEventListener('click', startQuiz);
  63.  
  64.     addValues();
  65. }
  66.  
  67. function addValues()
  68. {
  69.     // This for loop gives all the parties a count and a mark property with a default value.
  70.     for (let i = 0; i < parties.length; i++) {
  71.         let party = parties[i];
  72.         party['count'] = 0;
  73.         party['marked'] = false;
  74.     }
  75. }
  76.  
  77. // This function contains the question display and calls the 'setStatement()' function to place the chosen aswer.
  78. function startQuiz()
  79. {
  80.  
  81.     homepage.style.display = 'none';
  82.     questions.style.display = 'block';
  83.     results.style.display = 'none';
  84.  
  85.     backButton.style.display = 'block';
  86.  
  87.     openQuestions.style.display = 'block';
  88.     choices.style.display = 'none';
  89.    
  90.     pro.addEventListener('click', setAnswer);
  91.     none.addEventListener('click', setAnswer);
  92.     contra.addEventListener('click', setAnswer);
  93.     skip.addEventListener('click', setAnswer);
  94.  
  95.     backButton.addEventListener('click', goBack);
  96.  
  97.     setStatement();
  98. }
  99.  
  100. // This function makes it possible to navigate back through the questions.
  101. function goBack()
  102. {
  103.     // when the counter is 0 it means that there are no more questions to go back to so the homepage has to be shown.
  104.     if (counter === 0) {
  105.         // back to homepage
  106.         startPage();
  107.    
  108.     // when the counter is the same number as there are subjects, it means that you wanna go back to the last question from the choices screen.
  109.     } else if (counter === subjects.length){
  110.         startQuiz();
  111.        
  112.         // if both conditions are not true, then the counter loses 1 so you go back just 1 question.
  113.     } else {
  114.         counter--;
  115.         startQuiz();
  116.     }
  117. }
  118.  
  119. // This function checks the eventListner and the important checkbox.
  120. // It adds the id of the pressed button (pro,none,contra or skip) and the 'checked' to the answers array.
  121. function setAnswer(value)
  122. {
  123.     answers[counter] = {
  124.         "position": value.target.id,
  125.         "isImportant": isImportant.checked
  126.     };
  127.    
  128.     counter++;
  129.     setStatement();
  130. }
  131.  
  132. // This function contains a if else to check by the counter which question needs to be displayed, if its the last one there will be linked to showChoices().
  133. function setStatement()
  134. {
  135.     if (counter === subjects.length && choicesStep === false) {
  136.         showChoices();
  137.  
  138.     } else if (counter === subjects.length && choicesStep === true)
  139.     {
  140.         counter = subjects.length;
  141.         counter--;
  142.         setStatement();
  143.     } else if (counter < subjects.length) {
  144.        
  145.         question.innerHTML = counter + 1 + '. ' + subjects[counter].title;
  146.         statement.innerHTML = subjects[counter].statement;
  147.  
  148.         choicesStep = false;
  149.         checkStatement();
  150.     }
  151. }
  152.  
  153. // This function makes it possible to remember if a question is marked as important.
  154. function checkStatement()
  155. {
  156.     if (answers[counter] == undefined) {       
  157.         isImportant.checked = false;
  158.     } else {
  159.         isImportant.checked = answers[counter].isImportant;
  160.     }
  161. }
  162.  
  163. // This function create a page where there has to be chosen a preference for at least 3 parties.
  164. function showChoices()
  165. {
  166.     choicesStep = true;
  167.  
  168.     openQuestions.style.display = 'none';
  169.     choices.style.display = 'block';
  170.    
  171.     backButton.addEventListener('click', goBack);
  172.    
  173.     question.innerHTML = 'Welke partijen wilt u meenemen in het resultaat?';
  174.     statement.innerHTML = 'U kunt kiezen voor grote partijen, daarbij nemen we de partijen mee die in de peilingen op minimaal één zetel staan. U kunt kiezen voor seculiere partijen. Maak tenminste een selectie van drie partijen.';
  175.    
  176.     nextPage.addEventListener('click', result);
  177.    
  178.     createParties();
  179.    
  180.     largeParties.addEventListener('click', largePartiesSelection);
  181.     secularParties.addEventListener('click', secularPartiesSelection);
  182.     noParties.addEventListener('click', noPartiesSelection);   
  183. }
  184.  
  185. // This function creates the list of parties that are available, it also gives them checkboxes.
  186. function createParties()
  187. {
  188.     if (!choicesLoaded) {
  189.  
  190.         for (let i = 0; i < parties.length; i++)
  191.         {
  192.             const currIndex = i;
  193.  
  194.             let createLi = document.createElement('li');
  195.             createLi.className = "list-group-item";
  196.            
  197.             let checkbox = document.createElement('input');
  198.             checkbox.setAttribute('type', 'checkbox');
  199.             checkbox.setAttribute('id', parties[i].name);
  200.             checkbox.onclick = function () {
  201.                 setParty(currIndex);
  202.             };
  203.             createLi.appendChild(checkbox);
  204.            
  205.             let liContent = document.createTextNode(parties[i].name);
  206.             createLi.appendChild(liContent);
  207.  
  208.             partyList.appendChild(createLi);
  209.         }
  210.         choicesLoaded = true;
  211.     }
  212. }
  213.  
  214. // This function creates a selection of all parties with more then 1 seat.
  215. function largePartiesSelection()
  216. {
  217.     for (let i = 0; i < parties.length; i++)
  218.     {
  219.         let party = parties[i];
  220.         if (party.size >= 1)
  221.         {
  222.             party.marked = true;
  223.            
  224.             let partyName = party.name;
  225.             document.getElementById(partyName).checked = true;
  226.         }
  227.     }
  228. }
  229.  
  230. // This function creates a selection of all secular parties.
  231. function secularPartiesSelection()
  232. {
  233.     for (let i = 0; i < parties.length; i++)
  234.     {  
  235.         let partySecular = parties[i].secular;
  236.         if (partySecular)
  237.         {
  238.             let party = parties[i];
  239.             party.marked = true;
  240.  
  241.             let partyName = party.name;
  242.             document.getElementById(partyName).checked = true;
  243.         }
  244.     }  
  245. }
  246.  
  247. // This function clears the selection.
  248. function noPartiesSelection()
  249. {
  250.     for (let i = 0; i < parties.length; i++)
  251.     {
  252.         let party = parties[i];
  253.         party['marked'] = false;
  254.  
  255.         let partyErase = parties[i].name;
  256.  
  257.         document.getElementById(partyErase).checked = false;
  258.     }
  259. }
  260.  
  261. // This function contains a check to see if the party is added to a array.
  262. function setParty(index)
  263. {
  264.     if (parties[index].marked) {
  265.         parties[index].marked = false;
  266.     } else {
  267.         parties[index].marked = true;
  268.     }
  269. }
  270.  
  271. // This function creates a page where the results are displayed.
  272. function result()
  273. {
  274.     var markCounter = 0;
  275.     for (let k = 0; k < parties.length; k++) {
  276.         if (parties[k].marked){
  277.             markCounter++;
  278.         }
  279.     }
  280.  
  281.     if (markCounter >= 3) {
  282.  
  283.         choicesStep = false;
  284.  
  285.         homepage.style.display = 'none';
  286.         questions.style.display = 'none';
  287.         results.style.display = 'block';
  288.  
  289.         backButton.addEventListener('click', goBack);
  290.  
  291.         checkAnswer();
  292.         showResult();
  293.     } else {
  294.         alert('Selecteer ten minste 3 partijen.');
  295.     }
  296. }
  297.  
  298. // When the last answer is filled, this function looks at all the parties which answers are the same.
  299. // When a answer is the same as the one of the party, the party gets +1 by the count unless the answer is set to important, then it gets +2.
  300. function checkAnswer()
  301. {
  302.     // This for loop loops as many times as there are subjects. Every loop is one answer which will be checked individually.
  303.     for (let i = 0; i < subjects.length; i++) {
  304.        
  305.         // Every position inside the answers array will be placed in answerPosition.
  306.         // Each answer will be checked after each other because of the i value(the loop value).
  307.         let answerPosition = answers[i].position;
  308.         // If a answer contains a 'skip' value the loop will be stoped and the next loop will start.
  309.         if (answerPosition === "skip" || answerPosition === "arrowNext") {
  310.  
  311.             // Continue means that the for loop will go to the next loop instead of break what stops the for loop instantly.
  312.             continue;
  313.         }
  314.        
  315.         // Every isImportant inside the answers array will be placed in answerIsImportant.
  316.         // Each answer will be checked after each other because of the i value(the loop value).
  317.         let answerIsImportant = answers[i].isImportant;
  318.  
  319.         // Every subject will be played individually inside the subject array be the value of i.
  320.         let subject = subjects[i];
  321.  
  322.        
  323.         // this loop makes it possible to take each party individually out of the subject array.
  324.         for (let j = 0; j < subject.parties.length; j++) {
  325.  
  326.             // Every loop the party will be placed inside subjectParty for a better readability.
  327.             let subjectParty = subject.parties[j];
  328.  
  329.             // Every loop the position of the party will be placed in subjectPartyPosition for a better readability.
  330.             let subjectPartyPosition = subjectParty.position;
  331.  
  332.             // this condition checks if the position of the party that is being checked is the same as the filled answer.
  333.             if (subjectPartyPosition === answerPosition) {
  334.  
  335.                 // This loop checks all parties for a match. When there is a match it will look for the isImportant so the right value can be added.
  336.                 for (let k = 0; k < parties.length; k++) {
  337.                    
  338.                     let party = parties[k];
  339.                    
  340.                     // If the party.name(parties array) has the same value as subjectParty(subjects array) the count will add with the right value.
  341.                     if (party.name === subjectParty.name) {
  342.                        
  343.                             // If the answer is not important the count will be +1.
  344.                             if (!answerIsImportant) {
  345.                                 party.count += 1;
  346.                             // If the answer is important the count will be +2.
  347.                             } else if (answerIsImportant) {
  348.                                 party.count += 2;
  349.                             }
  350.  
  351.                             // The break will make sure the loop will stop immediately so the next subjectParty can be checked.
  352.                             // This break will only work when the party.name and subjectParty.name are the same.
  353.                             break;
  354.                     }
  355.                 }
  356.             }
  357.         }
  358.  
  359.     }
  360. }
  361.  
  362. // This function creates the result page
  363. function showResult()
  364. {  
  365.     // Step 1:
  366.     // var checked = Array.from(document.querySelectorAll('.list-group-item > input[type="checkbox"]'))
  367.     //  .filter(function(checkbox) {
  368.     //      return checkbox.checked === false }
  369.     //  );
  370.  
  371.     // var filteredParties = parties.filter(function(party) {
  372.     //  return checked.find(function(checked) {
  373.     //      return checked.id === party.name
  374.     //  });
  375.     // });
  376.  
  377.     // filteredParties.sort()
  378.  
  379.    
  380.    
  381.  
  382.     // return;
  383.    
  384.     otherResults.innerHTML = '';
  385.  
  386.     let markedParties = [];
  387.     // Go trough all of the parties.
  388.     for (let i = 0; i < parties.length; i++) {
  389.        
  390.         var party = parties[i];
  391.         // If a party is marked, we want to add it to markedParties.
  392.         if (party.marked) {
  393.             // markedParties[i] = party;
  394.             markedParties.push(party);
  395.         }
  396.  
  397.     }
  398.  
  399.     // This inside sort function makes sure all the data is sorted by the count from high to low value.
  400.     markedParties.sort(function(a,b) {
  401.         return b.count-a.count;
  402.     });
  403.  
  404.     match.innerHTML = '1# '+ markedParties[0].name + ' with a score of ' + markedParties[0].count;
  405.            
  406.     // These are the first 3 value's from the array which means that these had the most similar answers.
  407.     firstPartyElement.innerHTML = '1# '+ markedParties[0].name + '<p><b> with score: </b></p> ' + markedParties[0].count;
  408.     secondPartyElement.innerHTML = '2# '+ markedParties[1].name + '<p><b> with score: </b></p> ' + markedParties[1].count;
  409.     thirdPartyElement.innerHTML = '3# '+ markedParties[2].name + '<p><b> with score: </b></p> ' + markedParties[2].count;
  410.    
  411.     for (let i = 3; i < markedParties.length; i++)
  412.     {
  413.         let li = document.createElement('li');
  414.         li.innerHTML = markedParties[i].name + '<p><b> with score: </b></p> ' + markedParties[i].count;
  415.        
  416.         // The li will be placed inside the ul (otherResults).
  417.         otherResults.appendChild(li);
  418.     }
  419. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top