| <!DOCTYPE html>
|
| <html lang="fr">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Compagnon Pédagogique - Apprentissage Autorégulé Personnalisé</title>
|
|
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
| <style>
|
| :root {
|
| --primary-color: #3b82f6;
|
| --secondary-color: #10b981;
|
| --accent-color: #8b5cf6;
|
| --warning-color: #f59e0b;
|
| --danger-color: #ef4444;
|
| --dark-color: #1e293b;
|
| --light-color: #f8fafc;
|
| --gray-color: #64748b;
|
| }
|
|
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
| background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
| color: var(--dark-color);
|
| line-height: 1.6;
|
| min-height: 100vh;
|
| }
|
|
|
| .container {
|
| max-width: 1400px;
|
| margin: 0 auto;
|
| padding: 20px;
|
| }
|
|
|
|
|
| .header {
|
| background: linear-gradient(135deg, var(--dark-color) 0%, #0f172a 100%);
|
| color: white;
|
| padding: 2rem;
|
| border-radius: 15px;
|
| margin-bottom: 2rem;
|
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .header::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| height: 4px;
|
| background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
|
| }
|
|
|
| .header h1 {
|
| font-size: 2.5rem;
|
| margin-bottom: 0.5rem;
|
| display: flex;
|
| align-items: center;
|
| gap: 15px;
|
| }
|
|
|
| .header p {
|
| font-size: 1.1rem;
|
| opacity: 0.9;
|
| max-width: 800px;
|
| }
|
|
|
| .badge {
|
| background: var(--primary-color);
|
| color: white;
|
| padding: 5px 15px;
|
| border-radius: 20px;
|
| font-size: 0.9rem;
|
| display: inline-block;
|
| margin-top: 10px;
|
| }
|
|
|
|
|
| .nav-tabs {
|
| display: flex;
|
| background: white;
|
| border-radius: 12px;
|
| overflow: hidden;
|
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
| margin-bottom: 2rem;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .nav-tab {
|
| flex: 1;
|
| min-width: 180px;
|
| padding: 1.2rem;
|
| border: none;
|
| background: transparent;
|
| color: var(--gray-color);
|
| font-size: 1rem;
|
| font-weight: 600;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 10px;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .nav-tab:hover {
|
| background: #f8fafc;
|
| color: var(--primary-color);
|
| }
|
|
|
| .nav-tab.active {
|
| background: var(--primary-color);
|
| color: white;
|
| box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
|
| }
|
|
|
|
|
| .tab-content {
|
| display: none;
|
| animation: fadeIn 0.5s ease;
|
| }
|
|
|
| .tab-content.active {
|
| display: block;
|
| }
|
|
|
| @keyframes fadeIn {
|
| from { opacity: 0; transform: translateY(10px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
|
|
| .card {
|
| background: white;
|
| border-radius: 15px;
|
| padding: 2rem;
|
| margin-bottom: 2rem;
|
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
| border-left: 5px solid var(--primary-color);
|
| }
|
|
|
| .card-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: 1.5rem;
|
| padding-bottom: 1rem;
|
| border-bottom: 2px solid #f1f5f9;
|
| }
|
|
|
| .card-header h3 {
|
| font-size: 1.5rem;
|
| color: var(--dark-color);
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| }
|
|
|
|
|
| .questionnaire-section {
|
| margin-bottom: 2.5rem;
|
| padding: 1.5rem;
|
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
| border-radius: 12px;
|
| }
|
|
|
| .questionnaire-header {
|
| display: flex;
|
| align-items: center;
|
| gap: 15px;
|
| margin-bottom: 1.5rem;
|
| padding-bottom: 1rem;
|
| border-bottom: 2px solid #e2e8f0;
|
| }
|
|
|
| .questionnaire-icon {
|
| width: 50px;
|
| height: 50px;
|
| border-radius: 10px;
|
| background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 1.5rem;
|
| color: white;
|
| }
|
|
|
| .questionnaire-title {
|
| font-size: 1.4rem;
|
| color: var(--dark-color);
|
| font-weight: 600;
|
| }
|
|
|
| .questionnaire-description {
|
| color: var(--gray-color);
|
| font-size: 0.95rem;
|
| margin-top: 5px;
|
| }
|
|
|
| .question-item {
|
| background: white;
|
| padding: 1.5rem;
|
| border-radius: 10px;
|
| margin-bottom: 1.5rem;
|
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
| border-left: 4px solid #e2e8f0;
|
| transition: all 0.3s;
|
| }
|
|
|
| .question-item:hover {
|
| border-left-color: var(--primary-color);
|
| transform: translateY(-2px);
|
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .question-text {
|
| font-size: 1.1rem;
|
| font-weight: 500;
|
| color: var(--dark-color);
|
| margin-bottom: 1rem;
|
| line-height: 1.5;
|
| }
|
|
|
| .scale-options {
|
| display: flex;
|
| justify-content: space-between;
|
| gap: 10px;
|
| margin-top: 1rem;
|
| }
|
|
|
| .scale-option {
|
| flex: 1;
|
| text-align: center;
|
| padding: 10px;
|
| border: 2px solid #e2e8f0;
|
| border-radius: 8px;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| background: white;
|
| }
|
|
|
| .scale-option:hover {
|
| border-color: var(--primary-color);
|
| background: rgba(59, 130, 246, 0.05);
|
| }
|
|
|
| .scale-option.selected {
|
| border-color: var(--primary-color);
|
| background: rgba(59, 130, 246, 0.1);
|
| font-weight: 600;
|
| color: var(--primary-color);
|
| }
|
|
|
| .scale-label {
|
| display: block;
|
| font-size: 0.9rem;
|
| color: var(--gray-color);
|
| margin-top: 5px;
|
| }
|
|
|
| .progress-section {
|
| margin-top: 2rem;
|
| padding: 1.5rem;
|
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
| border-radius: 12px;
|
| border-left: 5px solid var(--primary-color);
|
| }
|
|
|
| .progress-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: 1rem;
|
| }
|
|
|
| .progress-title {
|
| font-size: 1.2rem;
|
| color: var(--dark-color);
|
| font-weight: 600;
|
| }
|
|
|
| .progress-percentage {
|
| font-size: 1.3rem;
|
| font-weight: bold;
|
| color: var(--primary-color);
|
| }
|
|
|
| .progress-bar-container {
|
| height: 12px;
|
| background: #e2e8f0;
|
| border-radius: 6px;
|
| overflow: hidden;
|
| margin: 15px 0;
|
| }
|
|
|
| .progress-bar-fill {
|
| height: 100%;
|
| background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
|
| border-radius: 6px;
|
| transition: width 0.5s ease;
|
| width: 0%;
|
| }
|
|
|
| .questionnaire-progress {
|
| display: flex;
|
| justify-content: space-between;
|
| font-size: 0.9rem;
|
| color: var(--gray-color);
|
| }
|
|
|
| .profile-summary {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
| gap: 20px;
|
| margin-top: 2rem;
|
| }
|
|
|
| .profile-card {
|
| background: white;
|
| padding: 1.5rem;
|
| border-radius: 12px;
|
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
| }
|
|
|
| .profile-card-header {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| margin-bottom: 1rem;
|
| padding-bottom: 0.8rem;
|
| border-bottom: 2px solid #f1f5f9;
|
| }
|
|
|
| .profile-card-icon {
|
| width: 40px;
|
| height: 40px;
|
| border-radius: 8px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 1.2rem;
|
| color: white;
|
| }
|
|
|
| .profile-card-title {
|
| font-size: 1.2rem;
|
| font-weight: 600;
|
| color: var(--dark-color);
|
| }
|
|
|
| .trait-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| }
|
|
|
| .trait-item {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| padding: 10px;
|
| background: #f8fafc;
|
| border-radius: 8px;
|
| }
|
|
|
| .trait-name {
|
| font-weight: 500;
|
| color: var(--dark-color);
|
| }
|
|
|
| .trait-value {
|
| font-weight: 600;
|
| color: var(--primary-color);
|
| }
|
|
|
| .recommendations-section {
|
| background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
| border-radius: 12px;
|
| padding: 1.5rem;
|
| margin-top: 2rem;
|
| border-left: 5px solid var(--warning-color);
|
| }
|
|
|
| .recommendation-item {
|
| display: flex;
|
| align-items: flex-start;
|
| gap: 15px;
|
| margin-bottom: 1rem;
|
| padding: 1rem;
|
| background: rgba(255, 255, 255, 0.7);
|
| border-radius: 8px;
|
| }
|
|
|
| .recommendation-icon {
|
| font-size: 1.5rem;
|
| color: var(--warning-color);
|
| }
|
|
|
| .motivation-chart {
|
| height: 300px;
|
| margin-top: 1.5rem;
|
| }
|
|
|
| .section-completion {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| margin-top: 1rem;
|
| padding: 10px;
|
| background: rgba(16, 185, 129, 0.1);
|
| border-radius: 8px;
|
| }
|
|
|
| .section-complete {
|
| background: rgba(16, 185, 129, 0.1);
|
| border-left: 4px solid var(--secondary-color);
|
| }
|
|
|
| .section-incomplete {
|
| background: rgba(239, 68, 68, 0.1);
|
| border-left: 4px solid var(--danger-color);
|
| }
|
|
|
|
|
| .modal {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(0, 0, 0, 0.5);
|
| z-index: 1000;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .modal-content {
|
| background: white;
|
| border-radius: 15px;
|
| padding: 2rem;
|
| width: 90%;
|
| max-width: 600px;
|
| max-height: 80vh;
|
| overflow-y: auto;
|
| animation: slideIn 0.3s ease;
|
| }
|
|
|
| @keyframes slideIn {
|
| from { transform: translateY(-20px); opacity: 0; }
|
| to { transform: translateY(0); opacity: 1; }
|
| }
|
|
|
| .modal-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: 1.5rem;
|
| padding-bottom: 1rem;
|
| border-bottom: 2px solid #f1f5f9;
|
| }
|
|
|
| .modal-title {
|
| font-size: 1.5rem;
|
| color: var(--dark-color);
|
| }
|
|
|
| .modal-close {
|
| background: none;
|
| border: none;
|
| font-size: 1.5rem;
|
| color: var(--gray-color);
|
| cursor: pointer;
|
| }
|
|
|
|
|
| .heatmap-container {
|
| margin-top: 2rem;
|
| }
|
|
|
| .heatmap-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: 1.5rem;
|
| }
|
|
|
| .heatmap-title {
|
| font-size: 1.3rem;
|
| color: var(--dark-color);
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| }
|
|
|
| .heatmap-controls {
|
| display: flex;
|
| gap: 10px;
|
| }
|
|
|
| .heatmap-period {
|
| padding: 8px 15px;
|
| border: 2px solid #e2e8f0;
|
| border-radius: 8px;
|
| background: #f8fafc;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| }
|
|
|
| .heatmap-period:hover {
|
| border-color: var(--primary-color);
|
| }
|
|
|
| .heatmap-period.active {
|
| background: var(--primary-color);
|
| color: white;
|
| border-color: var(--primary-color);
|
| }
|
|
|
| .heatmap-grid {
|
| display: grid;
|
| grid-template-columns: auto repeat(7, 1fr);
|
| gap: 8px;
|
| margin-top: 1rem;
|
| }
|
|
|
| .heatmap-day-label {
|
| text-align: right;
|
| padding: 10px;
|
| font-weight: 600;
|
| color: var(--dark-color);
|
| }
|
|
|
| .heatmap-cell {
|
| aspect-ratio: 1;
|
| border-radius: 4px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 0.8rem;
|
| font-weight: bold;
|
| cursor: pointer;
|
| transition: transform 0.2s;
|
| }
|
|
|
| .heatmap-cell:hover {
|
| transform: scale(1.1);
|
| z-index: 10;
|
| }
|
|
|
| .heatmap-intensity-0 { background: #f1f5f9; color: var(--gray-color); }
|
| .heatmap-intensity-1 { background: #dbeafe; color: var(--dark-color); }
|
| .heatmap-intensity-2 { background: #93c5fd; color: white; }
|
| .heatmap-intensity-3 { background: #3b82f6; color: white; }
|
| .heatmap-intensity-4 { background: #1d4ed8; color: white; }
|
|
|
| .heatmap-week-label {
|
| text-align: center;
|
| padding: 5px;
|
| font-size: 0.9rem;
|
| color: var(--gray-color);
|
| }
|
|
|
| .heatmap-legend {
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| gap: 15px;
|
| margin-top: 1.5rem;
|
| padding-top: 1.5rem;
|
| border-top: 2px solid #f1f5f9;
|
| }
|
|
|
| .legend-item {
|
| display: flex;
|
| align-items: center;
|
| gap: 5px;
|
| }
|
|
|
| .legend-color {
|
| width: 20px;
|
| height: 20px;
|
| border-radius: 4px;
|
| }
|
|
|
|
|
| .time-management-stats {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
| gap: 20px;
|
| margin-top: 2rem;
|
| }
|
|
|
| .time-stat-card {
|
| background: white;
|
| border-radius: 12px;
|
| padding: 1.5rem;
|
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
| border-top: 4px solid var(--secondary-color);
|
| }
|
|
|
| .time-stat-header {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| margin-bottom: 1rem;
|
| }
|
|
|
| .time-stat-icon {
|
| width: 40px;
|
| height: 40px;
|
| border-radius: 10px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 1.2rem;
|
| color: white;
|
| }
|
|
|
| .time-stat-value {
|
| font-size: 2.5rem;
|
| font-weight: bold;
|
| color: var(--secondary-color);
|
| margin: 10px 0;
|
| }
|
|
|
| .time-stat-description {
|
| color: var(--gray-color);
|
| font-size: 0.9rem;
|
| margin-top: 5px;
|
| }
|
|
|
| .progress-circle {
|
| width: 100px;
|
| height: 100px;
|
| position: relative;
|
| margin: 0 auto;
|
| }
|
|
|
| .progress-circle svg {
|
| width: 100%;
|
| height: 100%;
|
| }
|
|
|
| .progress-text {
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| transform: translate(-50%, -50%);
|
| font-size: 1.5rem;
|
| font-weight: bold;
|
| color: var(--secondary-color);
|
| }
|
|
|
|
|
| .effort-pattern {
|
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
| border-radius: 12px;
|
| padding: 1.5rem;
|
| margin-top: 2rem;
|
| }
|
|
|
| .pattern-badge {
|
| display: inline-block;
|
| padding: 8px 15px;
|
| background: linear-gradient(135deg, #f59e0b, #d97706);
|
| color: white;
|
| border-radius: 20px;
|
| font-weight: bold;
|
| margin-bottom: 1rem;
|
| }
|
|
|
| .pattern-details {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| gap: 15px;
|
| margin-top: 1rem;
|
| }
|
|
|
| .pattern-item {
|
| background: white;
|
| padding: 1rem;
|
| border-radius: 8px;
|
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
| }
|
|
|
| .pattern-label {
|
| font-size: 0.9rem;
|
| color: var(--gray-color);
|
| margin-bottom: 5px;
|
| }
|
|
|
| .pattern-value {
|
| font-size: 1.1rem;
|
| font-weight: bold;
|
| color: var(--dark-color);
|
| }
|
|
|
|
|
| .persistence-section {
|
| background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
| border-radius: 12px;
|
| padding: 1.5rem;
|
| margin-top: 2rem;
|
| border-left: 5px solid #f59e0b;
|
| }
|
|
|
| .persistence-header {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| margin-bottom: 1rem;
|
| }
|
|
|
| .persistence-level {
|
| font-size: 1.5rem;
|
| font-weight: bold;
|
| color: #d97706;
|
| }
|
|
|
| .persistence-details {
|
| margin-top: 1rem;
|
| }
|
|
|
| .persistence-item {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| margin-bottom: 10px;
|
| padding: 8px;
|
| background: rgba(255, 255, 255, 0.5);
|
| border-radius: 8px;
|
| }
|
|
|
|
|
| .form-group {
|
| margin-bottom: 1.5rem;
|
| }
|
|
|
| .form-label {
|
| display: block;
|
| margin-bottom: 0.5rem;
|
| font-weight: 600;
|
| color: var(--dark-color);
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
|
|
| .form-control {
|
| width: 100%;
|
| padding: 12px 15px;
|
| border: 2px solid #e2e8f0;
|
| border-radius: 10px;
|
| font-size: 1rem;
|
| transition: all 0.3s;
|
| background: #f8fafc;
|
| }
|
|
|
| .form-control:focus {
|
| outline: none;
|
| border-color: var(--primary-color);
|
| background: white;
|
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
| }
|
|
|
| .form-row {
|
| display: flex;
|
| gap: 20px;
|
| margin-bottom: 1.5rem;
|
| }
|
|
|
| .form-col {
|
| flex: 1;
|
| }
|
|
|
|
|
| .btn {
|
| padding: 12px 25px;
|
| border: none;
|
| border-radius: 10px;
|
| font-size: 1rem;
|
| font-weight: 600;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 10px;
|
| }
|
|
|
| .btn-primary {
|
| background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
|
| color: white;
|
| }
|
|
|
| .btn-primary:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
|
| }
|
|
|
| .btn-secondary {
|
| background: var(--secondary-color);
|
| color: white;
|
| }
|
|
|
| .btn-large {
|
| padding: 15px 30px;
|
| font-size: 1.1rem;
|
| }
|
|
|
|
|
| .flashcard-section {
|
| margin-top: 2rem;
|
| border-top: 2px solid #f1f5f9;
|
| padding-top: 2rem;
|
| }
|
|
|
| .flashcard-container {
|
| max-width: 800px;
|
| margin: 0 auto;
|
| }
|
|
|
| .flashcard {
|
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
| border-radius: 15px;
|
| padding: 3rem 2rem;
|
| margin: 2rem 0;
|
| min-height: 300px;
|
| display: flex;
|
| flex-direction: column;
|
| justify-content: center;
|
| align-items: center;
|
| position: relative;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
| border: 2px solid #e2e8f0;
|
| }
|
|
|
| .flashcard:hover {
|
| transform: translateY(-5px);
|
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
| }
|
|
|
| .flashcard.flipped {
|
| background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
| }
|
|
|
| .flashcard-front, .flashcard-back {
|
| text-align: center;
|
| width: 100%;
|
| }
|
|
|
| .flashcard-category {
|
| position: absolute;
|
| top: 15px;
|
| left: 15px;
|
| background: var(--primary-color);
|
| color: white;
|
| padding: 5px 15px;
|
| border-radius: 20px;
|
| font-size: 0.8rem;
|
| }
|
|
|
| .flashcard-content {
|
| font-size: 1.5rem;
|
| font-weight: 600;
|
| color: var(--dark-color);
|
| margin: 1.5rem 0;
|
| line-height: 1.6;
|
| }
|
|
|
| .flashcard-example {
|
| font-size: 1rem;
|
| color: var(--gray-color);
|
| font-style: italic;
|
| margin-top: 1rem;
|
| border-left: 3px solid var(--secondary-color);
|
| padding-left: 15px;
|
| }
|
|
|
| .flashcard-stats {
|
| position: absolute;
|
| top: 15px;
|
| right: 15px;
|
| display: flex;
|
| gap: 10px;
|
| align-items: center;
|
| }
|
|
|
| .flashcard-score {
|
| background: #10b981;
|
| color: white;
|
| padding: 5px 10px;
|
| border-radius: 15px;
|
| font-size: 0.8rem;
|
| font-weight: bold;
|
| }
|
|
|
| .flashcard-difficulty {
|
| background: #f59e0b;
|
| color: white;
|
| padding: 5px 10px;
|
| border-radius: 15px;
|
| font-size: 0.8rem;
|
| }
|
|
|
| .flashcard-controls {
|
| display: flex;
|
| justify-content: center;
|
| gap: 15px;
|
| margin-top: 2rem;
|
| }
|
|
|
| .flashcard-btn {
|
| padding: 10px 25px;
|
| border: none;
|
| border-radius: 10px;
|
| font-size: 1rem;
|
| font-weight: 600;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
|
|
| .flashcard-btn.easy {
|
| background: #10b981;
|
| color: white;
|
| }
|
|
|
| .flashcard-btn.medium {
|
| background: #f59e0b;
|
| color: white;
|
| }
|
|
|
| .flashcard-btn.hard {
|
| background: #ef4444;
|
| color: white;
|
| }
|
|
|
| .flashcard-btn:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .flashcard-progress {
|
| margin-top: 2rem;
|
| text-align: center;
|
| }
|
|
|
| .progress-bar {
|
| height: 8px;
|
| background: #e2e8f0;
|
| border-radius: 4px;
|
| margin: 10px 0;
|
| overflow: hidden;
|
| }
|
|
|
| .progress-fill {
|
| height: 100%;
|
| background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
| border-radius: 4px;
|
| transition: width 0.3s ease;
|
| }
|
|
|
| .flashcard-stats-summary {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| gap: 15px;
|
| margin-top: 2rem;
|
| }
|
|
|
| .flashcard-stat-item {
|
| background: white;
|
| padding: 1.5rem;
|
| border-radius: 10px;
|
| text-align: center;
|
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
| }
|
|
|
|
|
| .productivity-options {
|
| display: flex;
|
| gap: 15px;
|
| margin-top: 10px;
|
| }
|
|
|
| .productivity-option {
|
| flex: 1;
|
| padding: 15px;
|
| border: 2px solid #e2e8f0;
|
| border-radius: 10px;
|
| text-align: center;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| }
|
|
|
| .productivity-option:hover {
|
| border-color: var(--primary-color);
|
| background: rgba(59, 130, 246, 0.05);
|
| }
|
|
|
| .productivity-option.selected {
|
| border-color: var(--primary-color);
|
| background: rgba(59, 130, 246, 0.1);
|
| box-shadow: 0 5px 15px rgba(59, 130, 246, 0.1);
|
| }
|
|
|
| .productivity-icon {
|
| font-size: 1.5rem;
|
| margin-bottom: 8px;
|
| display: block;
|
| }
|
|
|
|
|
| .energy-patterns {
|
| display: flex;
|
| gap: 15px;
|
| margin-top: 10px;
|
| }
|
|
|
| .energy-pattern {
|
| flex: 1;
|
| padding: 15px;
|
| border: 2px solid #e2e8f0;
|
| border-radius: 10px;
|
| text-align: center;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| }
|
|
|
| .energy-pattern:hover {
|
| border-color: var(--secondary-color);
|
| background: rgba(16, 185, 129, 0.05);
|
| }
|
|
|
| .energy-pattern.selected {
|
| border-color: var(--secondary-color);
|
| background: rgba(16, 185, 129, 0.1);
|
| box-shadow: 0 5px 15px rgba(16, 185, 129, 0.1);
|
| }
|
|
|
|
|
| .time-slots {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 10px;
|
| margin-top: 10px;
|
| }
|
|
|
| .time-slot {
|
| padding: 10px 20px;
|
| border: 2px solid #e2e8f0;
|
| border-radius: 8px;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| text-align: center;
|
| min-width: 80px;
|
| }
|
|
|
| .time-slot:hover {
|
| border-color: var(--accent-color);
|
| background: rgba(139, 92, 246, 0.05);
|
| }
|
|
|
| .time-slot.selected {
|
| border-color: var(--accent-color);
|
| background: rgba(139, 92, 246, 0.1);
|
| box-shadow: 0 3px 10px rgba(139, 92, 246, 0.1);
|
| }
|
|
|
|
|
| .visualization-container {
|
| background: white;
|
| border-radius: 15px;
|
| padding: 2rem;
|
| margin-top: 2rem;
|
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
| }
|
|
|
| .chart-container {
|
| position: relative;
|
| height: 400px;
|
| width: 100%;
|
| }
|
|
|
|
|
| .planning-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
| gap: 20px;
|
| margin-top: 2rem;
|
| }
|
|
|
| .session-card {
|
| background: white;
|
| border-radius: 12px;
|
| padding: 1.5rem;
|
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
| border-top: 4px solid var(--primary-color);
|
| transition: transform 0.3s;
|
| }
|
|
|
| .session-card:hover {
|
| transform: translateY(-5px);
|
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .session-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: flex-start;
|
| margin-bottom: 1rem;
|
| }
|
|
|
| .session-date {
|
| font-size: 1.2rem;
|
| font-weight: bold;
|
| color: var(--dark-color);
|
| }
|
|
|
| .session-repetition {
|
| background: var(--primary-color);
|
| color: white;
|
| padding: 5px 15px;
|
| border-radius: 20px;
|
| font-size: 0.9rem;
|
| }
|
|
|
| .session-details {
|
| margin-top: 1rem;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 8px;
|
| }
|
|
|
| .detail-item {
|
| display: flex;
|
| justify-content: space-between;
|
| padding: 5px 0;
|
| border-bottom: 1px dashed #e2e8f0;
|
| }
|
|
|
|
|
| .notification-card {
|
| background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
| border-left: 5px solid var(--warning-color);
|
| padding: 1.5rem;
|
| border-radius: 12px;
|
| margin-bottom: 1rem;
|
| animation: slideIn 0.5s ease;
|
| }
|
|
|
|
|
| .stats-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
| gap: 20px;
|
| margin-top: 2rem;
|
| }
|
|
|
| .stat-card {
|
| background: white;
|
| border-radius: 12px;
|
| padding: 1.5rem;
|
| text-align: center;
|
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
| }
|
|
|
| .stat-value {
|
| font-size: 2.5rem;
|
| font-weight: bold;
|
| color: var(--primary-color);
|
| margin: 10px 0;
|
| }
|
|
|
| .stat-label {
|
| color: var(--gray-color);
|
| font-size: 0.9rem;
|
| }
|
|
|
|
|
| .quality-indicator {
|
| display: flex;
|
| gap: 10px;
|
| margin: 15px 0;
|
| }
|
|
|
| .quality-dot {
|
| width: 25px;
|
| height: 25px;
|
| border-radius: 50%;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| color: white;
|
| font-weight: bold;
|
| font-size: 0.8rem;
|
| }
|
|
|
| .quality-dot:hover {
|
| transform: scale(1.2);
|
| }
|
|
|
| .quality-0 { background: linear-gradient(135deg, #ef4444, #dc2626); }
|
| .quality-1 { background: linear-gradient(135deg, #f59e0b, #d97706); }
|
| .quality-2 { background: linear-gradient(135deg, #10b981, #059669); }
|
| .quality-3 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
|
|
|
| .quality-dot.active {
|
| box-shadow: 0 0 0 3px white, 0 0 0 6px currentColor;
|
| }
|
|
|
|
|
| .flashcard-stats-card {
|
| grid-column: span 2;
|
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
| }
|
|
|
| .flashcard-stats-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: 1rem;
|
| }
|
|
|
| .streak-counter {
|
| background: linear-gradient(135deg, #f59e0b, #d97706);
|
| color: white;
|
| padding: 5px 15px;
|
| border-radius: 20px;
|
| font-weight: bold;
|
| display: flex;
|
| align-items: center;
|
| gap: 5px;
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .form-row {
|
| flex-direction: column;
|
| gap: 0;
|
| }
|
|
|
| .nav-tabs {
|
| flex-direction: column;
|
| }
|
|
|
| .planning-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .header h1 {
|
| font-size: 2rem;
|
| }
|
|
|
| .productivity-options,
|
| .energy-patterns {
|
| flex-direction: column;
|
| }
|
|
|
| .time-slots {
|
| justify-content: center;
|
| }
|
|
|
| .flashcard-controls {
|
| flex-direction: column;
|
| }
|
|
|
| .flashcard-btn {
|
| width: 100%;
|
| justify-content: center;
|
| }
|
|
|
| .flashcard-stats-summary {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .heatmap-grid {
|
| gap: 4px;
|
| }
|
|
|
| .heatmap-cell {
|
| font-size: 0.7rem;
|
| }
|
|
|
| .time-management-stats {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .scale-options {
|
| flex-direction: column;
|
| }
|
|
|
| .profile-summary {
|
| grid-template-columns: 1fr;
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
|
|
| <header class="header">
|
| <h1><i class="fas fa-graduation-cap"></i> Compagnon Pédagogique</h1>
|
| <p>Soutien à l'Apprentissage Autorégulé Durable par une Planification d'Étude Personnalisée et une Adaptation Générative de Contenu</p>
|
| <div class="badge">Version Professionnelle 2.0 | Profil Personnalisé SM-2</div>
|
| </header>
|
|
|
|
|
| <nav class="nav-tabs">
|
| <button class="nav-tab active" onclick="showTab('profile')">
|
| <i class="fas fa-user-circle"></i> Profil Apprenant
|
| </button>
|
| <button class="nav-tab" onclick="showTab('objectif')">
|
| <i class="fas fa-bullseye"></i> Objectif
|
| </button>
|
| <button class="nav-tab" onclick="showTab('planner')">
|
| <i class="fas fa-calendar-alt"></i> Planner SM-2
|
| </button>
|
| <button class="nav-tab" onclick="showTab('flashcards')">
|
| <i class="fas fa-layer-group"></i> Flashcards
|
| </button>
|
| <button class="nav-tab" onclick="showTab('journal')">
|
| <i class="fas fa-book"></i> Journal SRL
|
| </button>
|
| <button class="nav-tab" onclick="showTab('notifications')">
|
| <i class="fas fa-bell"></i> Notifications IA
|
| </button>
|
| <button class="nav-tab" onclick="showTab('stats')">
|
| <i class="fas fa-chart-line"></i> Statistiques
|
| </button>
|
| <button class="nav-tab" onclick="showTab('learn')">
|
| <i class="fas fa-graduation-cap"></i> Apprendre à manager l'effort
|
| </button>
|
| </nav>
|
|
|
|
|
| <section id="profile" class="tab-content active">
|
| <div class="card">
|
| <div class="card-header">
|
| <h3><i class="fas fa-user-circle"></i> Profil d'Apprentissage Personnalisé</h3>
|
| <button class="btn btn-secondary" onclick="saveProfile()">
|
| <i class="fas fa-save"></i> Sauvegarder le Profil
|
| </button>
|
| </div>
|
|
|
|
|
| <div class="progress-section">
|
| <div class="progress-header">
|
| <div class="progress-title">Complétion du Profil</div>
|
| <div class="progress-percentage" id="profileCompletion">0%</div>
|
| </div>
|
| <div class="progress-bar-container">
|
| <div class="progress-bar-fill" id="profileProgressBar"></div>
|
| </div>
|
| <div class="questionnaire-progress">
|
| <span>Questionnaires complétés: <span id="completedSections">0/5</span></span>
|
| <span>Profil personnalisé: <span id="personalizationLevel">Basique</span></span>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="questionnaire-section" id="big5-section">
|
| <div class="questionnaire-header">
|
| <div class="questionnaire-icon">
|
| <i class="fas fa-brain"></i>
|
| </div>
|
| <div>
|
| <div class="questionnaire-title">Profil de Personnalité (Big Five Traits)</div>
|
| <div class="questionnaire-description">Évaluez vos traits de personnalité sur une échelle de 1 à 5</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Je suis quelqu'un de sociable, extraverti, énergique</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectScale('extraversion', 1)">
|
| 1<br><span class="scale-label">Pas du tout</span>
|
| </div>
|
| <div class="scale-option" onclick="selectScale('extraversion', 2)">
|
| 2<br><span class="scale-label">Un peu</span>
|
| </div>
|
| <div class="scale-option" onclick="selectScale('extraversion', 3)">
|
| 3<br><span class="scale-label">Modérément</span>
|
| </div>
|
| <div class="scale-option" onclick="selectScale('extraversion', 4)">
|
| 4<br><span class="scale-label">Beaucoup</span>
|
| </div>
|
| <div class="scale-option" onclick="selectScale('extraversion', 5)">
|
| 5<br><span class="scale-label">Extrêmement</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Je fais preuve de curiosité intellectuelle, j'aime les nouvelles expériences</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectScale('openness', 1)">1</div>
|
| <div class="scale-option" onclick="selectScale('openness', 2)">2</div>
|
| <div class="scale-option selected" onclick="selectScale('openness', 3)">3</div>
|
| <div class="scale-option" onclick="selectScale('openness', 4)">4</div>
|
| <div class="scale-option" onclick="selectScale('openness', 5)">5</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Je suis organisé, fiable, je respecte mes engagements</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectScale('conscientiousness', 1)">1</div>
|
| <div class="scale-option" onclick="selectScale('conscientiousness', 2)">2</div>
|
| <div class="scale-option" onclick="selectScale('conscientiousness', 3)">3</div>
|
| <div class="scale-option selected" onclick="selectScale('conscientiousness', 4)">4</div>
|
| <div class="scale-option" onclick="selectScale('conscientiousness', 5)">5</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Je suis coopératif, serviable, empathique</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectScale('agreeableness', 1)">1</div>
|
| <div class="scale-option" onclick="selectScale('agreeableness', 2)">2</div>
|
| <div class="scale-option selected" onclick="selectScale('agreeableness', 3)">3</div>
|
| <div class="scale-option" onclick="selectScale('agreeableness', 4)">4</div>
|
| <div class="scale-option" onclick="selectScale('agreeableness', 5)">5</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Je ressens facilement de l'anxiété, du stress, de la nervosité</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectScale('neuroticism', 1)">1</div>
|
| <div class="scale-option" onclick="selectScale('neuroticism', 2)">2</div>
|
| <div class="scale-option" onclick="selectScale('neuroticism', 3)">3</div>
|
| <div class="scale-option selected" onclick="selectScale('neuroticism', 4)">4</div>
|
| <div class="scale-option" onclick="selectScale('neuroticism', 5)">5</div>
|
| </div>
|
| </div>
|
|
|
| <div class="section-completion section-complete" id="big5-completion">
|
| <i class="fas fa-check-circle" style="color: #10b981;"></i>
|
| <span>Section complétée - <strong>Score neuroticisme: 4.6</strong> (qualité du sommeil importante)</span>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="questionnaire-section" id="motivation-section">
|
| <div class="questionnaire-header">
|
| <div class="questionnaire-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
|
| <i class="fas fa-fire"></i>
|
| </div>
|
| <div>
|
| <div class="questionnaire-title">Profil Motivationnel (Théorie de l'Autodétermination)</div>
|
| <div class="questionnaire-description">Pourquoi étudiez-vous ? Sélectionnez vos principales motivations</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">J'étudie parce que j'aime apprendre, je trouve cela intéressant et plaisant</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectMotivation('intrinsic', 1)">1</div>
|
| <div class="scale-option" onclick="selectMotivation('intrinsic', 2)">2</div>
|
| <div class="scale-option" onclick="selectMotivation('intrinsic', 3)">3</div>
|
| <div class="scale-option" onclick="selectMotivation('intrinsic', 4)">4</div>
|
| <div class="scale-option selected" onclick="selectMotivation('intrinsic', 5)">5</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">J'étudie pour obtenir de bonnes notes et faire plaisir à mes parents/professeurs</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectMotivation('introjected', 1)">1</div>
|
| <div class="scale-option" onclick="selectMotivation('introjected', 2)">2</div>
|
| <div class="scale-option" onclick="selectMotivation('introjected', 3)">3</div>
|
| <div class="scale-option selected" onclick="selectMotivation('introjected', 4)">4</div>
|
| <div class="scale-option" onclick="selectMotivation('introjected', 5)">5</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">J'étudie parce que c'est important pour mon futur, pour atteindre mes objectifs personnels</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectMotivation('identified', 1)">1</div>
|
| <div class="scale-option" onclick="selectMotivation('identified', 2)">2</div>
|
| <div class="scale-option selected" onclick="selectMotivation('identified', 3)">3</div>
|
| <div class="scale-option" onclick="selectMotivation('identified', 4)">4</div>
|
| <div class="scale-option" onclick="selectMotivation('identified', 5)">5</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">J'étudie pour éviter les punitions ou les conséquences négatives</div>
|
| <div class="scale-options">
|
| <div class="scale-option selected" onclick="selectMotivation('external', 1)">1</div>
|
| <div class="scale-option" onclick="selectMotivation('external', 2)">2</div>
|
| <div class="scale-option" onclick="selectMotivation('external', 3)">3</div>
|
| <div class="scale-option" onclick="selectMotivation('external', 4)">4</div>
|
| <div class="scale-option" onclick="selectMotivation('external', 5)">5</div>
|
| </div>
|
| </div>
|
|
|
| <div class="section-completion section-complete" id="motivation-completion">
|
| <i class="fas fa-check-circle" style="color: #10b981;"></i>
|
| <span>Section complétée - <strong>Motivation introjectée: 4.9</strong> (forte pression interne)</span>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="questionnaire-section" id="habits-section">
|
| <div class="questionnaire-header">
|
| <div class="questionnaire-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
|
| <i class="fas fa-clock"></i>
|
| </div>
|
| <div>
|
| <div class="questionnaire-title">Habitudes et Préférences d'Étude</div>
|
| <div class="questionnaire-description">Décrivez vos habitudes d'apprentissage actuelles</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">En moyenne, combien d'heures par jour consacrez-vous à l'étude ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectHabit('study_hours', 1)">< 1h</div>
|
| <div class="scale-option selected" onclick="selectHabit('study_hours', 2)">1-2h</div>
|
| <div class="scale-option" onclick="selectHabit('study_hours', 3)">2-3h</div>
|
| <div class="scale-option" onclick="selectHabit('study_hours', 4)">3-4h</div>
|
| <div class="scale-option" onclick="selectHabit('study_hours', 5)">> 4h</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">À quelle fréquence remettez-vous vos travaux en retard ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option selected" onclick="selectHabit('late_submissions', 1)">Jamais</div>
|
| <div class="scale-option" onclick="selectHabit('late_submissions', 2)">Rarement</div>
|
| <div class="scale-option" onclick="selectHabit('late_submissions', 3)">Parfois</div>
|
| <div class="scale-option" onclick="selectHabit('late_submissions', 4)">Souvent</div>
|
| <div class="scale-option" onclick="selectHabit('late_submissions', 5)">Toujours</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Quel est votre taux de complétion des vidéos/ressources ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectHabit('completion_rate', 1)">< 25%</div>
|
| <div class="scale-option" onclick="selectHabit('completion_rate', 2)">25-50%</div>
|
| <div class="scale-option" onclick="selectHabit('completion_rate', 3)">50-75%</div>
|
| <div class="scale-option selected" onclick="selectHabit('completion_rate', 4)">75-95%</div>
|
| <div class="scale-option" onclick="selectHabit('completion_rate', 5)">100%</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Participez-vous aux forums de discussion ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option selected" onclick="selectHabit('forum_participation', 1)">Jamais</div>
|
| <div class="scale-option" onclick="selectHabit('forum_participation', 2)">Rarement</div>
|
| <div class="scale-option" onclick="selectHabit('forum_participation', 3)">Parfois</div>
|
| <div class="scale-option" onclick="selectHabit('forum_participation', 4)">Souvent</div>
|
| <div class="scale-option" onclick="selectHabit('forum_participation', 5)">Toujours</div>
|
| </div>
|
| </div>
|
|
|
| <div class="section-completion section-incomplete" id="habits-completion">
|
| <i class="fas fa-exclamation-circle" style="color: #ef4444;"></i>
|
| <span>Section incomplète - Remplissez toutes les questions</span>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="questionnaire-section" id="wellbeing-section">
|
| <div class="questionnaire-header">
|
| <div class="questionnaire-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
|
| <i class="fas fa-heart"></i>
|
| </div>
|
| <div>
|
| <div class="questionnaire-title">Bien-être et Gestion du Stress</div>
|
| <div class="questionnaire-description">Évaluez votre état émotionnel et votre gestion du stress</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Combien d'heures dormez-vous en moyenne par nuit ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectWellbeing('sleep_hours', 1)">< 5h</div>
|
| <div class="scale-option" onclick="selectWellbeing('sleep_hours', 2)">5-6h</div>
|
| <div class="scale-option" onclick="selectWellbeing('sleep_hours', 3)">6-7h</div>
|
| <div class="scale-option selected" onclick="selectWellbeing('sleep_hours', 4)">7-8h</div>
|
| <div class="scale-option" onclick="selectWellbeing('sleep_hours', 5)">> 8h</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">À quelle fréquence ressentez-vous du stress lié aux études ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectWellbeing('study_stress', 1)">Jamais</div>
|
| <div class="scale-option" onclick="selectWellbeing('study_stress', 2)">Rarement</div>
|
| <div class="scale-option selected" onclick="selectWellbeing('study_stress', 3)">Parfois</div>
|
| <div class="scale-option" onclick="selectWellbeing('study_stress', 4)">Souvent</div>
|
| <div class="scale-option" onclick="selectWellbeing('study_stress', 5)">Toujours</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Pratiquez-vous des activités de relaxation ou de méditation ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectWellbeing('relaxation', 1)">Jamais</div>
|
| <div class="scale-option selected" onclick="selectWellbeing('relaxation', 2)">Rarement</div>
|
| <div class="scale-option" onclick="selectWellbeing('relaxation', 3)">Parfois</div>
|
| <div class="scale-option" onclick="selectWellbeing('relaxation', 4)">Souvent</div>
|
| <div class="scale-option" onclick="selectWellbeing('relaxation', 5)">Toujours</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Avez-vous déjà ressenti des symptômes de burnout (épuisement, cynisme) ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option selected" onclick="selectWellbeing('burnout_risk', 1)">Jamais</div>
|
| <div class="scale-option" onclick="selectWellbeing('burnout_risk', 2)">Rarement</div>
|
| <div class="scale-option" onclick="selectWellbeing('burnout_risk', 3)">Parfois</div>
|
| <div class="scale-option" onclick="selectWellbeing('burnout_risk', 4)">Souvent</div>
|
| <div class="scale-option" onclick="selectWellbeing('burnout_risk', 5)">Toujours</div>
|
| </div>
|
| </div>
|
|
|
| <div class="section-completion section-incomplete" id="wellbeing-completion">
|
| <i class="fas fa-exclamation-circle" style="color: #ef4444;"></i>
|
| <span>Section incomplète - Important pour les recommandations de sommeil</span>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="questionnaire-section" id="support-section">
|
| <div class="questionnaire-header">
|
| <div class="questionnaire-icon" style="background: linear-gradient(135deg, #ec4899, #db2777);">
|
| <i class="fas fa-users"></i>
|
| </div>
|
| <div>
|
| <div class="questionnaire-title">Soutien et Environnement d'Apprentissage</div>
|
| <div class="questionnaire-description">Décrivez votre environnement d'apprentissage et votre réseau de soutien</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Comment évaluez-vous le soutien de vos parents/famille ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectSupport('family_support', 1)">Très faible</div>
|
| <div class="scale-option" onclick="selectSupport('family_support', 2)">Faible</div>
|
| <div class="scale-option selected" onclick="selectSupport('family_support', 3)">Moyen</div>
|
| <div class="scale-option" onclick="selectSupport('family_support', 4)">Élevé</div>
|
| <div class="scale-option" onclick="selectSupport('family_support', 5)">Très élevé</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Vos parents ont-ils des attentes élevées concernant vos résultats ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectSupport('parental_expectations', 1)">Très basses</div>
|
| <div class="scale-option" onclick="selectSupport('parental_expectations', 2)">Basses</div>
|
| <div class="scale-option" onclick="selectSupport('parental_expectations', 3)">Moyennes</div>
|
| <div class="scale-option selected" onclick="selectSupport('parental_expectations', 4)">Élevées</div>
|
| <div class="scale-option" onclick="selectSupport('parental_expectations', 5)">Très élevées</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Avez-vous un espace calme et dédié pour étudier ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option" onclick="selectSupport('study_environment', 1)">Non</div>
|
| <div class="scale-option" onclick="selectSupport('study_environment', 2)">Rarement</div>
|
| <div class="scale-option" onclick="selectSupport('study_environment', 3)">Parfois</div>
|
| <div class="scale-option selected" onclick="selectSupport('study_environment', 4)">Souvent</div>
|
| <div class="scale-option" onclick="selectSupport('study_environment', 5)">Toujours</div>
|
| </div>
|
| </div>
|
|
|
| <div class="question-item">
|
| <div class="question-text">Collaborez-vous avec d'autres étudiants pour étudier ?</div>
|
| <div class="scale-options">
|
| <div class="scale-option selected" onclick="selectSupport('peer_collaboration', 1)">Jamais</div>
|
| <div class="scale-option" onclick="selectSupport('peer_collaboration', 2)">Rarement</div>
|
| <div class="scale-option" onclick="selectSupport('peer_collaboration', 3)">Parfois</div>
|
| <div class="scale-option" onclick="selectSupport('peer_collaboration', 4)">Souvent</div>
|
| <div class="scale-option" onclick="selectSupport('peer_collaboration', 5)">Toujours</div>
|
| </div>
|
| </div>
|
|
|
| <div class="section-completion section-incomplete" id="support-completion">
|
| <i class="fas fa-exclamation-circle" style="color: #ef4444;"></i>
|
| <span>Section incomplète - Important pour les recommandations de soutien</span>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="profile-summary">
|
| <div class="profile-card">
|
| <div class="profile-card-header">
|
| <div class="profile-card-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
|
| <i class="fas fa-brain"></i>
|
| </div>
|
| <div class="profile-card-title">Big Five Traits</div>
|
| </div>
|
| <div class="trait-list">
|
| <div class="trait-item">
|
| <span class="trait-name">Extraversion</span>
|
| <span class="trait-value" id="extraversion-value">3.2</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Ouverture</span>
|
| <span class="trait-value" id="openness-value">4.1</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Conscience</span>
|
| <span class="trait-value" id="conscientiousness-value">4.8</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Agréabilité</span>
|
| <span class="trait-value" id="agreeableness-value">3.5</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Névrosisme</span>
|
| <span class="trait-value" id="neuroticism-value">4.6</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="profile-card">
|
| <div class="profile-card-header">
|
| <div class="profile-card-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
|
| <i class="fas fa-fire"></i>
|
| </div>
|
| <div class="profile-card-title">Motivation</div>
|
| </div>
|
| <div class="trait-list">
|
| <div class="trait-item">
|
| <span class="trait-name">Intrinsèque</span>
|
| <span class="trait-value" id="intrinsic-value">3.8</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Introjectée</span>
|
| <span class="trait-value" id="introjected-value">4.9</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Identifiée</span>
|
| <span class="trait-value" id="identified-value">4.2</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Externe</span>
|
| <span class="trait-value" id="external-value">2.1</span>
|
| </div>
|
| </div>
|
| <div class="motivation-chart">
|
| <canvas id="motivationChart"></canvas>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="recommendations-section">
|
| <h4><i class="fas fa-lightbulb"></i> Recommandations Personnalisées Basées sur Votre Profil</h4>
|
|
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">💤</div>
|
| <div>
|
| <strong>Qualité du sommeil: </strong> Avec un névrosisme élevé (4.6), il est essentiel de maintenir 8 heures de sommeil de qualité avec des activités de relaxation avant le coucher.
|
| </div>
|
| </div>
|
|
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">📅</div>
|
| <div>
|
| <strong>Planification: </strong> Votre conscience élevée (4.8) est un atout. Évitez le surmenage - 4 heures supplémentaires d'étude par jour risquent de mener au burnout.
|
| </div>
|
| </div>
|
|
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">🎯</div>
|
| <div>
|
| <strong>Gestion de la pression: </strong> Avec une motivation introjectée à 4.9, pratiquez des techniques de gestion du stress pour réduire la pression interne.
|
| </div>
|
| </div>
|
|
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">⏰</div>
|
| <div>
|
| <strong>Rappels personnalisés: </strong> Basé sur votre profil, vous recevrez des rappels pour les pauses, le sommeil et la gestion du stress.
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <button class="btn btn-primary btn-large" onclick="completeProfile()" style="margin-top: 2rem;">
|
| <i class="fas fa-check-circle"></i> Finaliser et Générer le Profil Personnalisé
|
| </button>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="objectif" class="tab-content">
|
|
|
| </section>
|
|
|
|
|
| <section id="planner" class="tab-content">
|
|
|
| </section>
|
|
|
|
|
| <section id="flashcards" class="tab-content">
|
|
|
| </section>
|
|
|
|
|
| <section id="journal" class="tab-content">
|
|
|
| </section>
|
|
|
|
|
| <section id="notifications" class="tab-content">
|
|
|
| </section>
|
|
|
|
|
| <section id="stats" class="tab-content">
|
|
|
| </section>
|
|
|
|
|
| <section id="learn" class="tab-content">
|
|
|
| </section>
|
| </div>
|
|
|
|
|
| <div class="modal" id="advancedProfileModal">
|
| <div class="modal-content">
|
| <div class="modal-header">
|
| <div class="modal-title"><i class="fas fa-sliders-h"></i> Paramètres Avancés du Profil</div>
|
| <button class="modal-close" onclick="closeModal()">×</button>
|
| </div>
|
| <div id="advancedProfileContent">
|
|
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
|
|
| let learnerProfile = {
|
| bigFive: {
|
| extraversion: 3.2,
|
| openness: 4.1,
|
| conscientiousness: 4.8,
|
| agreeableness: 3.5,
|
| neuroticism: 4.6
|
| },
|
| motivation: {
|
| intrinsic: 3.8,
|
| introjected: 4.9,
|
| identified: 4.2,
|
| external: 2.1
|
| },
|
| habits: {
|
| study_hours: 2,
|
| late_submissions: 1,
|
| completion_rate: 4,
|
| forum_participation: 1
|
| },
|
| wellbeing: {
|
| sleep_hours: 4,
|
| study_stress: 3,
|
| relaxation: 2,
|
| burnout_risk: 1
|
| },
|
| support: {
|
| family_support: 3,
|
| parental_expectations: 4,
|
| study_environment: 4,
|
| peer_collaboration: 1
|
| },
|
| completionStatus: {
|
| big5: true,
|
| motivation: true,
|
| habits: false,
|
| wellbeing: false,
|
| support: false
|
| }
|
| };
|
|
|
|
|
| document.addEventListener('DOMContentLoaded', function() {
|
| updateProfileProgress();
|
| updateProfileSummary();
|
| createMotivationChart();
|
|
|
|
|
| simulateExistingResponses();
|
| });
|
|
|
|
|
| function simulateExistingResponses() {
|
|
|
| updateScaleUI('extraversion', learnerProfile.bigFive.extraversion);
|
| updateScaleUI('openness', learnerProfile.bigFive.openness);
|
| updateScaleUI('conscientiousness', learnerProfile.bigFive.conscientiousness);
|
| updateScaleUI('agreeableness', learnerProfile.bigFive.agreeableness);
|
| updateScaleUI('neuroticism', learnerProfile.bigFive.neuroticism);
|
|
|
|
|
| updateScaleUI('intrinsic', learnerProfile.motivation.intrinsic);
|
| updateScaleUI('introjected', learnerProfile.motivation.introjected);
|
| updateScaleUI('identified', learnerProfile.motivation.identified);
|
| updateScaleUI('external', learnerProfile.motivation.external);
|
| }
|
|
|
|
|
| function selectScale(trait, value) {
|
| learnerProfile.bigFive[trait] = value;
|
| updateScaleUI(trait, value);
|
| updateProfileSummary();
|
| checkSectionCompletion('big5');
|
| updateProfileProgress();
|
| }
|
|
|
|
|
| function selectMotivation(type, value) {
|
| learnerProfile.motivation[type] = value;
|
| updateScaleUI(type, value);
|
| updateProfileSummary();
|
| checkSectionCompletion('motivation');
|
| updateProfileProgress();
|
| }
|
|
|
|
|
| function selectHabit(habit, value) {
|
| learnerProfile.habits[habit] = value;
|
| learnerProfile.completionStatus.habits = true;
|
| updateProfileProgress();
|
| }
|
|
|
|
|
| function selectWellbeing(wellbeing, value) {
|
| learnerProfile.wellbeing[wellbeing] = value;
|
| learnerProfile.completionStatus.wellbeing = true;
|
| updateProfileProgress();
|
| }
|
|
|
|
|
| function selectSupport(support, value) {
|
| learnerProfile.support[support] = value;
|
| learnerProfile.completionStatus.support = true;
|
| updateProfileProgress();
|
| }
|
|
|
|
|
| function updateScaleUI(type, value) {
|
|
|
| const scaleOptions = document.querySelectorAll(`[onclick*="${type}"]`);
|
|
|
| scaleOptions.forEach(option => {
|
| option.classList.remove('selected');
|
|
|
|
|
| const match = option.getAttribute('onclick').match(/(\d+)/);
|
| if (match && parseInt(match[1]) === value) {
|
| option.classList.add('selected');
|
| }
|
| });
|
| }
|
|
|
|
|
| function checkSectionCompletion(section) {
|
| const completionElement = document.getElementById(`${section}-completion`);
|
|
|
| if (section === 'big5' || section === 'motivation') {
|
| learnerProfile.completionStatus[section] = true;
|
| completionElement.className = 'section-completion section-complete';
|
|
|
| let message = "Section complétée";
|
| if (section === 'big5') {
|
| message += ` - <strong>Score neuroticisme: ${learnerProfile.bigFive.neuroticism}</strong> (qualité du sommeil importante)`;
|
| } else if (section === 'motivation') {
|
| message += ` - <strong>Motivation introjectée: ${learnerProfile.motivation.introjected}</strong> (forte pression interne)`;
|
| }
|
|
|
| completionElement.innerHTML = `<i class="fas fa-check-circle" style="color: #10b981;"></i><span>${message}</span>`;
|
| }
|
| }
|
|
|
|
|
| function updateProfileProgress() {
|
| const sections = Object.values(learnerProfile.completionStatus);
|
| const completedCount = sections.filter(status => status).length;
|
| const totalSections = sections.length;
|
|
|
| const percentage = Math.round((completedCount / totalSections) * 100);
|
|
|
|
|
| document.getElementById('profileCompletion').textContent = `${percentage}%`;
|
| document.getElementById('profileProgressBar').style.width = `${percentage}%`;
|
|
|
|
|
| document.getElementById('completedSections').textContent = `${completedCount}/${totalSections}`;
|
|
|
|
|
| let level = "Basique";
|
| if (percentage >= 20) level = "Débutant";
|
| if (percentage >= 40) level = "Intermédiaire";
|
| if (percentage >= 60) level = "Avancé";
|
| if (percentage >= 80) level = "Expert";
|
| if (percentage === 100) level = "Personnalisé";
|
|
|
| document.getElementById('personalizationLevel').textContent = level;
|
| }
|
|
|
|
|
| function updateProfileSummary() {
|
|
|
| document.getElementById('extraversion-value').textContent = learnerProfile.bigFive.extraversion.toFixed(1);
|
| document.getElementById('openness-value').textContent = learnerProfile.bigFive.openness.toFixed(1);
|
| document.getElementById('conscientiousness-value').textContent = learnerProfile.bigFive.conscientiousness.toFixed(1);
|
| document.getElementById('agreeableness-value').textContent = learnerProfile.bigFive.agreeableness.toFixed(1);
|
| document.getElementById('neuroticism-value').textContent = learnerProfile.bigFive.neuroticism.toFixed(1);
|
|
|
|
|
| document.getElementById('intrinsic-value').textContent = learnerProfile.motivation.intrinsic.toFixed(1);
|
| document.getElementById('introjected-value').textContent = learnerProfile.motivation.introjected.toFixed(1);
|
| document.getElementById('identified-value').textContent = learnerProfile.motivation.identified.toFixed(1);
|
| document.getElementById('external-value').textContent = learnerProfile.motivation.external.toFixed(1);
|
|
|
|
|
| updateMotivationChart();
|
| }
|
|
|
|
|
| function createMotivationChart() {
|
| const ctx = document.getElementById('motivationChart').getContext('2d');
|
|
|
| window.motivationChart = new Chart(ctx, {
|
| type: 'radar',
|
| data: {
|
| labels: ['Intrinsèque', 'Introjectée', 'Identifiée', 'Externe'],
|
| datasets: [{
|
| label: 'Motivation',
|
| data: [
|
| learnerProfile.motivation.intrinsic,
|
| learnerProfile.motivation.introjected,
|
| learnerProfile.motivation.identified,
|
| learnerProfile.motivation.external
|
| ],
|
| backgroundColor: 'rgba(59, 130, 246, 0.2)',
|
| borderColor: 'rgb(59, 130, 246)',
|
| pointBackgroundColor: 'rgb(59, 130, 246)',
|
| pointBorderColor: '#fff',
|
| pointHoverBackgroundColor: '#fff',
|
| pointHoverBorderColor: 'rgb(59, 130, 246)'
|
| }]
|
| },
|
| options: {
|
| scales: {
|
| r: {
|
| beginAtZero: true,
|
| max: 5,
|
| ticks: {
|
| stepSize: 1
|
| }
|
| }
|
| },
|
| responsive: true,
|
| maintainAspectRatio: false
|
| }
|
| });
|
| }
|
|
|
|
|
| function updateMotivationChart() {
|
| if (window.motivationChart) {
|
| window.motivationChart.data.datasets[0].data = [
|
| learnerProfile.motivation.intrinsic,
|
| learnerProfile.motivation.introjected,
|
| learnerProfile.motivation.identified,
|
| learnerProfile.motivation.external
|
| ];
|
| window.motivationChart.update();
|
| }
|
| }
|
|
|
|
|
| function saveProfile() {
|
|
|
| try {
|
| localStorage.setItem('learnerProfile', JSON.stringify(learnerProfile));
|
|
|
|
|
| showNotification('Profil sauvegardé avec succès !', 'success');
|
|
|
|
|
| updatePersonalizedRecommendations();
|
|
|
| } catch (error) {
|
| showNotification('Erreur lors de la sauvegarde du profil', 'error');
|
| }
|
| }
|
|
|
|
|
| function completeProfile() {
|
|
|
| const incompleteSections = Object.entries(learnerProfile.completionStatus)
|
| .filter(([section, completed]) => !completed)
|
| .map(([section]) => section);
|
|
|
| if (incompleteSections.length > 0) {
|
| showNotification(`Veuillez compléter les sections suivantes: ${incompleteSections.join(', ')}`, 'warning');
|
| return;
|
| }
|
|
|
|
|
| saveProfile();
|
|
|
|
|
| generatePersonalizedRecommendations();
|
|
|
|
|
| showTab('objectif');
|
|
|
| showNotification('Profil finalisé avec succès ! Les recommandations personnalisées ont été appliquées.', 'success');
|
| }
|
|
|
|
|
| function generatePersonalizedRecommendations() {
|
| const recommendations = [];
|
|
|
|
|
| if (learnerProfile.bigFive.neuroticism >= 4) {
|
| recommendations.push({
|
| icon: '💤',
|
| text: `Avec un névrosisme élevé (${learnerProfile.bigFive.neuroticism}), planifiez 8 heures de sommeil de qualité avec des activités de relaxation.`
|
| });
|
| }
|
|
|
| if (learnerProfile.bigFive.conscientiousness >= 4) {
|
| recommendations.push({
|
| icon: '📅',
|
| text: `Votre conscience élevée (${learnerProfile.bigFive.conscientiousness}) est excellente pour l'auto-discipline. Évitez le surmenage.`
|
| });
|
| }
|
|
|
|
|
| if (learnerProfile.motivation.introjected >= 4) {
|
| recommendations.push({
|
| icon: '🎯',
|
| text: `Motivation introjectée élevée (${learnerProfile.motivation.introjected}). Pratiquez des techniques de gestion du stress.`
|
| });
|
| }
|
|
|
|
|
| if (learnerProfile.habits.study_hours >= 4) {
|
| recommendations.push({
|
| icon: '⚠️',
|
| text: 'Trop d\'heures d\'étude peuvent mener au burnout. Équilibrez avec des pauses régulières.'
|
| });
|
| }
|
|
|
|
|
| updateRecommendationsDisplay(recommendations);
|
|
|
|
|
| updateApplicationSettings();
|
| }
|
|
|
|
|
| function updateRecommendationsDisplay(recommendations) {
|
| const container = document.querySelector('.recommendations-section');
|
| let html = '<h4><i class="fas fa-lightbulb"></i> Recommandations Personnalisées Basées sur Votre Profil</h4>';
|
|
|
| recommendations.forEach(rec => {
|
| html += `
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">${rec.icon}</div>
|
| <div>${rec.text}</div>
|
| </div>
|
| `;
|
| });
|
|
|
| container.innerHTML = html;
|
| }
|
|
|
|
|
| function updateApplicationSettings() {
|
|
|
| if (learnerProfile.bigFive.conscientiousness >= 4) {
|
|
|
| document.getElementById('productivity_method').value = 'deepwork';
|
| selectProductivityMethod('deepwork');
|
| }
|
|
|
|
|
| if (learnerProfile.bigFive.extraversion >= 3.5) {
|
|
|
| document.getElementById('energy_pattern').value = 'morning';
|
| selectEnergyPattern('morning');
|
| }
|
|
|
|
|
| if (learnerProfile.motivation.intrinsic >= 4 && learnerProfile.bigFive.conscientiousness >= 4) {
|
|
|
| selectQuality(3);
|
| }
|
| }
|
|
|
|
|
| function showNotification(message, type = 'info') {
|
| const colors = {
|
| success: '#10b981',
|
| error: '#ef4444',
|
| warning: '#f59e0b',
|
| info: '#3b82f6'
|
| };
|
|
|
|
|
| const notification = document.createElement('div');
|
| notification.style.cssText = `
|
| position: fixed;
|
| top: 20px;
|
| right: 20px;
|
| background: white;
|
| color: ${colors[type]};
|
| padding: 1rem 1.5rem;
|
| border-radius: 10px;
|
| box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
| border-left: 4px solid ${colors[type]};
|
| z-index: 1000;
|
| animation: slideIn 0.3s ease;
|
| `;
|
|
|
| notification.innerHTML = `
|
| <div style="display: flex; align-items: center; gap: 10px;">
|
| <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
|
| <div>${message}</div>
|
| </div>
|
| `;
|
|
|
| document.body.appendChild(notification);
|
|
|
|
|
| setTimeout(() => {
|
| notification.style.animation = 'slideIn 0.3s ease reverse';
|
| setTimeout(() => notification.remove(), 300);
|
| }, 3000);
|
| }
|
|
|
|
|
| function openAdvancedProfile() {
|
| const modal = document.getElementById('advancedProfileModal');
|
| const content = document.getElementById('advancedProfileContent');
|
|
|
| content.innerHTML = `
|
| <div style="margin-bottom: 1.5rem;">
|
| <h4 style="color: #1e293b; margin-bottom: 1rem;"><i class="fas fa-chart-line"></i> Paramètres Avancés du Profil</h4>
|
| <p style="color: #64748b; margin-bottom: 1rem;">Ces paramètres influenceront les algorithmes de personnalisation.</p>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label"><i class="fas fa-bell"></i> Fréquence des Rappels</label>
|
| <select class="form-control" id="reminderFrequency">
|
| <option value="low">Faible (1-2 par jour)</option>
|
| <option value="medium" selected>Moyenne (3-4 par jour)</option>
|
| <option value="high">Élevée (5+ par jour)</option>
|
| </select>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label"><i class="fas fa-exclamation-triangle"></i> Sensibilité aux Alertes</label>
|
| <select class="form-control" id="alertSensitivity">
|
| <option value="low">Faible (seulement les urgences)</option>
|
| <option value="medium" selected>Moyenne (recommandations importantes)</option>
|
| <option value="high">Élevée (toutes les suggestions)</option>
|
| </select>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label"><i class="fas fa-sync-alt"></i> Mise à Jour Automatique</label>
|
| <div style="display: flex; gap: 15px; margin-top: 10px;">
|
| <label style="display: flex; align-items: center; gap: 8px;">
|
| <input type="radio" name="autoUpdate" value="weekly" checked>
|
| Hebdomadaire
|
| </label>
|
| <label style="display: flex; align-items: center; gap: 8px;">
|
| <input type="radio" name="autoUpdate" value="monthly">
|
| Mensuelle
|
| </label>
|
| <label style="display: flex; align-items: center; gap: 8px;">
|
| <input type="radio" name="autoUpdate" value="manual">
|
| Manuel
|
| </label>
|
| </div>
|
| </div>
|
|
|
| <button class="btn btn-primary" onclick="saveAdvancedSettings()" style="width: 100%; margin-top: 1.5rem;">
|
| <i class="fas fa-save"></i> Sauvegarder les Paramètres
|
| </button>
|
| `;
|
|
|
| modal.style.display = 'flex';
|
| }
|
|
|
|
|
| function closeModal() {
|
| document.getElementById('advancedProfileModal').style.display = 'none';
|
| }
|
|
|
|
|
| function saveAdvancedSettings() {
|
| const reminderFrequency = document.getElementById('reminderFrequency').value;
|
| const alertSensitivity = document.getElementById('alertSensitivity').value;
|
|
|
|
|
| learnerProfile.advancedSettings = {
|
| reminderFrequency,
|
| alertSensitivity,
|
| autoUpdate: document.querySelector('input[name="autoUpdate"]:checked').value
|
| };
|
|
|
| saveProfile();
|
| closeModal();
|
| showNotification('Paramètres avancés sauvegardés', 'success');
|
| }
|
|
|
|
|
| function updatePersonalizedRecommendations() {
|
|
|
|
|
| }
|
|
|
|
|
| function showTab(tabId) {
|
| document.querySelectorAll('.tab-content').forEach(section => {
|
| section.classList.remove('active');
|
| });
|
|
|
| document.querySelectorAll('.nav-tab').forEach(tab => {
|
| tab.classList.remove('active');
|
| });
|
|
|
| document.getElementById(tabId).classList.add('active');
|
|
|
| const tabNames = {
|
| 'profile': 'Profil Apprenant',
|
| 'objectif': 'Objectif',
|
| 'planner': 'Planner',
|
| 'flashcards': 'Flashcards',
|
| 'journal': 'Journal',
|
| 'notifications': 'Notifications',
|
| 'stats': 'Statistiques',
|
| 'learn': 'Apprendre'
|
| };
|
|
|
| document.querySelectorAll('.nav-tab').forEach(tab => {
|
| if (tab.textContent.includes(tabNames[tabId])) {
|
| tab.classList.add('active');
|
| }
|
| });
|
| }
|
|
|
|
|
| function selectProductivityMethod(method) {
|
|
|
| }
|
|
|
| function selectEnergyPattern(pattern) {
|
|
|
| }
|
|
|
| function selectQuality(level) {
|
|
|
| }
|
|
|
|
|
| window.showTab = showTab;
|
| window.selectProductivityMethod = selectProductivityMethod;
|
| window.selectEnergyPattern = selectEnergyPattern;
|
| window.selectQuality = selectQuality;
|
| window.saveProfile = saveProfile;
|
| window.completeProfile = completeProfile;
|
| window.openAdvancedProfile = openAdvancedProfile;
|
| window.closeModal = closeModal;
|
| window.saveAdvancedSettings = saveAdvancedSettings;
|
| </script>
|
| </body>
|
| </html> |
