Skip to content

Commit

Permalink
info buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jonathanbees
Jonathanbees committed Nov 13, 2024
1 parent 5009ec3 commit 9a90a49
Show file tree
Hide file tree
Showing 6 changed files with 270 additions and 11 deletions.
Binary file modified db.sqlite3
View file
Binary file not shown.
63 changes: 57 additions & 6 deletions preference/templates/preference_create.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,62 @@ <h1>{% if form.instance.pk %}Edit{% else %}Create{% endif %} Preference</h1>
{% csrf_token %}

<div class="form-group">
<label for="{{ form.media_type.id_for_label }}">Media type:</label>
<label for="{{ form.media_type.id_for_label }}">
Media type:
<button type="button" class="info-button" onclick="toggleInfo('mediaTypeInfo')">i</button>
</label>
{{ form.media_type }}
<div id="mediaTypeInfo" class="info-text">
Select the type of media you prefer for your learning resources. <strong>This field is used in the algorithm to filter resources.</strong>
</div>
{% if form.media_type.errors %}
<div class="alert alert-danger mt-2">
{{ form.media_type.errors|first }}
</div>
{% endif %}
</div>

<div class="form-group">
<label for="{{ form.content_type.id_for_label }}">Content type:</label>
<label for="{{ form.content_type.id_for_label }}">
Content type:
<button type="button" class="info-button" onclick="toggleInfo('contentTypeInfo')">i</button>
</label>
{{ form.content_type }}
<div id="contentTypeInfo" class="info-text">
Describe the type of content that interests you for your learning route. <strong>This field is currently not used in the algorithm.</strong>
</div>
{% if form.content_type.errors %}
<div class="alert alert-danger mt-2">
{{ form.content_type.errors|first }}
</div>
{% endif %}
</div>

<div class="form-group">
<label for="{{ form.learning_type.id_for_label }}">Learning type:</label>
<label for="{{ form.learning_type.id_for_label }}">
Learning type:
<button type="button" class="info-button" onclick="toggleInfo('learningTypeInfo')">i</button>
</label>
{{ form.learning_type }}
<div id="learningTypeInfo" class="info-text">
Indicate your preferred type of learning for your learning route. <strong>This field is not used in the current algorithm.</strong>
</div>
{% if form.learning_type.errors %}
<div class="alert alert-danger mt-2">
{{ form.learning_type.errors|first }}
</div>
{% endif %}
</div>

<div class="form-group">
<label for="{{ form.time_per_week.id_for_label }}">Time per Week (Minutes):</label>
<label for="{{ form.time_per_week.id_for_label }}">
Time per Week (Minutes):
<button type="button" class="info-button" onclick="toggleInfo('timePerWeekInfo')">i</button>
</label>
{{ form.time_per_week }}
<div id="timePerWeekInfo" class="info-text">
Specify the amount of time you dedicate each week for your learning resources. <strong>This field is not directly used in the algorithm.</strong>
</div>
{% if form.time_per_week.errors %}
<div class="alert alert-danger mt-2">
{{ form.time_per_week.errors|first }}
Expand All @@ -35,8 +74,14 @@ <h1>{% if form.instance.pk %}Edit{% else %}Create{% endif %} Preference</h1>
</div>

<div class="form-group">
<label for="{{ form.time_per_session.id_for_label }}">Time per Session (Minutes):</label>
<label for="{{ form.time_per_session.id_for_label }}">
Time per Session (Minutes):
<button type="button" class="info-button" onclick="toggleInfo('timePerSessionInfo')">i</button>
</label>
{{ form.time_per_session }}
<div id="timePerSessionInfo" class="info-text">
Indicate the duration of each learning session. <strong>This field is used in the algorithm to filter resources based on session duration.</strong><b>Based on the session time, each resource will be or not be displayed in your learning resources</b>
</div>
{% if form.time_per_session.errors %}
<div class="alert alert-danger mt-2">
{{ form.time_per_session.errors|first }}
Expand All @@ -50,4 +95,10 @@ <h1>{% if form.instance.pk %}Edit{% else %}Create{% endif %} Preference</h1>
Preferences</button>
</form>
<br>
{% endblock %}
<script>
function toggleInfo(id) {
var info = document.getElementById(id);
info.classList.toggle('active');
}
</script>
{% endblock %}
36 changes: 35 additions & 1 deletion static/css/learningresourceform.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,4 +78,38 @@ select:focus {
border-color: #80bdff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
transition: all 0.3s ease-in-out;
}
}

.info-button {
background-color: #000;
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}

