colegio_php/calificar.php at main · agchdev/colegio_php · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body id="bodyCalificar">
<header id="headerCalificar">
    <h1>ZONA DE CALIFICACION DE ALUMNOS</h1>
</header>
<main class="sectionModificar">
    <section class="modal alumnos">
        <h2>Alumnos</h2>
        <input type="text" id="buscador" placeholder="Buscar alumno">
        <?php

        foreach ($alumnos as $alumno) {
            echo "<form class='calificar' action='index.php?action=calificar' method='post'>";
            echo "<div class='viñetaAlum btnCalificar'>";
            echo "<div class='avatar'><img class='avatarIMG' src='img/avatar.png' alt='alumno'></div>";
            echo "<input type='hidden' name='alumno' value='" . $alumno["id"] . "'>";
            echo "<input type='hidden' name='dniAlum' value='" . $alumno["dni"] . "'>";
            echo "<input type='hidden' name='nomAlum' value='" . $alumno["nombre"] . "'>";
            echo "<div>
                <p id='nombresAlum' style='background: none; color: white; border: none; font-weight: bolder;'>" . $alumno["nombre"] . "</p>
                <p class='pDni'>" . $alumno["dni"] . "</p>
                </div>";
            echo "</div>";
            echo "</form>";
        };
        ?>
    </section>
    <section class="modal calificacion">
        <h2>Calificacion</h2>
        <?php
        if(isset($aluCalificaciones)){
            echo "<div class='perfilAlum'>
                    <div><img class='avatarIMG' src='img/avatar.png' alt='alumno'></div>
                    <div>
                        <h2>" . $aluNom . "</h2>
                        <h3>" . $aluDni . "</h3>
                    </div>
                </div>";
            echo "<form id='formCalificar' action='index.php?action=calificador' method='post'>";
                echo "<table class='tablaCalificar'>";
                echo "<tr>";
                echo "<th>Curso</th>";
                echo "<th>Modulo</th>";
                echo "<th>Asignatura</th>";
                echo "<th>Nota</th>";
                echo "</tr>";
                $contador = 0;
                echo "<input type='hidden' name='alumno' value=".$aluDni.">";
                foreach ($aluCalificaciones as $alu) {
                    echo "<tr>";
                    echo "<td>" . $alu["curso"] . "</td>";
                    echo "<td>" . $alu["modulo"] . "</td>";
                    echo "<td>" . $alu["asignatura"] . "</td>";
                    echo "<td> <input class='nota' type='number' name='notaNueva".$contador."' value='" . $alu["nota"] . "'> </td>";
                    echo "</tr>";
                    echo "<input type='hidden' name='curso".$contador."' value=".$alu["curso"].">";
                    echo "<input type='hidden' name='modulo".$contador."' value=".$alu["modulo"].">";
                    echo "<input type='hidden' name='asignatura".$contador."' value=".$alu["asignatura"].">";
                    $contador++;
                }
                echo "</table>";
                echo "<input style='margin-top: 1rem;' type='submit' name='calificar' class='btn' value='GUARDAR'>";
            echo "</form>";
        }else{
            echo "<h2>NO HAY UN ALUMNO SELECCIONADO</h2>";
        }
        ?>
    </section>
    <script>
        const buscador = document.querySelector("#buscador");
        const alums = document.querySelectorAll(".btnCalificar");
        const form = document.querySelectorAll(".calificar");
        const calificacion =document.querySelector(".calificacion");
        const notas =document.querySelectorAll(".nota");
        const formCalificar = document.querySelector("#formCalificar");
        let alumnos = document.querySelectorAll("#nombresAlum");

        buscador.addEventListener("input", (e) => {
            let palabra = e.target.value;
            alumnos = document.querySelectorAll("#nombresAlum");
            alumnos.forEach(alumno => {
                if (alumno.value.toLowerCase().includes(palabra.toLowerCase())) {
                    alumno.parentElement.parentElement.style.display = "flex";
                } else {
                    alumno.parentElement.parentElement.style.display = "none";
                }
            })
        })

        form.forEach(alum => {
            alum.addEventListener("click", () => {
                alum.submit();
            })
        })

        console.log(notas);

        notas.forEach(nota => {
            nota.addEventListener("click", () => {
                console.log(nota)
                console.log("click");
                nota.disabled = false;
            })
        })
        notas.forEach(nota => {
            nota.addEventListener("change", () => {
                console.log("cambio")
                // formCalificar.submit();
            })
        })

        let r = Math.floor(Math.random() * 255);
        let g = Math.floor(Math.random() * 255);
        let b = Math.floor(Math.random() * 255);
        let color = "rgb(" + r + "," + g + "," + b + ")";
        calificacion.style.background = `linear-gradient(0deg, rgba(18,18,18,1) 65%, ${color} 100%)`;

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