eclass.unmer.ac.id

<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Dirceu Silva de Oliveira">
    <meta name="generator" content="QUIZ Brasken">
    <title>QUIZPLASTITROQUE</title>

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">

<style>

@font-face {
      font-family: "Intelo-Bold";
      src: url("fonts/Intelo-Bold.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-BoldItalic";
      src: url("fonts/Intelo-BoldItalic.ttf") format("truetype");
      }@font-face {
      font-family: "Intelo-ExtraBold";
      src: url("fonts/Intelo-ExtraBold.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-Italic";
      src: url("fonts/Intelo-Italic.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-Light";
      src: url("fonts/Intelo-Light.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-LightItalic";
      src: url("fonts/Intelo-LightItalic.ttf") format("truetype");
      }@font-face {
      font-family: "Intelo-Medium";
      src: url("fonts/Intelo-Medium.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-Regular";
      src: url("fonts/Intelo-Regular.ttf") format("truetype");
      }

body{background-image: url('img/Fundo.png');
          background-size: cover;
          }
      .mains{padding-left: 350px; margin-bottom: 20px; z-index: 100; }
      .quiz{font-family: Intelo-ExtraBold; color: #1756A5; font-size: 7em }
      .resposta{font-family: Intelo-ExtraBold; color: #1756A5; font-size: 1.5em; margin-top: 30px; margin-left: 20px }
      .resposta span{
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #1756A5;
        font-size: 1em; color: #fffdd9;
        }
      .perguntas{font-family: Intelo-Medium; color: #1756A5; margin-top: 30px; margin-left: 20px}

.check{margin-left: 10px; position: relative; top: -5px}

.obs{font-family: Intelo-Bold; color: #1756A5; margin-top: 30px; margin-left: 20px;}
      #nome{background-color: transparent; border-bottom: 2px solid #1756A5; border-top: 0px; border-left: 0px; border-right: 0px; width: 270px}

.footer{background-image: url('img/base 2.png'); height: 482px}

.gradient-button {
          margin: 10px;
          font-family: Intelo-Medium;
          font-size: 20px;
          padding: 5px 20px;
          text-align: center;
          text-transform: uppercase;
          transition: 0.5s;
          background-size: 200% auto;
          color: #FFF;
          box-shadow: 0 0 20px #eee;
          border-radius: 10px;
          width: 200px;
          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
          cursor: pointer;
          display: inline-block;
          border-radius: 25px;
          text-decoration: none;
      }
      
      .gradient-button-4 {background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5 51%, #00d2ff 100%)}
      .gradient-button-4:hover { background-position: right center; color: #FFF }

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

@media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
        
      }
      @media (min-width: 768px) {
      .footer{background-image: url('img/base 2.png'); height: 482px;
              background-repeat: no-repeat;
              position: relative;
              background-size: 100% auto;
              }
      }

#desktop{display: block;}
      #celular{display: none;}

@media (min-width: 320px) and (max-width: 767px) {
          
          body{height: 700px}
          .mains{padding-left: 10px; margin-bottom: 50px; position: relative; z-index: 100}   
          #desktop{display: none;}
          #celular{display: block;}

.footer{background-image: url('img/base 2.png'); height: 482px; position: relative; top: -250px;}

}
    </style>

</head>
<body>
    
<nav class="navbar navbar-expand-md mb-4" style="background-color: #1656A4;">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="img/logo1.png" alt="">
    </a>
  </div>
</nav>

<main class="container mains">
  <div class="col-lg-12">
    <img class="logo2" src="img/logo2.png" />
  </div>
  <div class="col-lg-12" id="obsv">
    <h1 class="quiz">QUIZ</h1>
  </div>
  <div class="col-lg-12">
    <p class="perguntas">
      6 - Qual dos programas abaixo tem como objetivo aumentar<br /> a reciclagem de resíduos e capacitar catadores em todos os<br /> estados de atuação da Braskem? <small>(1 alternativa correta)</small>
      <br />
      (<input type="radio" id="cad" name="cad" value="Ser+">) Ser+  <span class="check"><img src="img/check.png"></span><br /> 
      (<input type="radio" id="cad" name="cad" value="Catadores Braskem">) Catadores Braskem <span class="can"><img src="img/cancel.png"></span>   <br /> 
      (<input type="radio" id="cad" name="cad" value="Reciclagem Braskem">) Reciclagem Braskem <span class="can"><img src="img/cancel.png"></span> <br />
      (<input type="radio" id="cad" name="cad" value="Recicla e capacita">) Recicla e capacita <span class="can"><img src="img/cancel.png"></span> <br />

</p>
  </div>
  <div class="col-lg-12">
    <h1 class="resposta">CLIQUE NA ALTERNATIVA<span> CORRETA</span></h1>
  </div>
  <div class="col-lg-12">
    <p class="obs" >
      <span id="desktop"> O <u>programa  Ser+</u> beneficia catadores por meio da capacitação<br /> profissional e da reciclagem, e tem como objetivo aumentar a <br />reciclagem de resíduos pós-consumo no Brasil.<br /> Com investimentos em equipamentos e infraestrutura de<br /> unidades de triagem e qualificações profissionais, esses<br /> profissionais conseguem incrementar sua produtividade e renda. </span>

<span id="celular"> O <u>programa  Ser+</u> beneficia catadores por meio da capacitação<br /> profissional e da reciclagem, e tem como objetivo aumentar a <br />reciclagem de resíduos pós-consumo no Brasil.<br /> Com investimentos em equipamentos e infraestrutura de<br /> unidades de triagem e qualificações profissionais, esses<br /> profissionais conseguem incrementar sua produtividade e renda. </span>
    </p>
  </div>
  <div class="col-lg-12">
    <a href="#obsv" id="iniciar" class="gradient-button gradient-button-4 avancar">AVANÇAR</a>

<a href="#obsv" id="proxima" class="gradient-button gradient-button-4 proxima">CONCLUIR</a>
  </div>
</main>

$(".obs").hide();
      $(".proxima").hide();
      $(".check").hide();
      $(".can").hide();
      
      $(document).on("click", "#iniciar", function() {

var nome      = $("#nome").val();         
        var cad       = $("#cad:checked").val();
        
        
        if(cad == null){

alert("Preencha a resposta");

}else{

$(".obs").show();
            $(".avancar").hide();
            $(".proxima").show();
            $(".check").show();
            $(".can").show();

}
      
      });

$(document).on("click", "#proxima", function() {
            
          var cad       = $("#cad:checked").val();
            
          $.ajax({
                cache: false,
                type: 'POST',
                url: 'includes/quiz_6.php',
                data: {cad: cad},
                success: function(html) 
                {
                    window.location.href = "agradecimentos.php";
                  
                }
              }); return false;

});
    </script>

</body>
</html>