Contact Form 7 - quiz generator V 0.3

generate number quiz for contact form 7 (WordPress plugin)

HTML

<form id="quizgenerator" method="post" action="">

    <fieldset>
      <legend>Define min (from) and max (to) value and language</legend>
      <p><label for="min">From (min):</label><input type="number" id="min" class="number" required /></p>
      <p><label for="max">To (max):</label><input type="number" id="max" class="number" required /></p>
      <p>
        <label for="language">Language:</label>
        <select id="language">
          <option value="0" selected="selected">German</option>
          <option value="1">English</option>
        </select>
      </p>
      <p class="submitcontainer"><input type="submit" class="submit" value="generate quiz code" /></p>
    </fieldset>

    <fieldset>
      <legend>Output</legend>
      <label for="output">quiz code snippet or error log:</label>
      <textarea id="output" readonly="readonly" class="textarea"></textarea>
    </fieldset>

</form>

CSS

body { font-family: arial, sans-serif; font-size: 13px; background: #f9fcff;  }

form { padding: 10px; }
form label { display: block; font-weight: bold; padding: 0px 0px 2px 0px; }
form input.number, form textarea, select 
 { 
  display: block; 
  border: 1px solid #dddddd;
  font-family: inherit; 
  font-size: inherit; 
  padding: 5px;
  box-sizing: border-box;
  transition: all 0.3s linear;
 }
 
form input.number:focus, form textarea:focus, form select.select:focus
 {  
  color: #007df2;
  border-color: #007df2; 
  background: rgba(0,125,242,0.1);
 } 
 
form input.number { width: 120px; }
form textarea { width: 100%; height: 200px; }

form fieldset { border: 1px solid #dddddd; background: #e9e9e9; margin: 0px 0px 10px 0px;  }
form fieldset p { float: left; margin: 0px 10px 10px 0px; }
form fieldset legend { font-size: 1em; padding: 5px; font-style: italic; }

form .submitcontainer { clear: left; }
form input.submit { padding: 5px; cursor: pointer; }

JavaScript

jQuery(document).ready(function() {

var lang = []; lang[0] = []; lang[1] = [];

// de
lang[0][0] = ['Bitte rechne ', ' plus ', ':'];
lang[0][1] = ['Was macht ', ' + ', '?'];
lang[0][2] = ['Bitte addiere ', ' und ', ':'];
lang[0][3] = ['Was ist die Summe aus ', ' und ', '?'];

// en
lang[1][0] = ['Please calculate ', ' plus ', ':'];
lang[1][1] = ['What is ', ' + ', '?']; 
lang[1][2] = ['Please add ', ' and ', ':']; 
lang[1][3] = ['What is the sum of ', ' and ', '?'];


	$('form#quizgenerator').submit(function( event ) {
		event.preventDefault();
        try {
        	if (  $('input#min').val()  &&  $('input#max').val()  ) {
                var min = parseInt(  $('input#min').val()  );
                var max = parseInt(  $('input#max').val()  );

                if (min < max) {
                
                    var quizShortcode = '[quiz quiz-1 class:quiz QUIZREPLACE]';
                    var quiz = '';
                    var txtArr = 0;
                    var l = $('#language').val();

                    for (var i = min; i <= max; i++) {
                        for (var j = min; j <= max; j++) {
                            quiz += ' "' + lang[l][txtArr][0] + i + lang[l][txtArr][1] + j + lang[l][txtArr][2] + '|'+(i+j)+'"';
                            (txtArr < lang[l].length-1) ? txtArr++ : txtArr = 0;
                        }
                    }

                    quizShortcode = quizShortcode.replace('QUIZREPLACE', quiz);   
                    $('#output').val(quizShortcode) 
                }
                else $('#output').val('Error: Min must not be higher or equal to Max');
            }
          else $('#output').val('Error: Undefined input values');    
        }
        catch(error) {
            $('#output').val(error.message);
        }
    });
});