@extends("pages.evaluate.evaluate-layout")
@section('content-questions')
<div class="row mt-5 justify-content-md-center">
    <div class="col-md-8 col-sm-12 text-center">
        <div class="question ml-5 text-left">
            <p class="m-0"><span class="question-number evaluate-text-color font-weight-bold">1 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>¿Qué tan clara te pareció la información de toda la herramienta? </p>
            <p class="m-0 text-secondary evaluate-text-color">Marca un número de 1 a 10, siendo 0 demasiado confusa y 10 absolutamente clara</p>
            <div class="bd-example mt-3 text-left">

                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(0)" id="opt-0">0</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(1)" id="opt-1">1</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(2)" id="opt-2">2</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(3)" id="opt-3">3</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(4)" id="opt-4">4</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(5)" id="opt-5">5</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(6)" id="opt-6">6</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(7)" id="opt-7">7</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(8)" id="opt-8">8</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(9)" id="opt-9">9</button>
                <button class="btn btn-outline-warning question-button-number button-number-evaluate" onclick="clickOption(10)" id="opt-10">10</button>
                
            </div>
            
            <div class="question mt-5 ml-5 text-left">
                <p class="m-0"><span class="question-number evaluate-text-color font-weight-bold">2 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>En caso de que tu calificación esté entre 0 y 6, menciona el porqué y en donde consideras que se
                    hace confusa la información.</p>
                <input type="text" class="mt-4 custom-input-text evaluate-text-color" id="evaluate-q1" placeholder="Escribe tu respuesta acá">
            </div>
            <div class="text-center mt-5">
                <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Siguiente</button>
            </div>
        </div> 
        <div class="col-12">
        </div>
    </div>
</div>

@endsection