Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- **************************************
 ***********START LANDING PAGE*************
 **************************************-->
    <section class="landing-page-container">
       
        <div class="landing-page-wrapper">
        <h1 id="landing-page-heading">Test Your Knowledge</h1>
           <div class="landing-inputs-wrapper">
            <input type="text" id="firstname" class="fullname" placeholder="Enter Your Firstname">
            <input type="text" id="lastname" class="fullname" placeholder="Enter Your Lastname">
            <button id="start-quiz-btn">Start Quiz</button>
            </div>
        </div>
        
    </section>
<!-- ************************************
 ***********END LANDING PAGE*************
 **************************************-->  

<!-- *************************************
***********START ADMIN SECTION***********
**************************************-->
  <section class="admin-panel-container" style="display:none">
      
       <div class='admin-panel-wrapper'>
        <div class="header">
         <h2>Add Questions</h2>
         <a href=""><button id="admin-logout-btn">Logout</button></a>
        </div>
         
         <div class="forms-wrapper">
          <button id="question-update-btn">Update</button>
          <button id="question-delete-btn">Delete</button>
          
          <textarea id="new-question-text" cols="" rows="" placeholder="New Question"></textarea>
          <div class="admin-options-container">
              <div class="admin-option-wrapper">
                  <input type="radio" class="admin-option-0" name="answer" value="0">
                  <input type="text" class="admin-option admin-option-0" value="">
              </div>
              <div class="admin-option-wrapper">
                  <input type="radio" class="admin-option-1" name="answer" value="1">
                  <input type="text" class="admin-option admin-option-1" value="">
              </div>
          </div>
          
          <button id="question-insert-btn">Insert</button>
         </div>
          
        <button id="questions-clear-btn">Clear List</button>
       </div>
       
       <div class="results-list-container">
         <div class="clear">
          <h2>Results</h2>
          <button id="results-clear-btn">Clear Results</button>
         </div>
          <div class="results-list-wrapper">
          
          <!--
           <p class="person person-1"><span class="person-1">Nick Smith - 5 Points</span><button id="delete-result-btn_1" class="delete-result-btn">Delete</button></p>  
          -->      
          </div>
       </div>
       
       <div class="inserted-questions-wrapper">
           <!-- <p><span>1. Question Text</span><button id="question-1">Edit</button></p> -->
      </div>
       
   </section>
  <!-- *************************************
   ***********END ADMIN SECTION***********
   **************************************-->   
   
   
<!-- *************************************
 ***********START QUIZ SECTION************
 **************************************-->
   <section class="quiz-container" style="display:none">
    <div class="quiz-wrapper">
        
        <h2 id="asked-question-text">Why do you want to become developer?</h2>
        
        <div class="instant-answer-container">
        <img id="emotion" src="images/happy.png">
        <div id="instant-answer-wrapper">
            <p id="instant-answer-text">This is a correct answer</p>
            <button id="next-question-btn">Next</button>
        </div>
        </div>
        
        <div class="quiz-options-wrapper">
            <div class="choice-0"><span class="choice-0">A</span><p  class="choice-0">test1</p></div>
            <div class="choice-1"><span class="choice-1">B</span><p  class="choice-1">test2</p></div>
            <div class="choice-2"><span class="choice-2">C</span><p  class="choice-2">test3</p></div>
            <div class="choice-3"><span class="choice-3">D</span><p  class="choice-3">test4</p></div>
        </div>
        
    </div>
   
<!--***********PROGRESS BAR***********-->
    <div class="progressBar">
        <p id="progress">2/20</p>
        <progress value="30" max="100"></progress>
    </div>
   </section>
<!-- ************************************
 ***********END QUIZ SECTION*************
 **************************************-->
  
<!-- **************************************
 ***********START FINAL RESULT PAGE********
 **************************************-->   
 <section class="final-result-container" style="display:none">
    <div class="final-result-wrapper">
      <div class="final-result">
        <a href=""><button id="final-logout-btn">Logout</button></a>
        <h2 id="final-score-text">Nick Doe -- 56</h2>
       </div>
    </div>
 </section>
<!-- *************************************
 ***********END FINAL RESULT PAGE*********
 **************************************-->  
              
            
!

CSS

              
                * {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgba(227, 226, 223, .3);
}


/**************************************
*********START LANDING SECTION*********
**************************************/

section.landing-page-container {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

div.landing-page-wrapper {
    background: linear-gradient(to bottom right,rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)), url("https://i.pinimg.com/originals/e4/17/80/e41780af08a3e749a87d368b85a06bcf.jpg") no-repeat center;
    font-family: 'Raleway', sans-serif;
    height: 90vh;
    width: 95%;
    margin: 5vh 2.5%;
    position: relative;
    box-shadow: 15px 15px 35px #999;
    background-size: cover;
    border-radius: 3px;
    animation: fade .8s;
}

h1#landing-page-heading {
    text-align: center;
    font-size: 55px;
    color: #eee;
    text-shadow: 1px 1px 5px #555;
    letter-spacing: 3px;
    padding-top: 60px;
}


div.landing-inputs-wrapper {
    clip-path: polygon(100% 34%, 100% 35%, 100% 100%, 0 100%, 0 7%);
    background: rgba(0, 0, 0, .7);
    padding: 220px 10px 10px 10px;
    width: 400px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    border-radius: 3px;
    margin-top: 100px;
    animation: fade 1.5s;
}

@keyframes fade {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1;
    }
}

div.landing-inputs-wrapper input {
    width: 300px;
    font-size: 17px;
    font-family: 'Josefin Sans', sans-serif;
    padding: 15px 10px;
    margin: 10px auto;
    background: transparent;
    border-radius: 3px;
    color: #eee;
    outline: none;
    border-color: transparent;
    border-bottom: 2px solid #aaa;
    transition: all .3s;
    display: block;
}

div.landing-inputs-wrapper input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #aaa;
}
div.landing-inputs-wrapper input::-moz-placeholder { /* Firefox 19+ */
  color: #aaa;
}

div.landing-inputs-wrapper input:focus {
    border-bottom: 2px solid #fff;
     border-bottom: 2px solid #fff;
}

