| <!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>
|
| <div>
|
| <button class="btn btn-secondary" onclick="completeAllSections()">
|
| <i class="fas fa-magic"></i> Remplir automatiquement
|
| </button>
|
| <button class="btn btn-secondary" onclick="saveProfile()">
|
| <i class="fas fa-save"></i> Sauvegarder
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="progress-section">
|
| <div class="progress-header">
|
| <div class="progress-title">Complétion du Profil</div>
|
| <div class="progress-percentage" id="profileCompletion">40%</div>
|
| </div>
|
| <div class="progress-bar-container">
|
| <div class="progress-bar-fill" id="profileProgressBar" style="width: 40%"></div>
|
| </div>
|
| <div class="questionnaire-progress">
|
| <span>Questionnaires complétés: <span id="completedSections">2/5</span></span>
|
| <span>Profil personnalisé: <span id="personalizationLevel">Intermédiaire</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 selected" 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.0</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 selected" onclick="selectMotivation('intrinsic', 3)">3</div>
|
| <div class="scale-option" onclick="selectMotivation('intrinsic', 4)">4</div>
|
| <div class="scale-option" 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.0</strong> (pression interne modérée)</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" 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" 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" 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" 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" 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" 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" 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" 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 - Remplissez toutes les questions</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" 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" 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" 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" 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 - Remplissez toutes les questions</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.0</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Ouverture</span>
|
| <span class="trait-value" id="openness-value">3.0</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Conscience</span>
|
| <span class="trait-value" id="conscientiousness-value">4.0</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Agréabilité</span>
|
| <span class="trait-value" id="agreeableness-value">3.0</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Névrosisme</span>
|
| <span class="trait-value" id="neuroticism-value">4.0</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.0</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Introjectée</span>
|
| <span class="trait-value" id="introjected-value">4.0</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Identifiée</span>
|
| <span class="trait-value" id="identified-value">3.0</span>
|
| </div>
|
| <div class="trait-item">
|
| <span class="trait-name">Externe</span>
|
| <span class="trait-value" id="external-value">1.0</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 modéré, il est important de maintenir 7-8 heures de sommeil de qualité.
|
| </div>
|
| </div>
|
|
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">📅</div>
|
| <div>
|
| <strong>Planification: </strong> Votre conscience est bonne. Établissez un planning régulier mais évitez le surmenage.
|
| </div>
|
| </div>
|
|
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">🎯</div>
|
| <div>
|
| <strong>Gestion de la pression: </strong> Avec une motivation introjectée modérée, pratiquez des techniques de gestion du stress.
|
| </div>
|
| </div>
|
|
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">⏰</div>
|
| <div>
|
| <strong>Personnalisation: </strong> Complétez toutes les sections pour des recommandations plus précises.
|
| </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">
|
| <div class="card">
|
| <div class="card-header">
|
| <h3><i class="fas fa-bullseye"></i> Définir mon Objectif d'Apprentissage</h3>
|
| </div>
|
|
|
| <div class="form-row">
|
| <div class="form-col">
|
| <label class="form-label"><i class="fas fa-language"></i> Compétence Cible</label>
|
| <select id="competence" class="form-control">
|
| <option value="">Sélectionnez une compétence...</option>
|
| <option value="conjugaison">Conjugaison française</option>
|
| <option value="grammaire">Grammaire française</option>
|
| <option value="vocabulaire">Vocabulaire français</option>
|
| </select>
|
| </div>
|
| <div class="form-col">
|
| <label class="form-label"><i class="fas fa-brain"></i> Niveau Actuel</label>
|
| <select id="level" class="form-control">
|
| <option value="0">Débutant</option>
|
| <option value="1" selected>Intermédiaire</option>
|
| <option value="2">Avancé</option>
|
| <option value="3">Expert</option>
|
| </select>
|
| </div>
|
| </div>
|
|
|
| <div class="form-row">
|
| <div class="form-col">
|
| <label class="form-label"><i class="fas fa-calendar-start"></i> Date de Début</label>
|
| <input type="date" id="start" class="form-control" value="2026-01-29">
|
| </div>
|
| <div class="form-col">
|
| <label class="form-label"><i class="fas fa-calendar-end"></i> Date de Fin</label>
|
| <input type="date" id="end" class="form-control" value="2026-12-31">
|
| </div>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label"><i class="fas fa-clock"></i> Durée par Session (minutes)</label>
|
| <select id="duration" class="form-control">
|
| <option value="10">10 minutes (Micro-learning)</option>
|
| <option value="20" selected>20 minutes (Optimal)</option>
|
| <option value="30">30 minutes (Approfondissement)</option>
|
| <option value="45">45 minutes (Session intensive)</option>
|
| </select>
|
| </div>
|
|
|
|
|
| <div class="form-group">
|
| <label class="form-label"><i class="fas fa-chart-line"></i> Qualité Estimée de Rétention</label>
|
| <div class="quality-indicator">
|
| <div class="quality-dot quality-0" onclick="selectQuality(0)">0</div>
|
| <div class="quality-dot quality-1" onclick="selectQuality(1)">1</div>
|
| <div class="quality-dot quality-2 active" onclick="selectQuality(2)">2</div>
|
| <div class="quality-dot quality-3" onclick="selectQuality(3)">3</div>
|
| </div>
|
| <small id="quality-description">Bon - Consolidation progressive</small>
|
| </div>
|
|
|
| <button class="btn btn-primary btn-large" onclick="generatePlanner()">
|
| <i class="fas fa-cogs"></i> Générer le Planner SM-2 Personnalisé
|
| </button>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="planner" class="tab-content">
|
| <div class="card">
|
| <div class="card-header">
|
| <h3><i class="fas fa-calendar-alt"></i> Planner SM-2 Personnalisé</h3>
|
| <button class="btn btn-secondary" onclick="exportPlanner()">
|
| <i class="fas fa-download"></i> Exporter
|
| </button>
|
| </div>
|
|
|
| <div id="plannerStats" class="stats-grid"></div>
|
|
|
| <div id="plannerContent" class="planning-grid"></div>
|
|
|
| <div class="visualization-container">
|
| <h4><i class="fas fa-chart-line"></i> Visualisation des Intervalles SM-2</h4>
|
| <div class="chart-container">
|
| <canvas id="sm2Visualization"></canvas>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="flashcards" class="tab-content">
|
| <div class="card">
|
| <div class="card-header">
|
| <h3><i class="fas fa-layer-group"></i> Application Flashcards avec Répétition Espacée</h3>
|
| <div>
|
| <span class="streak-counter">
|
| <i class="fas fa-fire"></i> Série: <span id="streakCount">0</span> jours
|
| </span>
|
| </div>
|
| </div>
|
|
|
| <div class="flashcard-container">
|
| <div class="flashcard" id="flashcard" onclick="flipCard()">
|
| <div class="flashcard-category" id="flashcardCategory">Conjugaison</div>
|
| <div class="flashcard-stats">
|
| <span class="flashcard-score" id="flashcardScore">Score: 85%</span>
|
| <span class="flashcard-difficulty" id="flashcardDifficulty">Moyen</span>
|
| </div>
|
|
|
| <div class="flashcard-front" id="flashcardFront">
|
| <div class="flashcard-content" id="flashcardQuestion">
|
| Je (être) content de te voir.
|
| </div>
|
| <div class="flashcard-example" id="flashcardHint">
|
| Cliquez pour voir la réponse
|
| </div>
|
| </div>
|
|
|
| <div class="flashcard-back" id="flashcardBack" style="display: none;">
|
| <div class="flashcard-content" id="flashcardAnswer">
|
| suis
|
| </div>
|
| <div class="flashcard-example" id="flashcardExplanation">
|
| 'Être' au présent: je suis, tu es, il est, nous sommes, vous êtes, ils sont
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="flashcard-controls">
|
| <button class="flashcard-btn hard" onclick="rateCard(0)">
|
| <i class="fas fa-times"></i> Difficile
|
| </button>
|
| <button class="flashcard-btn medium" onclick="rateCard(1)">
|
| <i class="fas fa-minus"></i> Moyen
|
| </button>
|
| <button class="flashcard-btn easy" onclick="rateCard(2)">
|
| <i class="fas fa-check"></i> Facile
|
| </button>
|
| </div>
|
|
|
| <div class="flashcard-progress">
|
| <div>Progression: <span id="currentCard">1</span>/<span id="totalCards">3</span></div>
|
| <div class="progress-bar">
|
| <div class="progress-fill" id="progressFill" style="width: 33%"></div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="journal" class="tab-content">
|
| <div class="card">
|
| <div class="card-header">
|
| <h3><i class="fas fa-book"></i> Journal d'Apprentissage Autorégulé</h3>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label"><i class="fas fa-tasks"></i> Ce que j'ai accompli aujourd'hui</label>
|
| <textarea id="done" class="form-control" rows="3" placeholder="Décrivez ce que vous avez appris..."></textarea>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label"><i class="fas fa-lightbulb"></i> Difficultés rencontrées</label>
|
| <textarea id="difficulties" class="form-control" rows="3" placeholder="Quelles difficultés avez-vous rencontrées ?"></textarea>
|
| </div>
|
|
|
| <button class="btn btn-primary btn-large" onclick="saveJournal()">
|
| <i class="fas fa-save"></i> Sauvegarder l'Entrée
|
| </button>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="notifications" class="tab-content">
|
| <div class="card">
|
| <div class="card-header">
|
| <h3><i class="fas fa-bell"></i> Notifications Intelligentes</h3>
|
| </div>
|
|
|
| <div id="notificationContainer">
|
| <div class="notification-card">
|
| <p><i class="fas fa-info-circle"></i> Vos notifications seront personnalisées selon votre profil d'apprentissage.</p>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="stats" class="tab-content">
|
| <div class="card">
|
| <div class="card-header">
|
| <h3><i class="fas fa-chart-line"></i> Tableau de Bord d'Apprentissage</h3>
|
| </div>
|
|
|
| <div class="stats-grid">
|
| <div class="stat-card">
|
| <div class="stat-value">12</div>
|
| <div class="stat-label">Sessions Complétées</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value">85%</div>
|
| <div class="stat-label">Taux de Réussite</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-value">7</div>
|
| <div class="stat-label">Jours d'Activité</div>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="learn" class="tab-content">
|
| <div class="card">
|
| <div class="card-header">
|
| <h3><i class="fas fa-graduation-cap"></i> Apprendre l'Algorithme SM-2</h3>
|
| </div>
|
|
|
| <div class="questionnaire-section">
|
| <h4><i class="fas fa-info-circle"></i> Qu'est-ce que l'algorithme SM-2 ?</h4>
|
| <p>L'algorithme SM-2 est un système de répétition espacée développé pour optimiser la mémorisation à long terme.</p>
|
|
|
| <h4 style="margin-top: 20px;"><i class="fas fa-chart-line"></i> Comment ça marche ?</h4>
|
| <ul>
|
| <li>Plus vous connaissez bien une information, plus l'intervalle de révision augmente</li>
|
| <li>Les intervalles typiques sont: 1 jour, 3 jours, 7 jours, 14 jours, etc.</li>
|
| <li>Le système s'adapte à vos performances</li>
|
| </ul>
|
| </div>
|
| </div>
|
| </section>
|
| </div>
|
|
|
| <script>
|
|
|
| let learnerProfile = {
|
| bigFive: {
|
| extraversion: 3,
|
| openness: 3,
|
| conscientiousness: 4,
|
| agreeableness: 3,
|
| neuroticism: 4
|
| },
|
| motivation: {
|
| intrinsic: 3,
|
| introjected: 4,
|
| identified: 3,
|
| external: 1
|
| },
|
| habits: {},
|
| wellbeing: {},
|
| support: {},
|
| completionStatus: {
|
| big5: true,
|
| motivation: true,
|
| habits: false,
|
| wellbeing: false,
|
| support: false
|
| }
|
| };
|
|
|
|
|
| let profileCompletionPercentage = 40;
|
|
|
|
|
| document.addEventListener('DOMContentLoaded', function() {
|
| updateProfileProgress();
|
| updateProfileSummary();
|
| createMotivationChart();
|
| });
|
|
|
|
|
| function checkSectionCompletion(sectionId) {
|
| const section = document.getElementById(sectionId);
|
| const scaleOptions = section.querySelectorAll('.scale-option.selected');
|
|
|
|
|
| const expectedCount = {
|
| 'big5-section': 5,
|
| 'motivation-section': 4,
|
| 'habits-section': 4,
|
| 'wellbeing-section': 4,
|
| 'support-section': 4
|
| };
|
|
|
| return scaleOptions.length >= expectedCount[sectionId];
|
| }
|
|
|
|
|
| function updateSectionCompletion(sectionId) {
|
| const isComplete = checkSectionCompletion(sectionId);
|
| const sectionKey = sectionId.replace('-section', '');
|
| const completionElement = document.getElementById(`${sectionKey}-completion`);
|
|
|
|
|
| learnerProfile.completionStatus[sectionKey] = isComplete;
|
|
|
| if (isComplete) {
|
| completionElement.className = 'section-completion section-complete';
|
|
|
| let message = "Section complétée";
|
| if (sectionKey === 'big5') {
|
| const neuroticism = learnerProfile.bigFive.neuroticism || 3;
|
| message += ` - <strong>Score neuroticisme: ${neuroticism}</strong> (qualité du sommeil ${neuroticism >= 4 ? 'importante' : 'modérée'})`;
|
| } else if (sectionKey === 'motivation') {
|
| const introjected = learnerProfile.motivation.introjected || 3;
|
| message += ` - <strong>Motivation introjectée: ${introjected}</strong> (pression ${introjected >= 4 ? 'élevée' : 'modérée'})`;
|
| } else if (sectionKey === 'habits') {
|
| const hours = learnerProfile.habits.study_hours || 2;
|
| const hourText = ['< 1h', '1-2h', '2-3h', '3-4h', '> 4h'][hours - 1] || 'modérée';
|
| message += ` - <strong>${hourText} d'étude par jour</strong>`;
|
| } else if (sectionKey === 'wellbeing') {
|
| const sleep = learnerProfile.wellbeing.sleep_hours || 3;
|
| const sleepText = ['< 5h', '5-6h', '6-7h', '7-8h', '> 8h'][sleep - 1] || 'modérée';
|
| message += ` - <strong>${sleepText} de sommeil</strong>`;
|
| } else if (sectionKey === 'support') {
|
| const expectations = learnerProfile.support.parental_expectations || 3;
|
| const expectationText = ['Très basses', 'Basses', 'Moyennes', 'Élevées', 'Très élevées'][expectations - 1] || 'modérées';
|
| message += ` - <strong>Attentes parentales: ${expectationText}</strong>`;
|
| }
|
|
|
| completionElement.innerHTML = `<i class="fas fa-check-circle" style="color: #10b981;"></i><span>${message}</span>`;
|
| } else {
|
| completionElement.className = 'section-completion section-incomplete';
|
| completionElement.innerHTML = `<i class="fas fa-exclamation-circle" style="color: #ef4444;"></i><span>Section incomplète - Remplissez toutes les questions</span>`;
|
| }
|
|
|
|
|
| updateProfileProgress();
|
| }
|
|
|
|
|
| function selectScale(trait, value) {
|
| learnerProfile.bigFive[trait] = value;
|
| updateScaleUI(trait, value);
|
| updateProfileSummary();
|
| updateSectionCompletion('big5-section');
|
| }
|
|
|
|
|
| function selectMotivation(type, value) {
|
| learnerProfile.motivation[type] = value;
|
| updateScaleUI(type, value);
|
| updateProfileSummary();
|
| updateSectionCompletion('motivation-section');
|
| }
|
|
|
|
|
| function selectHabit(habit, value) {
|
| learnerProfile.habits[habit] = value;
|
| updateSectionCompletion('habits-section');
|
| }
|
|
|
|
|
| function selectWellbeing(wellbeing, value) {
|
| learnerProfile.wellbeing[wellbeing] = value;
|
| updateSectionCompletion('wellbeing-section');
|
| }
|
|
|
|
|
| function selectSupport(support, value) {
|
| learnerProfile.support[support] = value;
|
| updateSectionCompletion('support-section');
|
| }
|
|
|
|
|
| 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 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);
|
| profileCompletionPercentage = percentage;
|
|
|
|
|
| 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 completeAllSections() {
|
|
|
| const sections = [
|
| { id: 'big5-section', questions: 5 },
|
| { id: 'motivation-section', questions: 4 },
|
| { id: 'habits-section', questions: 4 },
|
| { id: 'wellbeing-section', questions: 4 },
|
| { id: 'support-section', questions: 4 }
|
| ];
|
|
|
| sections.forEach(section => {
|
| const sectionElement = document.getElementById(section.id);
|
| const scaleOptions = sectionElement.querySelectorAll('.scale-option');
|
|
|
|
|
| for (let i = 0; i < section.questions; i++) {
|
| const startIndex = i * 5;
|
| if (scaleOptions[startIndex + 2]) {
|
| scaleOptions[startIndex + 2].click();
|
| }
|
| }
|
| });
|
|
|
|
|
| sections.forEach(section => {
|
| updateSectionCompletion(section.id);
|
| });
|
|
|
| showNotification('Toutes les sections ont été complétées automatiquement !', 'success');
|
| }
|
|
|
|
|
| function saveProfile() {
|
| try {
|
| localStorage.setItem('learnerProfile', JSON.stringify(learnerProfile));
|
| showNotification('Profil sauvegardé avec succès !', 'success');
|
| } 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();
|
|
|
| showNotification('Profil finalisé avec succès ! Les recommandations ont été mises à jour.', '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);
|
| }
|
|
|
|
|
| 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>';
|
|
|
| if (recommendations.length === 0) {
|
| html += `
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">📊</div>
|
| <div>Complétez votre profil pour obtenir des recommandations personnalisées.</div>
|
| </div>
|
| `;
|
| } else {
|
| recommendations.forEach(rec => {
|
| html += `
|
| <div class="recommendation-item">
|
| <div class="recommendation-icon">${rec.icon}</div>
|
| <div>${rec.text}</div>
|
| </div>
|
| `;
|
| });
|
| }
|
|
|
| container.innerHTML = html;
|
| }
|
|
|
|
|
| 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 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');
|
|
|
| document.querySelectorAll('.nav-tab').forEach(tab => {
|
| if (tab.textContent.includes(getTabName(tabId))) {
|
| tab.classList.add('active');
|
| }
|
| });
|
| }
|
|
|
| function getTabName(tabId) {
|
| const names = {
|
| 'profile': 'Profil Apprenant',
|
| 'objectif': 'Objectif',
|
| 'planner': 'Planner',
|
| 'flashcards': 'Flashcards',
|
| 'journal': 'Journal',
|
| 'notifications': 'Notifications',
|
| 'stats': 'Statistiques',
|
| 'learn': 'Apprendre'
|
| };
|
| return names[tabId] || '';
|
| }
|
|
|
|
|
| let currentFlashcardIndex = 0;
|
| const flashcards = [
|
| {
|
| question: "Je (être) content de te voir.",
|
| answer: "suis",
|
| explanation: "'Être' au présent: je suis, tu es, il est, nous sommes, vous êtes, ils sont",
|
| category: "conjugaison",
|
| difficulty: "moyen"
|
| },
|
| {
|
| question: "Nous (aller) au marché demain.",
|
| answer: "allons",
|
| explanation: "'Aller' au présent: je vais, tu vas, il va, nous allons, vous allez, ils vont",
|
| category: "conjugaison",
|
| difficulty: "facile"
|
| },
|
| {
|
| question: "Elle (faire) ses devoirs chaque soir.",
|
| answer: "fait",
|
| explanation: "'Faire' au présent: je fais, tu fais, il fait, nous faisons, vous faites, ils font",
|
| category: "conjugaison",
|
| difficulty: "moyen"
|
| }
|
| ];
|
|
|
| function flipCard() {
|
| const front = document.getElementById('flashcardFront');
|
| const back = document.getElementById('flashcardBack');
|
|
|
| if (front.style.display !== 'none') {
|
| front.style.display = 'none';
|
| back.style.display = 'block';
|
| document.getElementById('flashcard').classList.add('flipped');
|
| } else {
|
| front.style.display = 'block';
|
| back.style.display = 'none';
|
| document.getElementById('flashcard').classList.remove('flipped');
|
| }
|
| }
|
|
|
| function rateCard(rating) {
|
|
|
| currentFlashcardIndex = (currentFlashcardIndex + 1) % flashcards.length;
|
| displayFlashcard(currentFlashcardIndex);
|
| }
|
|
|
| function displayFlashcard(index) {
|
| const card = flashcards[index];
|
| document.getElementById('flashcardQuestion').textContent = card.question;
|
| document.getElementById('flashcardAnswer').textContent = card.answer;
|
| document.getElementById('flashcardExplanation').textContent = card.explanation;
|
| document.getElementById('flashcardCategory').textContent = card.category.charAt(0).toUpperCase() + card.category.slice(1);
|
| document.getElementById('flashcardDifficulty').textContent = card.difficulty.charAt(0).toUpperCase() + card.difficulty.slice(1);
|
|
|
| document.getElementById('currentCard').textContent = index + 1;
|
| document.getElementById('totalCards').textContent = flashcards.length;
|
| document.getElementById('progressFill').style.width = `${((index + 1) / flashcards.length) * 100}%`;
|
|
|
| document.getElementById('flashcardFront').style.display = 'block';
|
| document.getElementById('flashcardBack').style.display = 'none';
|
| document.getElementById('flashcard').classList.remove('flipped');
|
| }
|
|
|
|
|
| function selectQuality(level) {
|
| document.querySelectorAll('.quality-dot').forEach(dot => {
|
| dot.classList.remove('active');
|
| });
|
| document.querySelector(`.quality-dot[onclick="selectQuality(${level})"]`).classList.add('active');
|
|
|
| const descriptions = [
|
| "Difficulté - Révision fréquente nécessaire",
|
| "Moyen - Intervalles standard recommandés",
|
| "Bon - Consolidation progressive",
|
| "Excellent - Rétention à long terme optimale"
|
| ];
|
| document.getElementById('quality-description').textContent = descriptions[level];
|
| }
|
|
|
| function generatePlanner() {
|
| showNotification('Planner généré avec succès !', 'success');
|
| showTab('planner');
|
| }
|
|
|
| function exportPlanner() {
|
| showNotification('Planner exporté avec succès !', 'success');
|
| }
|
|
|
| function saveJournal() {
|
| showNotification('Journal sauvegardé avec succès !', 'success');
|
| }
|
|
|
|
|
| displayFlashcard(currentFlashcardIndex);
|
| </script>
|
| </body>
|
| </html> |