.info-button:hover {
background-color: #333;
}

/* Info text styles */
.info-text {
display: none;
font-size: 0.9rem;
color: #6c757d;
margin-top: 5px;
}

.info-text.active {
display: block;
}
.container-info-button {
display: flex;
}
37 changes: 36 additions & 1 deletion static/css/preferenceform.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,4 +92,39 @@ select.is-invalid,
textarea.is-invalid {
border-color: #e3342f;
box-shadow: 0 0 5px rgba(227, 52, 47, 0.5);
}
}

/* Updated Info button styles */
.info-button {
background-color: #000;
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}

.info-button:hover {
background-color: #333;
}

/* Info text styles */
.info-text {
display: none;
font-size: 0.9rem;
color: #6c757d;
margin-top: 5px;
}

.info-text.active {
display: block;
}
.container-info-button {
display: flex;
}
75 changes: 73 additions & 2 deletions user/templates/update_current_skills.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,16 @@
<link rel="stylesheet" href="{% static 'css/learningresourceform.css' %}">
{% endblock %}
{% block content %}
<br>
<h1>Update Current Skills</h1>
<div class="container-info-button">
<h1>Update Current Skills</h1>
<button type="button" class="info-button" data-toggle="modal" data-target="#skillLevelsModal">
i
</button>
</div>

<!-- Skill Levels Information Button -->
<!-- Replace the classic button with the info-button -->

<form method="post">
{% csrf_token %}
<div class="row">
Expand All @@ -17,12 +25,75 @@ <h1>Update Current Skills</h1>
<button type="submit" class="btn btn-primary form-submit">Update Current Skills</button>
</form>
<br>

<!-- Skill Levels Modal -->
<div class="modal fade" id="skillLevelsModal" tabindex="-1" role="dialog" aria-labelledby="skillLevelsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="skillLevelsModalLabel">Skill Levels Explained</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<p>The skill level examples are based on two widely used European standards for measuring competencies:</p>
<ol>
<li>DigComp (Digital Competence Framework for Citizens): Developed by the European Commission, this framework defines levels of digital competence covering skills in using tools and digital resources, understanding information, communication, content creation, safety, and problem-solving in digital environments. You can view the full documentation at the following link:<a target="_blank" href="https://joint-research-centre.ec.europa.eu/scientific-activities-z/education-and-training/digital-transformation-education/digital-competence-framework-citizens-digcomp_en">DigComp</a></li>
<li>EQF (European Qualifications Framework): This European framework facilitates the comparison of qualifications across different educational systems. The EQF defines competence levels from Level 1 (beginner) to Level 8 (advanced expert), covering knowledge, skills, and task autonomy. Its purpose is to provide a common reference for education and training in Europe. The EQF documentation is available at:<a target="_blank" href="https://europass.europa.eu/en/europass-digital-tools/european-qualifications-framework">EQF</a></li>
</ol>
<div class="modal-body">
<h3>1. Beginner (Level 1)</h3>
<ul>
<li><strong>Description:</strong> Basic understanding of concepts. Capable of performing simple tasks under supervision.</li>
<li><strong>DigComp Example:</strong> "Basic Foundations" — can use digital tools in straightforward contexts.</li>
<li><strong>EQF Example:</strong> Level 1-2.</li>
</ul>

<h3>2. Basic (Level 2)</h3>
<ul>
<li><strong>Description:</strong> Able to perform routine tasks with some independence and practical knowledge.</li>
<li><strong>DigComp Example:</strong> "Basic Usage" — understands concepts and tools and can use them to solve basic problems.</li>
<li><strong>EQF Example:</strong> Level 3.</li>
</ul>

<h3>3. Intermediate (Level 3)</h3>
<ul>
<li><strong>Description:</strong> Performs tasks autonomously in non-routine situations and can solve frequent problems.</li>
<li><strong>DigComp Example:</strong> "Intermediate" — understands and applies knowledge in varied contexts.</li>
<li><strong>EQF Example:</strong> Level 4.</li>
</ul>

<h3>4. Advanced (Level 4)</h3>
<ul>
<li><strong>Description:</strong> High level of autonomy and ability to solve complex problems in their area of expertise.</li>
<li><strong>DigComp Example:</strong> "Advanced" — adapts knowledge and tools to more complex situations.</li>
<li><strong>EQF Example:</strong> Level 5.</li>
</ul>