#start-quiz-btn {
    font-family: 'Cabin', sans-serif;
    width: 300px;
    padding: 13px 10px;
    margin: 15px auto;
    font-size: 18px;
    letter-spacing: 1.5px;
    border-radius: 25px;
    border: 2px solid #aaa;
    outline: none;
    color: #aaa;
    background: transparent;
    display: block;
    transform: translateX(0px);
    transition: all .3s;
}

#start-quiz-btn:hover {
    border: 2px solid #fff;
    color: #fff;
    transform: translateX(-1px);
}
/**************************************
***********END LANDING SECTION*********
**************************************/


/**************************************
*********START ADMIN SECTION***********
**************************************/

section.admin-panel-container {
    height: 90vh;
    width: 95%;
    margin: 5vh 2.5%;
    position: relative;
    background: linear-gradient(to bottom right,rgba(0, 0, 0, .3), rgba(0, 0, 0, .7)), url("https://i.pinimg.com/originals/33/69/66/336966307b0c3ea427f7006eff9923a5.jpg") no-repeat center;
    box-shadow: 15px 15px 35px #999;
    background-size: cover;
    overflow: hidden;
    animation: fade .8s;
}

div.admin-panel-wrapper {
    width: 60%;
    height: 65%;
    position: absolute;
    left: 40px;
    top: 40px;
    background: rgba(0, 0, 0, .65);
    border-radius: 3px;
    overflow: auto;
}

div.admin-panel-wrapper::-webkit-scrollbar {
    background: rgba(0,0,0,.2);
    width: 15px
}

div.admin-panel-wrapper::-webkit-scrollbar-thumb {
      background-color: #333; 
}

div.header{
    overflow: hidden;
}

div.header h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 30px;
    text-align: left;
    width: 50%;
    float: left;
    padding: 20px;
    color: #fff;
}

div.forms-wrapper {
    width: 80%;
    margin: 1% auto;
}

#new-question-text {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    color: #eee;
    max-width: 500px;
    min-width: 300px;
    width: 50%;
    height: 60px;
    border-radius: 2px;
    border: .5px solid #eee;
    display: block;
    margin: 10px 0 10px 80px;
    padding: 7px;
    outline: none;
    background: #444;
    transition: all .5s;
}

#new-question-text:focus {
    border: .5px solid #3b8beb;
    background: #555;
}

div.admin-option-wrapper {
    position: relative;
    width: 70%;
}

div.forms-wrapper input[type="text"] {
    width: 300px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 17px;
    color: #eee;
    display: block;
    margin: 10px 0 10px 80px;
    padding: 10px 5px;
    border-radius: 2px;
    border: .5px solid #eee;
    outline: none;
    background: #444;
    animation: fade .5s;
    transition: all .5s;
}

div.forms-wrapper input[type="text"]:focus {
    border: .5px solid #3b8beb;
    background: #555;
}

div.forms-wrapper input[type="radio"] {
    position: absolute;
    left: 60px;
    top: 15px;
}

#question-insert-btn {
    font-family: 'Cabin', sans-serif;
    margin-left: 80px;
    padding: 10px 10px;
    width: 120px;
    color: #eee;
    font-size: 16px;
    letter-spacing: 1.5px;
    background: #222;
    border-radius: 25px;
    outline: none;
    border: 1px solid #ccc;
    transition: background .3s, border .3s, box-shadow .3s;
}

#question-insert-btn:hover {
    color: #eee;
    border: 1px solid #fff;
    background: #555;
}

#admin-logout-btn {
    font-family: 'Cabin', sans-serif;
    font-size: 15px;
    float: right;
    margin: 20px;
    background-color: #222; 
    border-radius: 25px;
    width: 110px;
    letter-spacing: 1.5px;
    color: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    outline: none;
    transition: all .3s;
}

#admin-logout-btn:hover {
    color: #fff;
    border: 1px solid #fff;
    background-color: #555; 
}

#questions-clear-btn {
    letter-spacing: 1.5px;
    font-family: 'Cabin', sans-serif;
    color: #eee;
    font-size: 16px;
    padding: 10px;
    border-radius: 25px;
    width: 120px;
    background: #222;
    position: absolute;
    right: 15px;
    bottom: 20px;
    border: 1px solid #ccc;
    outline: none;
    transition: all .3s;
}

#questions-clear-btn:hover {
    border: 1px solid #fff;
    background: #555;
}

#question-update-btn {
    font-family: 'Cabin', sans-serif;
    padding: 10px;
    margin-left: 80px;
    width: 110px;
    color: #eee;
    font-size: 16px;
    letter-spacing: 1.5px;
    background: #222;
    border-radius: 25px;
    border: 1px solid #ccc;
    outline: none;
    visibility: hidden;
    transition: background .3s, border .3s, box-shadow .3s;
}

#question-update-btn:hover {
    border: 1px solid #fff;
    background: #555;
    color: #fff;
}

#question-delete-btn {
    font-family: 'Cabin', sans-serif;
    margin-left: 80px;
    padding: 10px;
    width: 110px;
    color: #eee;
    font-size: 16px;
    letter-spacing: 1.5px;
    background: #222;
    border-radius: 25px;
    border: 1px solid #ccc;
    outline: none;
    visibility: hidden;
    transition: background .3s, border .3s, box-shadow .3s;
}

#question-delete-btn:hover {
    border: 1px solid #fff;
    background: #555;
}


div.inserted-questions-wrapper {
    padding: 10px 0;
    width: 60%;
    height: 20%;
    position: absolute;
    left: 40px;
    bottom: 40px;
    background: rgba(0, 0, 0, .65);
    border-radius: 3px;
    overflow: auto;
}

div.inserted-questions-wrapper::-webkit-scrollbar {
    background: rgba(0,0,0,.2);
    width: 15px;
}

div.inserted-questions-wrapper::-webkit-scrollbar-thumb {
      background-color: #333; 
}

div.inserted-questions-wrapper p {
    color: #eee;
    background: #444;
    padding: 6px 10px;
    width: 92%;
    margin: 5px auto;
    border-radius: 2px;
    border: 1px solid #ccc;
    transition: background .3s;
}

