jasper-lyons · June 15, 2016 19:21
diff --git a/questions-mila.html b/questions-mila.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="application/javascript">
    var html = {
      createElement: function (tagName, options) {
        var element = document.createElement(tagName);
        for (var attribute in options) {
          element[attribute] = options[attribute];  
        }
        return element;
      },
      ul: function (options) {
        return this.createElement('ul', options);
      },
      li: function (options) {
        return this.createElement('li', options);
      },
      input: function (options) {
        return this.createElement('input', options);
      },
      label: function (options) {
        return this.createElement('label', options);
      },
      br: function (options) {
        return this.createElement('br', options);
      },
      h1: function(options) {
        return this.createElement('h1', options);
      },
      button: function(options) {
        return this.createElement('button', options);
      }
    };

    // store the questions
    var questions = [{
      title: 'What is 1 in Latvian?',
      options: ['Eins', 'Viens', 'Vanus', 'One'],
      answerIndex: 1
    },{
      title: 'What is 2 in Latvian?',
      options: ['Eins', 'Viens', 'Vanus', 'One'],
      answerIndex: 1
    }];
    // draw the questions
    function drawQuestion(question, questionIndex) {
      var body = document.querySelector('body');

      var list = html.ul();

      // for each question add an input and label to the unordered list
      question.options.forEach(function addOption(option) {
        var input = html.input({type: 'radio', name: questionIndex});
        var label = html.label({innerHTML: option});

        list.appendChild(input);
        list.appendChild(label);
        // put the answers on new lines
        list.appendChild(html.br());
      });

      var questionTitle = html.h1({innerHTML: question.title});

      // add the title to the body
      body.appendChild(questionTitle);
      
      // add the unordered list to the body
      body.appendChild(list);
    }

    function checkQuestionAnswers() {
      var questionElements = document.querySelectorAll('ul');
      questionElements.forEach(function (questionElement, index) {
        var question = questions[index];
        var options = questionElement.querySelectorAll('input');
        var lables = questionElement.querySelectorAll('label');

        options.forEach(function (option, index) {
          if (option.checked) {
            if (index === question.answerIndex) {
              lables[index].style.color = 'green'; 
            } else {
              lables[index].style.color = 'red';
            }
          }
        });
      });
    }

    function drawCheckButton() {
      var body = document.querySelector('body');
      var button = html.button({innerHTML: 'check'});
      button.addEventListener('click', function () {
        checkQuestionAnswers();
      });
      // add button to the document
      body.appendChild(button);
    }

    // check if the questions are correct
    // signifiy if they are / are not
    window.addEventListener('load', function () {
      questions.forEach(drawQuestion);
      drawCheckButton();
    });
  </script>
 </head>
 <body>
  
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="application/javascript">
	var html = {
	createElement: function (tagName, options) {
	var element = document.createElement(tagName);
	for (var attribute in options) {
	element[attribute] = options[attribute];
	}
	return element;
	},
	ul: function (options) {
	return this.createElement('ul', options);
	},
	li: function (options) {
	return this.createElement('li', options);
	},
	input: function (options) {
	return this.createElement('input', options);
	},
	label: function (options) {
	return this.createElement('label', options);
	},
	br: function (options) {
	return this.createElement('br', options);
	},
	h1: function(options) {
	return this.createElement('h1', options);
	},
	button: function(options) {
	return this.createElement('button', options);
	}
	};

	// store the questions
	var questions = [{
	title: 'What is 1 in Latvian?',
	options: ['Eins', 'Viens', 'Vanus', 'One'],
	answerIndex: 1
	},{
	title: 'What is 2 in Latvian?',
	options: ['Eins', 'Viens', 'Vanus', 'One'],
	answerIndex: 1
	}];
	// draw the questions
	function drawQuestion(question, questionIndex) {
	var body = document.querySelector('body');

	var list = html.ul();

	// for each question add an input and label to the unordered list
	question.options.forEach(function addOption(option) {
	var input = html.input({type: 'radio', name: questionIndex});
	var label = html.label({innerHTML: option});

	list.appendChild(input);
	list.appendChild(label);
	// put the answers on new lines
	list.appendChild(html.br());
	});

	var questionTitle = html.h1({innerHTML: question.title});

	// add the title to the body
	body.appendChild(questionTitle);

	// add the unordered list to the body
	body.appendChild(list);
	}

	function checkQuestionAnswers() {
	var questionElements = document.querySelectorAll('ul');
	questionElements.forEach(function (questionElement, index) {
	var question = questions[index];
	var options = questionElement.querySelectorAll('input');
	var lables = questionElement.querySelectorAll('label');

	options.forEach(function (option, index) {
	if (option.checked) {
	if (index === question.answerIndex) {
	lables[index].style.color = 'green';
	} else {
	lables[index].style.color = 'red';
	}
	}
	});
	});
	}

	function drawCheckButton() {
	var body = document.querySelector('body');
	var button = html.button({innerHTML: 'check'});
	button.addEventListener('click', function () {
	checkQuestionAnswers();
	});
	// add button to the document
	body.appendChild(button);
	}

	// check if the questions are correct
	// signifiy if they are / are not
	window.addEventListener('load', function () {
	questions.forEach(drawQuestion);
	drawCheckButton();
	});
	</script>
	</head>
	<body>

	</body>
	</html>