Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">


     <!-- Bootstrap core CSS -->
     <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

         <!-- Custom fonts for this template -->
         <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
         <link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
         <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">


    <link href="css/new-age.css" rel="stylesheet">

    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <header class="masthead">
      <div class="container h-100">
        <div class="row h-100">
          <div class="col-lg-7 my-auto">
            <div class="header-content mx-auto mt-5">
              <img src="img/doyousurvive.png" class="img-fluid" alt="Logo aplikacji">
              <div class="mt-5">
              <a href="#firstQuestion" class="btn btn-outline btn-xl js-scroll-trigger mt-5">Start!</a>
            </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <section class="download bg-primary text-center" id="firstQuestion">
      <div class="container">
        <div class="row">
          <div class="col-md-8 mx-auto">
            <h2 class="section-heading">How old are you?</h2>
            <div class="mt-5" >
              <input id="inputAge" class="form-control mb-2 mr-sm-2">
            </div>
            <div class="mt-5">
              <a href="#secondQuestion" onclick="Age = inputAge.value" class="btn btn-outline btn-xl js-scroll-trigger mt-5">Next</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="download bg-secondary text-center" id="secondQuestion">
      <div class="container">
        <div class="row">
          <div class="col-md-8 mx-auto">
            <h2 class="section-heading">What is your sex?</h2>
            <div class="mt-5">
                <div class="btn-group" role="group" aria-label="Basic example">
                  <a href="#thirdQuestion" class="js-scroll-trigger">
                    <button type="button" onclick="Sex = 'Male'" class="btn btn-secondary">Male</button>
                    <button type="button" onclick="Sex = 'Female'" class="btn btn-secondary">Female</button>
                  </a>
                  </div>
          </div>
        </div>
      </div>
    </section>

    <section class="download bg-third text-center" id="thirdQuestion">
        <div class="container">
          <div class="row">
            <div class="col-md-8 mx-auto">
              <h2 class="section-heading">Family members number</h2>
              <div class="mt-5">
                <input id="sibsp" type="text" class="form-control mb-2 mr-sm-2">
              </div>
              <div class="mt-3">
                <a href="#fourthQuestion" onclick="SibSp = sibsp.value" class="btn btn-outline btn-xl js-scroll-trigger mt-5">Next</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="download bg-fourth text-center" id="fourthQuestion">
          <div class="container">
            <div class="row">
              <div class="col-md-8 mx-auto">
                  <h2 class="section-heading">Number of children</h2>
                  <div class="mt-5">
                    <input id="parch" type="text" class="form-control mb-2 mr-sm-2">
                  </div>
                  <div class="mt-3">
                    <a href="#fiveQuestion" onclick="Parch = parch.value" class="btn btn-outline btn-xl js-scroll-trigger mt-5">Next</a>
          </div>
          </div>
        </section>

        <section class="download bg-primary text-center" id="fiveQuestion">
          <div class="container">
            <div class="row">
              <div class="col-md-8 mx-auto">
                  <h2 class="section-heading">Which class do u travel?</h2>
                  <div class="mt-5">
                  <div class="btn-group" role="group" aria-label="Basic example">
                    <a href="#sixQuestion" class="js-scroll-trigger">
                      <button type="button" onclick="Pclass = '1'" class="btn btn-secondary">First class</button>
                      <button type="button" onclick="Pclass = '2'" class="btn btn-secondary">Second class</button>
                      <button type="button" onclick="Pclass = '3'" class="btn btn-secondary">Third class</button>
                    </a>
                    </div>
                  </div>
          </div>
            </div>
          </div>
          </div>
        </section>

        <section class="download bg-secondary text-center" id="sixQuestion">
          <div class="container">
            <div class="row">
              <div class="col-md-8 mx-auto">
                  <h2 class="section-heading">How much you spend for ticket?</h2>
                  <div class="mt-5">
                    <input id="fare" type="text" class="form-control mb-2 mr-sm-2">
                  </div>
                  <div class="mt-3">
                    <a href="#sevenQuestion" onclick="Fare = fare.value" class="btn btn-outline btn-xl js-scroll-trigger mt-5">Next</a>
          </div>
          </div>
        </section>


        <section class="download bg-primary text-center" id="sevenQuestion">
          <div class="container">
            <div class="row">
              <div class="col-md-8 mx-auto">
                  <h2 class="section-heading">Port of Embarkation</h2>
                  <div class="mt-5">
                  <div class="btn-group" role="group" aria-label="Basic example">
                    <a href="#finish" class="js-scroll-trigger">
                      <button type="button" onclick="Embarked = 'C'" class="btn btn-secondary">Cherbourg</button>
                      <button type="button" onclick="Embarked = 'Q'" class="btn btn-secondary">Queenstown</button>
                      <button type="button" onclick="Embarked = 'S'" class="btn btn-secondary">Southampton</button>
                    </a>
                    </div>
                  </div>
          </div>
            </div>
          </div>
          </div>
        </section>

        <section class="download bg-secondary text-center" id="finish">
          <div class="container">
            <div class="row">
              <div class="col-md-8 mx-auto">
                  <div class="mt-3">
                    <a onclick="doFunction()" class="btn btn-outline btn-xl js-scroll-trigger mt-5">Send Request</a>
          </div>
          <div id="idMyModal"></div>
          </div>
        </section>


       <!-- Bootstrap core JavaScript -->
       <script src="vendor/jquery/jquery.min.js"></script>
       <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

       <!-- Plugin JavaScript -->
       <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

       <!-- Custom scripts for this template -->
       <script src="js/new-age.min.js"></script>

       <script>

            var PassengerId = "1000";
            var Survived = null;
            var Pclass;
            var Name = "Mihubid";
            var Sex;
            var Age;
            var SibSp;
            var Parch;
            var Ticket = "Poli";
            var Fare;
            var Cabin = "C100";
            var Embarked

            function getParameters()
            {
              return {
                "Inputs": {
                  "input1": {
                    "ColumnNames": [
                    "PassengerId",
                    "Survived",
                    "Pclass",
                    "Name",
                    "Sex",
                    "Age",
                    "SibSp",
                    "Parch",
                    "Ticket",
                    "Fare",
                    "Cabin",
                    "Embarked"
                    ],
                    "Values": [
                    [
                      PassengerId,
                      Survived,
                      Pclass,
                      Name,
                      Sex,
                      Age,
                      SibSp,
                      Parch,
                      Ticket,
                      Fare,
                      Cabin,
                      Embarked
                    ]
                    ]
                }
              },
              "GlobalParameters": {}
              }
            }