div.inserted-questions-wrapper p:hover {
    border: 1px solid #fff;
    background: #555;
}

div.inserted-questions-wrapper p span {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
}

div.inserted-questions-wrapper p button {
    font-family: 'Cabin', sans-serif;
    float: right;
    color: #eee;
    padding: 4px 10px;
    margin-top: -4px;
    border: 1px solid #ccc;
    border-radius: 25px;
    letter-spacing: 1.5px;
    background-color: #222;
    transition: all .3s;
}

div.inserted-questions-wrapper p button:hover {
    background: #777;
    border: 1px solid #fff;
}

div.results-list-container {
    width: 30%;
    position: absolute;
    height: 90%;
    right: 35px;
    top: 5%;
    background: rgba(0, 0, 0, .65);
    border-radius: 3px;
    overflow: auto;
}

.clear {
    overflow: hidden;
}

div.results-list-container h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 30px;
    color: #eee;
    text-align: left;
    float: left;
    padding: 20px;
}

#results-clear-btn {
    font-family: 'Cabin', sans-serif;
    letter-spacing: 1.5px;
    float: right;
    margin: 10px;
    color: #eee;
    font-size: 16px;
    padding: 10px;
    border-radius: 25px;
    width: 130px;
    background: #222;
    outline: none;
    border: 1px solid #ccc;
    transition: all .3s;
} 

#results-clear-btn:hover {
    border: 1px solid #fff;
    background: #555;
    color: #fff;
}

div.results-list-container::-webkit-scrollbar {
    background: rgba(0,0,0,.2);
    width: 15px
}

div.results-list-container::-webkit-scrollbar-thumb {
      background-color: #333;  
}
div.results-list-container p {
    font-family: 'Josefin Sans', sans-serif;
    width: 90%;
    padding: 5px;
    margin: 10px auto;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #ccc;
    text-transform:capitalize;
    overflow: hidden;
    color: #eee;
    background: #444;
    transition: background .3s, border .3s;
}

div.results-list-container p:hover {
    border: 1px solid #eee;
    background: #555;
}

div.results-list-container p span {
    margin: 5px;
    float: left;
    font-size: 17px;
}

.delete-result-btn {
    font-family: 'Cabin', sans-serif;
    letter-spacing: 1.5px;
    display: block;
    float: right;
    padding: 5px 10px;
    border-radius: 25px;
    color: #eee;
    background: #222;
    border: 1px solid #ccc;
    outline: none;
    transition: background .3s, border .3s;
} 

.delete-result-btn:hover {
    background: #777;
    border: 1px solid #fff;
}
/**************************************
***********END LANDING SECTION*********
**************************************/

/**************************************
***********START QUIZ SECTION**********
**************************************/
section.quiz-container {
    height: 90vh;
    width: 95%;
    margin: 5vh 2.5%;
    position: relative;
    background: linear-gradient(to bottom right,rgba(0, 0, 0, .35), rgba(0, 0, 0, .75)), url("https://i.pinimg.com/originals/b4/6f/46/b46f462cd6a3a248c876abc80b9b097e.jpg") no-repeat center;
    box-shadow: 0px 10px 25px #aaa;
    background-size: cover;
    overflow: hidden;
    animation: fade .8s;
}

div.quiz-wrapper {
    position: absolute;
    width: 60%;
    height: 80vh;
    background: rgba(0, 0, 0, .65);
    margin: 5vh 5% 5vh 3%;
    border-radius: 3px;
    overflow: auto;
}

div.quiz-wrapper::-webkit-scrollbar {
    background: rgba(0,0,0,.2);
    width: 15px
}

div.quiz-wrapper::-webkit-scrollbar-thumb {
      background-color: #333;  
}


h2#asked-question-text {
    font-family: 'Raleway', sans-serif;
    color: #eee;
    text-indent: 15px;
    font-size: 26px;
    width: 90%;
    margin: 30px auto 10px auto;
}

div.instant-answer-container {
    width: 80%;
    margin: auto;
    position: relative;
    opacity: 0;
}

div#instant-answer-wrapper {
    border-radius: 5px;
    padding: 10px;
    overflow: hidden;
}

div#instant-answer-wrapper::before {
    content: " ";
    height: 0;
    position: absolute;
    width: 0;
    z-index: 1;
    left: 43px;
    bottom: 16px;
    border: medium solid white;
    border-width: 8px 8px 8px 0;
    border-color: transparent #eee transparent transparent;
}


#emotion {
    display: block;
    float: left;
    margin: 14px 15px;
}

div.red {
    border: 1px solid #e62739;
    background-color: rgba(250, 0, 0, .3);
}

div.green {
    border: 1px solid #4CAF50;
    background-color: rgba(0, 250, 0, .2);
}

div#instant-answer-wrapper p {
    font-family: 'Josefin Sans', sans-serif;
    color: #eee;
    float: left;
    width: 80%;
    margin-top: 8px;
}

div#instant-answer-wrapper button {
    font-family: 'Cabin', sans-serif;
    display: inline;
    float: right;
    padding: 4px 10px;
    background: #222;
    outline: none;
    border: 1px solid #eee;
    color: #eee;
    border-radius: 25px;
    letter-spacing: 1.5px;
    font-size: 16px;
    transition: background .3s, color .3s, border .3s;
}

div#instant-answer-wrapper button:hover {
    background: #777;
    color: #fff;
    border: 1px solid #fff;
}

div.quiz-options-wrapper {
    width: 80%;
    margin: 40px auto 0 auto;
}

div.quiz-options-wrapper div {
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 20px 0;
    position: relative;
    transition: all .5s;
    background-color: #444;
    overflow: hidden;
    animation: fade 1s;
}


div.quiz-options-wrapper div:hover {
    border: 1px solid #fff;
    bottom: .5px;
    background-color: #555;
    cursor: pointer;
}

div.quiz-options-wrapper div:hover > p
{
    color: #fff;
}


div.quiz-options-wrapper div span {
    display: block;
    padding: 5px 10px;
    float: left;
    text-align: center;
    margin-left: 20px;
    font-size: 25px;
    border: 1px solid #eee;
    color: #eee;
    font-weight: bold;
    border-radius: 3px;
    transition: all .2s;
    background: rgba(65, 179, 163, .5)
}

