nueva prueba

css/all.css

 }
 .footerinfo {
     padding: 0;
-    position: absolute;
     width: 90%;
     bottom: 0;
     margin: 0;
 .datos_candidato {
     margin-bottom: 40px;
 }
-.datos_candidato label {
+.botones_preguntas label {
     font-size: 14px;
     color: #878787;
+    padding-left: 15px;
 }
 .datos_candidato select {
     border: 1px solid #d0d0d0;
     background: transparent;
     transition: all 0.3s;
 }
-.botones_preguntas {
-    padding: 0 15px;
-}
 .btn_agregar_pregunta {
     border: 1px solid #fd4b4b;
     color: #fff;
     color: #fd4b4b;
     background: transparent;
     transition: all 0.3s;
+}
+.body_prueba {
+    padding: 40px 50px;
+    background: #fff;
+    margin-bottom: 40px;
+    margin: 0 15px 40px 15px;
+}
+.body_prueba .contenedor_pruebas h1 {
+    font-size: 18px;
+    padding: 0;
+    color: #949494;
+    margin: 0;
+}
+.titulo_pregunta {
+    padding: 10px 0;
+}
+.body_prueba .contenedor_pruebas .numero_pregunta p {
+    color: #fd4b4b;
+    padding: 0 15px;
+    margin-bottom: 0;
+    font-weight: bold;
+}
+.body_prueba .contenedor_pruebas .titulo_pregunta span {
+    color: #878787;
+    padding: 0 15px 0 0;
+    margin-bottom: 0;
+}
+.respuesta_pregunta {
+    padding: 10px 0px;
+}
+.respuesta_pregunta input {
+    width: 100%;
+    padding: 5px;
+    border: 1px solid #d0d0d0;
+    transition: all 0.3s;
+}
+.respuesta_pregunta input:focus {
+    border: 1px solid #fd4b4b;
+    transition: all 0.3s;
+}
+.body_preg_indi {
+    margin-bottom: 20px;
+}
+.respuesta_pregunta .radio input[type=radio] {
+  display: none;
+}
+.radio label {
+  display: inline-block;
+  cursor: pointer;
+  position: relative;
+  padding-left: 25px;
+  margin-right: 15px;
+  font-size: 14px;
+}
+
+.radio label:before {
+    content: "";
+    display: inline-block;
+    width: 19px;
+    height: 19px;
+    background-color: #fff;
+    margin-right: 10px;
+    position: absolute;
+    left: 0;
+    bottom: 1px;
+    border: 1px solid #d0d0d0;
+}
+.radio label:before {
+  border-radius: 9px;
+}
+.radio input[type=radio]:checked + label:before {
+    content: "\2022";
+    position: absolute;
+    color: #fd4b4b;
+    font-size: 29px;
+    border: 3px solid #fd4b4b;
+    border-radius: 50%;
+    padding: 0px;
+    line-height: 8px;
+    width: 19px;
+    height: 19px;
+    box-sizing: border-box;
+    box-shadow: none;
+}
+input.input_pregunta {
+    border-bottom: 1px solid #d0d0d0;
+    box-shadow: none;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    width: 100%;
+    transition: all 0.3s;
+}
+input.input_pregunta:focus {
+    border-bottom: 1px solid #fd4b4b;
+    transition: all 0.3s;
+}
+.historial_candidatos {
+    margin-bottom: 30px;
+}
+.radio form {
+    margin: 0;
+}
+.button_subir_foto_pregunta input[type="file"] { 
+    display: none; 
+}
+.button_subir_foto_pregunta label{
+    background: #fd4b4b;
+    border: none;
+    border-radius: 0;
+    font-size: 14px;
+    transition: all 0.3s;
+}
+.button_subir_foto_pregunta label:hover{
+    background: #ff1a1a;
+    transition: all 0.3s;
+}
+.img_relaciones {
+    margin: 30px 0;
+    width: 11%;
+    margin-right: 40px;
+    transition: all 0.3s;
+}
+.img_relaciones img {
+    width: 100%;
+}
+.button_subir_foto_pregunta {
+    margin: 20px 0;
+}
+.input_hidden {
+    position: absolute;
+    left: -9999px;
+}
+.selected {
+    background-color: #fd4b4b;
+}
+#sites label {
+    display: inline-block;
+    cursor: pointer;
+    width: 90px;
+    height: 90px;
+}
+#sites label:hover {
+    border: 1px solid #fd4b4b;
+}
+#sites label img {
+    padding: 3px;
+    width: 100%;
+}
+.form-group-guardar-prueba input {
+    background: #fd4b4b;
+    font-size: 14px;
+    border-radius: 0;
+    border: none;
+    transition: all 0.3s;
+}
+.form-group-guardar-prueba input:hover {
+    background: #ff1a1a;
+    transition: all 0.3s;
+}
+.form-group-guardar-prueba {
+    text-align: right;
 }

