function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
    if (colorName === null || colorName === '') { colorName = 'pastel-danger'; }
    if (text === null || text === '') { text = 'alert'; }
    if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
    if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
    var allowDismiss = true;

    $.notify({
            message: text
        },
        {
            type: colorName,
            allow_dismiss: allowDismiss,
            newest_on_top: true,
            timer: 1000,
            placement: {
                from: placementFrom,
                align: placementAlign
            },
            animate: {
                enter: animateEnter,
                exit: animateExit
            },
    });
}

function createRatings(drating){
    var rating = ``;
    if (drating != 0){
        if (drating > 0)
            rating = `<span class="fa fa-star checked"></span>`;
        else
            rating = `<span class="fa fa-star"></span>`;
        if (drating > 1)
            rating = `${rating}<span class="fa fa-star checked"></span>`;
        else
            rating = `${rating}<span class="fa fa-star"></span>`;
        if (drating > 2)
            rating = `${rating}<span class="fa fa-star checked"></span>`;
        else
            rating = `${rating}<span class="fa fa-star"></span>`;
        if (drating > 3)
            rating = `${rating}<span class="fa fa-star checked"></span>`;
        else
            rating = `${rating}<span class="fa fa-star"></span>`;
        if (drating > 4)
            rating = `${rating}<span class="fa fa-star checked"></span>`;
        else
            rating = `${rating}<span class="fa fa-star"></span>`;
    }
    return rating;
}


document.querySelector('.check').disabled = true;

var randomNum1;
var randomNum2;

//set the largeest number to display

var maxNum = 20;
var total;

randomNum1 = Math.ceil(Math.random() * maxNum);
randomNum2 = Math.ceil(Math.random() * maxNum);
total = randomNum1 + randomNum2;

$("#question").text(randomNum1 + " + " + randomNum2 + "=");

// When users input the value

$("#ans").keyup(function() {

  var input = $(this).val();

  if (input == total) {

    document.querySelector('.check').disabled = false;
    $('#successs').text('matched');
    $('#fail').text('');
    tempData();
  } else {

    document.querySelector('.check').disabled = true;

    $('#fail').text('please check');
    $('#successs').text('');

  }

});

// Wheen "reset button" click, generating new randomNum1 & randomNum2
$("#reset").on("click", function() {
  randomNum1 = Math.ceil(Math.random() * maxNum);
  randomNum2 = Math.ceil(Math.random() * maxNum);
  total = randomNum1 + randomNum2;
   document.querySelector('.check').disabled = true;
  $("#question").empty();
  $("#ans").val('');
  $("#question").prepend(randomNum1 + " + " + randomNum2 + "=");
  $('#successs').text('');
    $('#fail').text('');
});

function tempData(){
        
        $.ajax({
            type: 'GET',
            url: '/save_temp',                              
            data: {
                first: "dhfdsgfksxzcmzdyxjfedsmfadukfsdfsdf"+randomNum1+"dhfdsgfksxzcmzdyxjfedsmfadukfsdfsdf",
                second: "fdgdsfasdgaedrevcvdfgdfgdfsgsdagfd"+randomNum2+"fdgdsfasdgaedrevcvdfgdfgdfsgsdagfd",
                final: "sdfbesgfsdbfcxbvdgyufsdjkfhsdafkhsdfsdau"+total+"sdfbesgfsdbfcxbvdgyufsdjkfhsdafkhsdfsdau"
            },
            success: function (data){
            },
            error: function(e) {
                // console.log(e);
            }}
        );
   
    }