div.quiz-options-wrapper div span::before {
    content: " ";
    height: 0;
    position: absolute;
    width: 0;
    z-index: 1;
    left: 31px;
    bottom: -0px;
    border: medium solid white;
    border-width: 10px 10px 10px 10px;
    border-color: #eee transparent transparent transparent;
    transition: all .2s;

}

div.quiz-options-wrapper div:hover > span {
    border: 1px solid #ddd;
    color: #fff;
    background-color: rgba(65, 179, 163, .7);
}

div.quiz-options-wrapper div:hover > span::before {
    border-color: #fff transparent transparent transparent; 
}

div.quiz-options-wrapper div p {
    font-family: 'Josefin Sans', sans-serif;
    float: left;
    margin-left: 10px;
    font-size: 20px;
    color: #eee;
    transition: all .2s;
}

/*PROGRES BAR*/

div.progressBar {
    font-family: 'Cormorant Garamond', serif;
    background: rgba(0, 0, 0, .65);
    position: absolute;
    right: 9%;
    width: 300px;
    height: 300px;
    margin-top: 15%;
    display: flex;
    justify-content: center;
}


div.progressBar progress {
    position: absolute;
    width: 250px;
    height: 25px;
    display: block;
    bottom: 40px;
}


progress {
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Determinate */
progress[value] {
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Indeterminate */
progress:not([value]) {
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

progress::-webkit-progress-bar {
    background: #aaa;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
    border-radius: 25px;
    border: 1px solid #eee;
}

progress::-webkit-progress-value {
    background-color: #444;
    border-radius: 25px;
}

progress::-moz-progress-bar {
    background-color: #444;
    border-radius: 3px;
}


p#progress {
    border: 1px solid #eee;
    position: absolute;
    top: 70px;
    padding: 30px 40px;
    font-size: 75px;
    font-weight: bold;
    color: #eee;
    border-radius: 3px;
    background-color: #444;
}

/**************************************
*********END LANDING SECTION***********
**************************************/

/**************************************
******START FINAL RESULT SECTION*******
**************************************/

section.final-result-container {
    font-family: 'Raleway', sans-serif;
    height: 90vh;
    width: 95%;
    margin: 5vh 2.5%;
    position: relative;
    box-shadow: 0px 10px 25px #aaa;
    background: linear-gradient(to bottom right,rgba(0, 0, 0, .35), rgba(0, 0, 0, .75)), url("https://i.pinimg.com/originals/3a/b1/53/3ab153bc7e88e39d7e473a3e2fc6ab4d.jpg") no-repeat center;
    background-size: cover;
    border-radius: 3px;
    animation: fade .8s;
}

div.final-result-wrapper {
    height: 90vh;
    width: 90%;
    margin: 5vh 5%;
    position: relative;
}

div.final-result {
    width: 70%;
    height: 70vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .65);
    border-radius: 3px;
    overflow: auto;
}

h2#final-score-text {
    width: 80%;
    text-align: center;
    margin: 230px auto 0 auto;
    font-size: 25px;
    color: #eee;
}

button#final-logout-btn {
    font-family: 'Cabin', sans-serif;
    font-size: 16px;
    margin: 10px;
    padding: 10px;
    float: right;
    border-radius: 25px;
    width: 110px;
    letter-spacing: 1.5px;
    color: #eee;
    background: #222;
    outline: none;
    border: 1px solid #ccc;
    transition: all .3s;
}

button#final-logout-btn:hover {
    border: 1px solid #fff;
    background: #555;
}
/**************************************
******END FINAL RESULT SECTION*********
**************************************/
              
            
!

JS

              
                // Lecture: Clear Results