// Neither was accepted when I set with parameters="username=myname"+"&password=mypass" as the server may not accept that
 function doFunction() {

  let xmlhttp = new XMLHttpRequest();
  let url = "https://ussouthcentral.services.azureml.net/workspaces/68df7baef1694e75aed6eef36a8c7985/services/e3a8a602568944f0a4474c3ed5c5b9b4/execute?api-version=2.0&details=true";
  xmlhttp.open("POST", url, true);
  xmlhttp.setRequestHeader("Authorization","Bearer c59klGpprUkS3USr0PFcGpmA/sJYzle64FqL4BaB/bgC2H3UGnhth3HOQN+b+1JQnSQBES8Epun1VT7z+jtdAg==");
  xmlhttp.setRequestHeader("Content-Type", "application/json");
  xmlhttp.onreadystatechange = function () { //Call a function when the state changes.
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var Data = JSON.parse(xmlhttp.responseText);
        var values = Data['Results']['output1']['value']['Values'][0];
        if(values[9] == '1')
        {
            var content = "You survived with " + values[10] + " probability";
            doModal('idMyModal', header, content, strSubmitFunc, btnText);
        }
        else
        {
          var content = "You not survived with " + values[10] + " probability";
          doModal('idMyModal', header, content, strSubmitFunc, btnText);
        }
              }
  }
  xmlhttp.send(JSON.stringify(getParameters()));
}

var header = "";
var strSubmitFunc = "applyButtonFunc()";
var btnText = "Close!";

function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
    var html =  '<div id="modalWindow" class="modal bg-primary">';
    html += '<div class="modal-header">';
    html += '<a class="close" data-dismiss="modal">×</a>';
    html += '<h4>'+heading+'</h4>'
    html += '</div>';
    html += '<div class="modal-body">';
    html += '<p>';
    html += formContent;
    html += '</div>';
    html += '<div class="modal-footer">';
    $("#"+placementId).html(html);
    $("#modalWindow").modal();
}


function hideModal()
{
    // Using a very general selector - this is because $('#modalDiv').hide
    // will remove the modal window but not the mask
    $('.modal.in').modal('hide');
}

  </script>
  </body>
</html>