nueva-prueba.php

             </div>
             <div class="body_preguntas">
                 <div class="botones_preguntas">
+                    <label>Tipo de pregunta</label>
                     <div class="row">
                         <div class="col-md-6">
                             <div class="datos_candidato">
-                                <label>Tipo de pregunta</label>
                                 <select>
                                     <option selected disabled>Selecciona el tipo de pregunta que deseas añadir</option>
                                     <option>Selección múltiple</option>
                             </div>
                         </div>
                         <div class="col-md-6">
-                            <a href="#" class="btn_agregar_pregunta">Añadir pregunta</a>  
+                            <button class="btn_agregar_pregunta">Añadir pregunta</button>  
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="body_prueba">
+                <div class="contenedor_pruebas">
+                    <h1>Preguntas</h1>
+                    <div class="body_preg_indi">
+                        <div class="titulo_pregunta">
+                            <span>Pregunta 1</span><input type="text" name="pregunta" placeholder="Escribe tu pregunta directa aquí" class="input_pregunta">
+                        </div>
+                        <div class="respuesta_pregunta">
+                            <input type="text" name="respuesta" placeholder="Escribe tu respuesta aquí">
+                        </div>
+                    </div>
+                    <div class="body_preg_indi">
+                        <div class="titulo_pregunta">
+                            <span>Pregunta 2</span><input type="text" name="pregunta" placeholder="Escribe tu pregunta verdadero y falso" class="input_pregunta">
+                        </div>
+                        <div class="respuesta_pregunta">
+                            <div class="radio">
+                                <form>
+                                    <input id="true" type="radio" name="gender" value="true" checked="checked">
+                                    <label for="true">Verdadero</label>
+                                    <input id="false" type="radio" name="gender" value="false">
+                                    <label for="false">Falso</label>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="body_preg_indi">
+                        <div class="titulo_pregunta">
+                            <span>Pregunta 3</span><input type="text" name="pregunta" placeholder="Escribe tu pregunta selección múltiple" class="input_pregunta">
+                        </div>
+                        <div class="respuesta_pregunta">
+                            <div class="radio">
+                                <form>
+                                    <input id="opcion1" type="radio" name="gender" value="opcion1">
+                                    <label for="opcion1">Opción 1</label>
+                                    <input id="opcion2" type="radio" name="gender" value="opcion2" checked="checked">
+                                    <label for="opcion2">Opción 2</label>
+                                    <input id="opcion3" type="radio" name="gender" value="opcion3">
+                                    <label for="opcion3">Opción 3</label>
+                                    <input id="opcion4" type="radio" name="gender" value="opcion4">
+                                    <label for="opcion4">Opción 4</label>
+                                    <input id="opcion5" type="radio" name="gender" value="opcion5">
+                                    <label for="opcion5">Opción 5</label>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="body_preg_indi">
+                        <div class="titulo_pregunta">                            
+                            <span>Pregunta 4</span><input type="text" name="pregunta" placeholder="Ve la siguiente imagen y encuentra la faltante" class="input_pregunta">
+                            <div class="button_subir_foto_pregunta">
+                                <form action="">
+                                    <div class="form-group">
+                                        <label for="upload" class="btn d-inline-block btn-info">Subir imagen</label>
+                                        <input type="file" name="" id="upload" />
+                                    </div>
+                                </form>
+                            </div>
+                            <div class="img_relaciones">
+                                <img src="images/prueba.png">
+                            </div>
+                        </div>
+                        <div class="respuesta_pregunta">
+                            <div class="button_subir_foto_pregunta">
+                                <form action="">
+                                    <div class="form-group">
+                                        <label for="upload" class="btn d-inline-block btn-info">Añadir respuesta</label>
+                                        <input type="file" name="" id="upload" />
+                                    </div>
+                                </form>
+                            </div>
+                            <form>
+                                <div id="sites">
+                                    <input type="radio" name="site" id="option1" value="option1" />A.<label for="option1"><img src="images/respuesta.png" alt="Opción 1" /></label>
+                                    <input type="radio" name="site" id="option2" value="option2" />B.<label for="option2"><img src="images/respuesta2.png" alt="Opción 2" /></label>
+                                    <input type="radio" name="site" id="option3" value="option3" />C.<label for="option3"><img src="images/respuesta3.png" alt="Opción 3" /></label>
+                                    <input type="radio" name="site" id="option1" value="option1" />D.<label for="option1"><img src="images/respuesta.png" alt="Opción 1" /></label>
+                                    <input type="radio" name="site" id="option2" value="option2" />E.<label for="option2"><img src="images/respuesta2.png" alt="Opción 2" /></label>
+                                    <input type="radio" name="site" id="option3" value="option3" />F.<label for="option3"><img src="images/respuesta3.png" alt="Opción 3" /></label>
+                                </div>
+                            </form>
+                        </div>
+                        <div class="form-group-guardar-prueba">
+                            <input type="button" class="btn d-inline-block btn-info" value="Guardar prueba">
                         </div>
                     </div>
                 </div>
         </div>
       </div>
     </div>