/*******************************
*********QUIZ CONTROLLER********
*******************************/
// 1
var quizController = (function() {

    // 4
    //*********Question Constructor*********/
    function Question(id, questionText, options, correctAnswer) {
        this.id = id;
        this.questionText = questionText;
        this.options = options;
        this.correctAnswer = correctAnswer;
    }

    //34
    var questionLocalStorage = {
        // 35
        setQuestionCollection: function(newCollection) {
            localStorage.setItem('questionCollection', JSON.stringify(newCollection));
        },
        // 36
        getQuestionCollection: function() {
            return JSON.parse(localStorage.getItem('questionCollection'));
        }, 
        // 37
        removeQuestionCollection: function() {
            localStorage.removeItem('questionCollection');
        }
    }
    // 90
    if(questionLocalStorage.getQuestionCollection() === null) {
        questionLocalStorage.setQuestionCollection([]);
    }
    //206
    var quizProgress = {
        questionIndex: 0
    };
    //281
    //***************PERSON CONSTRUCTOR*****************/
    function Person(id, firstname, lastname, score) {
        this.id = id;
        this.firstname = firstname;
        this.lastname = lastname;
        this.score = score;
    }
    // 294
    var currPersonData = {
        fullname: [],
        score: 0
    };
    // 305
    var adminFullName = ['John', 'Smith'];
    // 282
    var personLocalStorage = {
        // 283
        setPersonData: function(newPersonData) {
            localStorage.setItem('personData', JSON.stringify(newPersonData));
        },
        // 284
        getPersonData: function() {
            return JSON.parse(localStorage.getItem('personData'));
        },
        // 285
        removePersonData: function() {
            localStorage.removeItem('personData');
        }
    };
    // 286
    if(personLocalStorage.getPersonData() === null) {
        personLocalStorage.setPersonData([]);
    }
    // 13
    return {
        // 207
        getQuizProgress: quizProgress,
        // 80
        getQuestionLocalStorage: questionLocalStorage,
        // 14
        addQuestionOnLocalStorage: function(newQuestText, opts) {
            // 18
            // console.log('Hi');
            // 19           // 25    // 29       // 31    // 43            // 59
            var optionsArr, corrAns, questionId, newQuestion, getStoredQuests, isChecked;
            // 48
            if(questionLocalStorage.getQuestionCollection() === null) {
                questionLocalStorage.setQuestionCollection([]);
            }
            //20
            optionsArr = [];
            // 30 -- // 41 - Delete --> questionId = 0;
            // questionId = 0;
            // 21
            for(var i = 0; i < opts.length; i++) {
                // 22
                if(opts[i].value !== '') {
                    // 23
                    optionsArr.push(opts[i].value);
                }
                // 26
                if(opts[i].previousElementSibling.checked && opts[i].value !== "") {
                    // 27
                    corrAns = opts[i].value;
                    // 60
                    isChecked = true;
                }
            }

            // 38
            // [ {id: 0}, {id: 1} ]

            // 39
            if(questionLocalStorage.getQuestionCollection().length > 0) {
                // 42
                questionId = questionLocalStorage.getQuestionCollection()[questionLocalStorage.getQuestionCollection().length - 1].id + 1;
            // 40    
            } else {
                questionId = 0;
            }
            // 52
            if(newQuestText.value !== "") {
                // 55
                if(optionsArr.length > 1) {
                    // 58
                    if(isChecked) { 
                        // 32
                        newQuestion = new Question(questionId, newQuestText.value, optionsArr, corrAns);
                        // 44
                        getStoredQuests = questionLocalStorage.getQuestionCollection();
                        // 45
                        getStoredQuests.push(newQuestion);
                        // 46
                        questionLocalStorage.setQuestionCollection(getStoredQuests);
                        // 24
                        // console.log(optionsArr);
                        // 28
                        // console.log(corrAns);
                        // 33
                        // console.log(newQuestion);
                        // 48
                        newQuestText.value = "";
                        // 49
                        for(var x = 0; x < opts.length; x++) {
                            // 50
                            opts[x].value = "";
                            // 51
                            opts[x].previousElementSibling.checked = false;
                        }
                        // 47
                        console.log(questionLocalStorage.getQuestionCollection());
                        // 96
                        return true;
                    // 61
                    } else {
                        // 62
                        alert('You missed to check correct answer, or you checked answer without value');
                        //97
                        return false;
                    }
                // 56
                } else {
                    // 57
                    alert('You must insert at least two options');
                    // 98
                    return false;
                }
            // 53
            } else {
                // 54
                alert('Please, Insert Question');
                // 99
                return false;
            }
        },
        // 231
        checkAnswer: function(ans) {
            // 233
            if(questionLocalStorage.getQuestionCollection()[quizProgress.questionIndex].correctAnswer === ans.textContent) {
                // 335
                currPersonData.score++;
                // 234
                // console.log('Correct');
                // 237
                return true;
            // 235
            } else {
                // 236
                // console.log('Wrong');
                // 238
                return false;
            }
        },
        // 268
        isFinished: function() {
            // 269
            return quizProgress.questionIndex + 1 === questionLocalStorage.getQuestionCollection().length;
        },
        // 287
        addPerson: function() {
            // 288              // 290
            var newPerson, personId, personData;
            // 291
            if(personLocalStorage.getPersonData().length > 0) {
                // 292
                personId = personLocalStorage.getPersonData()[personLocalStorage.getPersonData().length - 1].id + 1;
                // 293
            } else {
                personId = 0
            }
            // 289                              // 294
            newPerson = new Person(personId, currPersonData.fullname[0], currPersonData.fullname[1], currPersonData.score);
            // 297
            personData = personLocalStorage.getPersonData();
            // 298
            personData.push(newPerson);
            // 299
            personLocalStorage.setPersonData(personData);
            // 295
            console.log(newPerson);
        },
        // 304
        getCurrPersonData: currPersonData,
        // 306
        getAdminFullName: adminFullName,
        // 341
        getPersonLocalStorage: personLocalStorage
    };

})();