<h3>5. Expert (Level 5)</h3>
<ul>
<li><strong>Description:</strong> Full mastery of the skill, capable of innovating, teaching, and solving problems in complex areas.</li>
<li><strong>DigComp Example:</strong> "Expert" — demonstrates leadership in their field, creating or evaluating content and advanced knowledge.</li>
<li><strong>EQF Example:</strong> Level 6-7.</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<br>
<script>
$(document).ready(function () {
$('select').select2({
tokenSeparators: [',', ' '],
allowClear: true
});
});
function toggleInfo(id) {
var info = document.getElementById(id);
info.classList.toggle('active');
}
</script>
{% endblock %}
70 changes: 69 additions & 1 deletion user/templates/update_target_skills.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@
{% endblock %}
{% block content %}
<br>
<h1>Update Target Skills</h1>
<div class="container-info-button">
<h1>Update Target Skills</h1>
<button type="button" class="info-button" data-toggle="modal" data-target="#skillLevelsModal">
i
</button>
</div>

<form method="post">
{% csrf_token %}
<div class="row">
Expand All @@ -17,12 +23,74 @@ <h1>Update Target Skills</h1>
<button type="submit" class="btn btn-primary form-submit">Update Target Skills</button>
</form>
<br>
<!-- Skill Levels Modal -->
<div class="modal fade" id="skillLevelsModal" tabindex="-1" role="dialog" aria-labelledby="skillLevelsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="skillLevelsModalLabel">Skill Levels Explained</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<p>The skill level examples are based on two widely used European standards for measuring competencies:</p>
<ol>
<li>DigComp (Digital Competence Framework for Citizens): Developed by the European Commission, this framework defines levels of digital competence covering skills in using tools and digital resources, understanding information, communication, content creation, safety, and problem-solving in digital environments. You can view the full documentation at the following link:<a target="_blank" href="https://joint-research-centre.ec.europa.eu/scientific-activities-z/education-and-training/digital-transformation-education/digital-competence-framework-citizens-digcomp_en">DigComp</a></li>
<li>EQF (European Qualifications Framework): This European framework facilitates the comparison of qualifications across different educational systems. The EQF defines competence levels from Level 1 (beginner) to Level 8 (advanced expert), covering knowledge, skills, and task autonomy. Its purpose is to provide a common reference for education and training in Europe. The EQF documentation is available at:<a target="_blank" href="https://europass.europa.eu/en/europass-digital-tools/european-qualifications-framework">EQF</a></li>
</ol>
<div class="modal-body">
<h3>1. Beginner (Level 1)</h3>
<ul>
<li><strong>Description:</strong> Basic understanding of concepts. Capable of performing simple tasks under supervision.</li>
<li><strong>DigComp Example:</strong> "Basic Foundations" — can use digital tools in straightforward contexts.</li>
<li><strong>EQF Example:</strong> Level 1-2.</li>
</ul>

<h3>2. Basic (Level 2)</h3>
<ul>
<li><strong>Description:</strong> Able to perform routine tasks with some independence and practical knowledge.</li>
<li><strong>DigComp Example:</strong> "Basic Usage" — understands concepts and tools and can use them to solve basic problems.</li>
<li><strong>EQF Example:</strong> Level 3.</li>
</ul>

<h3>3. Intermediate (Level 3)</h3>
<ul>
<li><strong>Description:</strong> Performs tasks autonomously in non-routine situations and can solve frequent problems.</li>
<li><strong>DigComp Example:</strong> "Intermediate" — understands and applies knowledge in varied contexts.</li>
<li><strong>EQF Example:</strong> Level 4.</li>
</ul>

<h3>4. Advanced (Level 4)</h3>
<ul>
<li><strong>Description:</strong> High level of autonomy and ability to solve complex problems in their area of expertise.</li>
<li><strong>DigComp Example:</strong> "Advanced" — adapts knowledge and tools to more complex situations.</li>
<li><strong>EQF Example:</strong> Level 5.</li>
</ul>

<h3>5. Expert (Level 5)</h3>
<ul>
<li><strong>Description:</strong> Full mastery of the skill, capable of innovating, teaching, and solving problems in complex areas.</li>
<li><strong>DigComp Example:</strong> "Expert" — demonstrates leadership in their field, creating or evaluating content and advanced knowledge.</li>
<li><strong>EQF Example:</strong> Level 6-7.</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<script>
$(document).ready(function () {
$('select').select2({
tokenSeparators: [',', ' '],
allowClear: true
});
});
function toggleInfo(id) {
var info = document.getElementById(id);
info.classList.toggle('active');
}
</script>
{% endblock %}

0 comments on commit 9a90a49

Please sign in to comment.