-</div>
+</div>
+
+<script>
+    $('#sites input:radio').addClass('input_hidden');
+        $('#sites label').click(function() {
+         $(this).addClass('selected').siblings().removeClass('selected');
+    
+    });
+</script>

sidebar.php

                     <a href="index.php"><i class="fas fa-home"></i>Inicio</a>
                 </li>
                 <li id="plazas">
-                    <a href="plazas.php"><i class="far fa-list-alt"></i>Puestos</a>
+                    <a href="#"><i class="far fa-list-alt"></i>Puestos</a>
                 </li>
                 <li id="notificaciones">
-                    <a href="notificaciones.php"><i class="fas fa-shield-alt"></i>Contraseñas</a>
+                    <a href="#"><i class="fas fa-shield-alt"></i>Contraseñas</a>
                 </li>
                 <li id="expedientes">
-                    <a href="expedientes.php"><i class="far fa-user"></i>Expedientes</a>
+                    <a href="#"><i class="far fa-user"></i>Expedientes</a>
                 </li>
                 <li id="resultados">
-                    <a href="resultados.php"><i class="fas fa-chart-line"></i>Resultados</a>
+                    <a href="#"><i class="fas fa-chart-line"></i>Resultados</a>
                 </li>
                 <li id="pruebas">
                     <a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-paperclip"></i>Pruebas</a>
                     </ul>
                 </li>
                 <li id="configuraciones">
-                    <a href="configuraciones.php"><i class="fas fa-cog"></i>Configuraciones</a>
+                    <a href="#"><i class="fas fa-cog"></i>Configuraciones</a>
                 </li>
                 <li id="historial">
-                    <a href="historial.php"><i class="far fa-clock"></i>Historial</a>
+                    <a href="#"><i class="far fa-clock"></i>Historial</a>
                 </li>
                 <li class="cabecera_li">EXTRAS</li>
                 <li id="elementos">