/*******************************
**********UI CONTROLLER*********
*******************************/
// 2
var UIController = (function() {

    // 5
    var domItems = {
        //*******Admin Panel Elements********/
        adminPanelSection: document.querySelector('.admin-panel-container'), // 322
        questInsertBtn: document.getElementById('question-insert-btn'), // 6
        newQuestionText: document.getElementById('new-question-text'), // 15
        adminOptions: document.querySelectorAll('.admin-option'), // 16
        adminOptionsContainer: document.querySelector(".admin-options-container"), // 65
        insertedQuestsWrapper: document.querySelector(".inserted-questions-wrapper"), // 83
        questUpdateBtn: document.getElementById('question-update-btn'), // 133
        questDeleteBtn: document.getElementById('question-delete-btn'), // 134
        questsClearBtn: document.getElementById('questions-clear-btn'), // 138
        resultsListWrapper: document.querySelector('.results-list-wrapper'), // 344
        clearResultsBtn: document.getElementById('results-clear-btn'), // 363
        //*******Quiz Section Elements*********/
        quizSection: document.querySelector('.quiz-container'), // 315
        askedQuestText: document.getElementById('asked-question-text'), // 204
        quizoptionsWrapper: document.querySelector('.quiz-options-wrapper'), // 208
        progressBar: document.querySelector('progress'), // 219
        progressPar: document.getElementById('progress'), // 222
        instAnsContainer: document.querySelector('.instant-answer-container'), // 242
        instAnsText: document.getElementById('instant-answer-text'), // 247
        instAnsDiv: document.getElementById('instant-answer-wrapper'), // 254
        emotionIcon: document.getElementById('emotion'), // 257
        nextQuestbtn: document.getElementById('next-question-btn'), // 262
        //***********Landing Page Elements************/
        landPageSection: document.querySelector('.landing-page-container'), // 314
        startQuizBtn: document.getElementById('start-quiz-btn'), // 300
        firstNameInput: document.getElementById('firstname'), //309
        lastNameInput: document.getElementById('lastname'), // 310
        //*************Final Result Section Elements***********/
        finalResultSection: document.querySelector('.final-result-container'), // 337
        finalScoreText: document.getElementById('final-score-text') // 333
    };

    // 7
    return {
        getDomItems: domItems, // 8
        // 63
        addInputsDynamically: function() {
            // 67
            var addInput = function() {
                // 68
                // console.log('Works');
                // 69         // 71
                var inputHTML, z;
                // 72
                z = document.querySelectorAll(".admin-option").length;
                // 70                                                                                 //73    
                inputHTML = '<div class="admin-option-wrapper"><input type="radio" class="admin-option-' + z + '" name="answer" value="' + z + '"><input type="text" class="admin-option admin-option-' + z + '" value=""></div>';
                // 74
                domItems.adminOptionsContainer.insertAdjacentHTML('beforeend', inputHTML);
                // 75
                domItems.adminOptionsContainer.lastElementChild.previousElementSibling.lastElementChild.removeEventListener('focus', addInput);
                // 76
                domItems.adminOptionsContainer.lastElementChild.lastElementChild.addEventListener('focus', addInput);
            }
            // 66
            domItems.adminOptionsContainer.lastElementChild.lastElementChild.addEventListener('focus', addInput);
        },
        // 79
        createQuestionList: function(getQuestions) {
            // 86          // 91
            var questHTML, numberingArr;
            // 92
            numberingArr = [];
            // 82
            // console.log(getQuestions);
            // 84
            domItems.insertedQuestsWrapper.innerHTML = "";
            // 85
            for(var i = 0; i < getQuestions.getQuestionCollection().length; i++) {
                // 93
                numberingArr.push(i + 1);
                // 87                     // 94                    // 88
                questHTML = '<p><span>' + numberingArr[i] + '. ' + getQuestions.getQuestionCollection()[i].questionText + '</span><button id="question-' + getQuestions.getQuestionCollection()[i].id + '">Edit</button></p>';
                // 95
                // console.log(getQuestions.getQuestionCollection()[i].id);
                // 89
                domItems.insertedQuestsWrapper.insertAdjacentHTML('afterbegin', questHTML);
            }
        },
        // 104                                           // 130                // 132              // 176
        editQuestList: function(event, storageQuestList, addInpsDynFn, updateQuestListFn) {
            // 109     // 113               // 117     // 119      // 125
            var getId, getStorageQuestList, foundItem, placeInArr, optionHTML;
            // 107
            if('question-'.indexOf(event.target.id)) {
                // 110  // 112
                getId = parseInt(event.target.id.split('-')[1]);
                // 114
                getStorageQuestList = storageQuestList.getQuestionCollection();
                // 115
                for(var i = 0; i < getStorageQuestList.length; i++) {
                    // 116
                    if(getStorageQuestList[i].id === getId) {
                        // 118
                        foundItem = getStorageQuestList[i];
                        // 120
                        placeInArr = i;
                    }
                }
                // 121
                // console.log(foundItem, placeInArr);
                // 122
                domItems.newQuestionText.value = foundItem.questionText;
                // 123
                domItems.adminOptionsContainer.innerHTML = '';
                // 128
                optionHTML = '';
                // 124
                for(var x = 0; x < foundItem.options.length; x++) {
                    // 126
                    optionHTML += '<div class="admin-option-wrapper"><input type="radio" class="admin-option-' + x + '" name="answer" value="' + x + '"><input type="text" class="admin-option admin-option-' + x + '" value="'+ foundItem.options[x] + '"></div>';
                }
                // 129
                domItems.adminOptionsContainer.innerHTML = optionHTML;
                // 135
                domItems.questDeleteBtn.style.visibility = 'visible';
                // 136
                domItems.questUpdateBtn.style.visibility = 'visible';
                // 137
                domItems.questInsertBtn.style.visibility = 'hidden';
                // 139
                domItems.questsClearBtn.style.pointerEvents = 'none';
                // 127
                // console.log(optionHTML);
                // 132
                addInpsDynFn();
                // 144
                // console.log(foundItem);
                // 184
                var backDefaultView = function() {
                    // 185
                    var updatedOptions;
                    // CUT from updateQuestions Function
                     // 168
                     domItems.newQuestionText.value = '';
                     // 186
                     updatedOptions = document.querySelectorAll('.admin-option');
                     // 169
                     for(var i = 0; i < updatedOptions.length; i++) {
                         // 170
                         updatedOptions[i].value = '';
                         // 171
                         updatedOptions[i].previousElementSibling.checked = false;
                     }
                     // 172
                     domItems.questDeleteBtn.style.visibility = 'hidden';
                     // 173
                     domItems.questUpdateBtn.style.visibility = 'hidden';
                     // 174
                     domItems.questInsertBtn.style.visibility = 'visible';
                     // 175
                     domItems.questsClearBtn.style.pointerEvents = '';
                     // 178
                     updateQuestListFn(storageQuestList);
                }
                // 141
                var updateQuestion = function() {
                    // 147          // 149
                    var newOptions, optionEls;
                    // 148
                    newOptions = [];
                    // 150
                    optionEls = document.querySelectorAll('.admin-option');
                    // 143
                    foundItem.questionText = domItems.newQuestionText.value;
                    // 146
                    foundItem.correctAnswer = '';
                    // 151
                    for(var i = 0; i < optionEls.length; i++) {
                        // 152
                        if(optionEls[i].value !== '') {
                            // 153
                            newOptions.push(optionEls[i].value);
                            // 154
                            if(optionEls[i].previousElementSibling.checked) {
                                // 155
                                foundItem.correctAnswer = optionEls[i].value;
                            }
                        }
                    }
                    // 156
                    foundItem.options = newOptions;
                    // 159
                    if(foundItem.questionText !== '') {
                        // 162
                        if(foundItem.options.length > 1) {
                            // 165
                            if(foundItem.correctAnswer !== '') {
                                // 157
                                getStorageQuestList.splice(placeInArr, 1, foundItem);
                                // 158
                                storageQuestList.setQuestionCollection(getStorageQuestList);
                                // 187
                                backDefaultView();
                            // 166
                            } else {
                                // 167
                                alert('You missed to check correct answer, or you checked answer without value');
                            }
                        // 163
                        } else
                        // 164
                        alert('You must insert at least two options');
                    // 160
                    } else {
                        // 161
                        alert('Please, insert question');
                    }
                    // 142
                    // console.log('Works');
                    // 145
                    // console.log(foundItem);
                }
                // 140
                domItems.questUpdateBtn.onclick = updateQuestion;
                // 180
                var deleteQuestion = function() {
                    // 181
                   // console.log('Works');
                   // 182
                   getStorageQuestList.splice(placeInArr, 1);
                   // 183
                   storageQuestList.setQuestionCollection(getStorageQuestList);
                   // 188
                   backDefaultView();
                }
                // 179
                domItems.questDeleteBtn.onclick = deleteQuestion;

            }
            // 106
            // console.log(event, storageQuestList);
            // 108
            // console.log(event.target.id);
            // 111
            // console.log(getId);
        },
        // 190
        clearQuestList: function(storageQuestList) {
            //199
            if(storageQuestList.getQuestionCollection() !== null) {
            // 192
            // console.log(storageQuestList);
            // 193
                if(storageQuestList.getQuestionCollection().length > 0) {
                    // 194
                    var conf = confirm('Warning! You will lose entire question list');
                    // 195
                    // console.log(conf);
                    // 196
                    if(conf) {
                        // 197
                        storageQuestList.removeQuestionCollection();
                        // 198
                        domItems.insertedQuestsWrapper.innerHTML = '';
                    }
                }
            }
        },
        // 200
        displayQuestion: function(storageQuestList, progress) {
            // 211                         // 213
            var newOptionHTML, characterArr;
            // 214
            characterArr = ['A', 'B', 'C', 'D', 'E', 'F'];
            // 202
            // console.log('Works');
            // 203
            if(storageQuestList.getQuestionCollection().length > 0) {
                // 205
                domItems.askedQuestText.textContent = storageQuestList.getQuestionCollection()[progress.questionIndex].questionText;
                // 209
                domItems.quizoptionsWrapper.innerHTML = '';
                // 210
                for(var i = 0; i < storageQuestList.getQuestionCollection()[progress.questionIndex].options.length; i++) {
                    // 212
                    newOptionHTML = '<div class="choice-' + i +'"><span class="choice-' + i +'">' + characterArr[i] + '</span><p  class="choice-' + i +'">' + storageQuestList.getQuestionCollection()[progress.questionIndex].options[i] + '</p></div>';
                    // 215
                    domItems.quizoptionsWrapper.insertAdjacentHTML('beforeend', newOptionHTML);
                }
            }
        },
        // 216
        displayProgress: function(storageQuestList, progress) {
            // 218
            // console.log('Works');
            // 220
            domItems.progressBar.max = storageQuestList.getQuestionCollection().length;
            // 221
            domItems.progressBar.value = progress.questionIndex + 1;
            // 223
            domItems.progressPar.textContent = (progress.questionIndex + 1) + '/' + storageQuestList.getQuestionCollection().length;
        },
        // 239
        newDesign: function(ansResult, selectedAnswer) {
            // 244               // 249
            var twoOptions, index;
            // 250
            index = 0;
            // 252 
            if(ansResult) {
                // 253
                index = 1;
            }
            // 245
            twoOptions = {
                // 246
                instAnswerText: ['This is a wrong answer', 'This is a correct answer'],
                // 255
                instAnswerClass: ['red', 'green'],
                // 258
                emotionType: ['https://i.pinimg.com/564x/d8/63/0d/d8630d7d6aa67abbad8a2805a7aed9d8.jpg', 'https://i.pinimg.com/564x/45/8b/d2/458bd2a17801735649661a420f0e1f4b.jpg'],
                // 261
                optionSpanBg: ['rgba(200, 0, 0, .7)', 'rgba(0, 250, 0, .2)']
            };
            // 241
            domItems.quizoptionsWrapper.style.cssText = 'opacity: 0.6; pointer-events: none;';
            // 243
            domItems.instAnsContainer.style.opacity = '1';
            // 248                                                                                               // 251
            domItems.instAnsText.textContent = twoOptions.instAnswerText[index];
            // 256
            domItems.instAnsDiv.className = twoOptions.instAnswerClass[index];
            // 259
            domItems.emotionIcon.setAttribute('src', twoOptions.emotionType[index]);
            // 260
            selectedAnswer.previousElementSibling.style.backgroundColor = twoOptions.optionSpanBg[index];
        },
        // 271
        resetDesign: function() {
            // 272
            domItems.quizoptionsWrapper.style.cssText = '';
            // 273
            domItems.instAnsContainer.style.opacity = '0';
        },
        // 302
        getFullName: function(currPerson, storageQuestList, admin) {
            // 323
            if(domItems.firstNameInput.value !== '' && domItems.lastNameInput.value !== '') {
                // 318
                if(!(domItems.firstNameInput.value === admin[0] && domItems.lastNameInput.value === admin[1])) {
                    // 325
                    if(storageQuestList.getQuestionCollection().length > 0) {
                        // 311
                        currPerson.fullname.push(domItems.firstNameInput.value);
                        // 312
                        currPerson.fullname.push(domItems.lastNameInput.value);
                        // 308
                        // console.log('Quiz has started');
                        // 316
                        domItems.landPageSection.style.display = 'none';
                        // 317
                        domItems.quizSection.style.display = 'block';
                        // 313
                        console.log(currPerson);
                        // 326
                    } else {
                        alert('Quiz is not ready, please contact to administrator');
                    }
                    // 319
                } else {
                    // 320
                    domItems.landPageSection.style.display = 'none';
                    // 321
                    domItems.adminPanelSection.style.display = 'block';
                }
                // 324
            } else {
                alert('Please, enter your first name and last name');
            }
        },
        // 331
        finalResult: function(currPerson) {
            // 334
            domItems.finalScoreText.textContent = currPerson.fullname[0] + ' ' + currPerson.fullname[1] + ', ' + 'your final score is ' + currPerson.score;
            // 336
            domItems.quizSection.style.display = 'none';
            // 338
            domItems.finalResultSection.style.display = 'block';
        },
        // 339
        addResultOnPanel: function(userData) {
            // 343
            var resultHTML;
            // 345
            domItems.resultsListWrapper.innerHTML = '';
            // 346
            for(var i = 0; i < userData.getPersonData().length; i++) {
                // 347
                resultHTML = '<p class="person person-' + i + '"><span class="person-' + i + '">' + userData.getPersonData()[i].firstname + ' ' + userData.getPersonData()[i].lastname + ' - ' + userData.getPersonData()[i].score + ' Points</span><button id="delete-result-btn_' + userData.getPersonData()[i].id + '" class="delete-result-btn">Delete</button></p>';
                // 348
                domItems.resultsListWrapper.insertAdjacentHTML('afterbegin', resultHTML);
            }
        },
        // 350
        deleteResult: function(event, userData) {
            // 353       // 356
            var getId, personArr; 
            // 357
            personArr = userData.getPersonData();
            // 352
            if('delete-result-btn_'.indexOf(event.target.id)) {
                // 354
                getId = parseInt(event.target.id.split('_')[1]);
                // 355
                // console.log(getId);
                // 358
                for(var i = 0; i < personArr.length; i++) {
                    // 359
                    if(personArr[i].id === getId) {
                        // 360
                        personArr.splice(i, 1);
                        // 361
                        userData.setPersonData(personArr);
                    }
                }
            }
        },
        // 365
        clearResultList: function(userData) {
            // 367
            var conf;
            // 373
            if(userData.getPersonData() !== null) {
                // 372
                if(userData.getPersonData().length > 0) {
                // 368
                    conf = confirm('Warning! You will lose entire result list');
                    // 369
                    if(conf) {
                        // 370
                        userData.removePersonData();
                        // 371
                        domItems.resultsListWrapper.innerHTML = '';
                    }
                }
            }
        }
    };

})();

/********************************
***********CONTROLLER*********
********************************/
// 3
var controller = (function(quizCtrl, UICtrl) {

    // 11
    var selectedDomItems = UICtrl.getDomItems;
    // 64
    UICtrl.addInputsDynamically();
    // 81
    UICtrl.createQuestionList(quizCtrl.getQuestionLocalStorage);
    // 9 -- //12 (change with var selectedDomItems)
    selectedDomItems.questInsertBtn.addEventListener('click', function() {
        // 77
        var adminOptions = document.querySelectorAll('.admin-option');
        // 10
        // console.log('Works');
        // 100             // 17                                                                // 78
        var checkBoolean = quizCtrl.addQuestionOnLocalStorage(selectedDomItems.newQuestionText, adminOptions);
        // 101
        if(checkBoolean) {
            // 102
            UICtrl.createQuestionList(quizCtrl.getQuestionLocalStorage);
        }

    });

    // 103
    selectedDomItems.insertedQuestsWrapper.addEventListener('click', function(e) {
        // 105                                                    // 131                        // 132                           
        UICtrl.editQuestList(e, quizCtrl.getQuestionLocalStorage, UICtrl.addInputsDynamically, UICtrl.createQuestionList);// 177
    });

    // 189
    selectedDomItems.questsClearBtn.addEventListener('click', function() {
        // 191
        UICtrl.clearQuestList(quizCtrl.getQuestionLocalStorage);
    });
    // 201
    UICtrl.displayQuestion(quizCtrl.getQuestionLocalStorage, quizCtrl.getQuizProgress);
    // 217
    UICtrl.displayProgress(quizCtrl.getQuestionLocalStorage, quizCtrl.getQuizProgress);
    // 224
    selectedDomItems.quizoptionsWrapper.addEventListener('click', function(e) {
        // 225
        // console.log(e);
        // 226
        var updatedOptionsDiv = selectedDomItems.quizoptionsWrapper.querySelectorAll('div');
        // 227
        for(var i = 0; i < updatedOptionsDiv.length; i++) {
            // 228
            if(e.target.className === 'choice-' + i) {
                // 229
                // console.log(e.target.className);
                // 230
                var answer = document.querySelector('.quiz-options-wrapper div p.' + e.target.className);
                // 232
                var answerResult = quizCtrl.checkAnswer(answer);
                // 240
                UICtrl.newDesign(answerResult, answer);
                //279
                if(quizCtrl.isFinished()) {
                    // 280
                    selectedDomItems.nextQuestbtn.textContent = 'Finish';
                }
                // 265
                var nextQuestion = function(questData, progress) {
                    // 267
                    if(quizCtrl.isFinished()) {
                        // 296
                        quizCtrl.addPerson();
                        // 332
                        UICtrl.finalResult(quizCtrl.getCurrPersonData);
                        // 278
                        // console.log('Finished');
                    // 270
                    } else {
                        // 274
                        UICtrl.resetDesign();
                        // 275
                        quizCtrl.getQuizProgress.questionIndex++;
                        // 276
                        UICtrl.displayQuestion(quizCtrl.getQuestionLocalStorage, quizCtrl.getQuizProgress);
                        // 277
                        UICtrl.displayProgress(quizCtrl.getQuestionLocalStorage, quizCtrl.getQuizProgress);
                    }
                }
                // 264
                selectedDomItems.nextQuestbtn.onclick = function() {
                    // 266
                    nextQuestion(quizCtrl.getQuestionLocalStorage, quizCtrl.getQuizProgress);
                }
            }
        }
    });
    // 301
    selectedDomItems.startQuizBtn.addEventListener('click', function() {
        // 303                      // 307
        UICtrl.getFullName(quizCtrl.getCurrPersonData, quizCtrl.getQuestionLocalStorage, quizCtrl.getAdminFullName);
    });
    // 327
    selectedDomItems.lastNameInput.addEventListener('focus', function() {
        // 328
        selectedDomItems.lastNameInput.addEventListener('keypress', function(e) {
            // 329
            if(e.keyCode === 13) {
                // 330
                UICtrl.getFullName(quizCtrl.getCurrPersonData, quizCtrl.getQuestionLocalStorage, quizCtrl.getAdminFullName);
            }
        });
    });
    // 340                              // 342
    UICtrl.addResultOnPanel(quizCtrl.getPersonLocalStorage);
    // 349
    selectedDomItems.resultsListWrapper.addEventListener('click', function(e) {
        // 351
        UICtrl.deleteResult(e, quizCtrl.getPersonLocalStorage);
        // 362
        UICtrl.addResultOnPanel(quizCtrl.getPersonLocalStorage);
    });
    // 364
    selectedDomItems.clearResultsBtn.addEventListener('click', function() {
        // 366
        UICtrl.clearResultList(quizCtrl.getPersonLocalStorage);
    });

})(quizController, UIController);
              
            
!
999px

Console