<head>
<title>Student Matching</title>
<style>
/* Button styles */
button {
width: 200px;
height: 50px;
background-color: #cf808c;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease-in-out;
margin: 0 auto;
display: block;
}
button:hover {
background-color: #495867;
}
button:active {
background-color: #495867;
}
/* Match results styles */
#matchResults {
/* Center the div horizontally */
margin: 0 auto;
background-color: #cf808c;
/* Center the div vertically */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#matchResults p {
font-size: 20px;
color: white;
}
#matchResults {
border: 1px solid #d45f71;
}
</style>
</head>
<body>
<button style="margin: 0 auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" onclick="displayMatchup()">Get Matchup</button>
<div id="matchResults" style="position: absolute; top: calc(60% + 60px); left: 50%; transform: translate(-50%, -50%); width: 520px;"></div>
<script>
var status = false;
// Array of students with their corresponding years
var students = [
{ name: 'Matas', year: 2 },
{ name: 'Egle', year: 2 },
{ name: 'Lukas', year: 3 },
{ name: 'Gabija', year: 1 },
{ name: 'Sandra', year: 4 },
{ name: 'Jonas', year: 2 },
{ name: 'Paulius', year: 3 },
{ name: 'Gintare', year: 1 },
{ name: 'Marius', year: 3 },
{ name: 'Laura', year: 4 },
{ name: 'Rokas', year: 2 },
{ name: 'Indre ', year: 1 },
{ name: 'Mantas', year: 2 },
{ name: 'Simona', year: 3 },
{ name: 'Linas', year: 2 },
{ name: 'Eglė', year: 1 },
{ name: 'Marius', year: 3 },
{ name: 'Rūperta', year: 4 },
{ name: 'Gintaras', year: 2 },
{ name: 'Lina', year: 1 },
{ name: 'Agnė', year: 3 },
{ name: 'Liepa', year: 4 },
{ name: 'Aysu', year: 2 },
{ name: 'Domantas', year: 3 },
{ name: 'Aistis', year: 3 },
{ name: 'Asta', year: 4 },
{ name: 'Domantas', year: 2 },
// Add more students and their years as needed
];
var matchedStudents = [];
function getRandomStudent(excludeName, excludeYear) {
var availableStudents = students.filter(function(student) {
return student.name !== excludeName && student.year !== excludeYear && !matchedStudents.includes(student.name);
});
if (availableStudents.length === 0) {
return null; // No suitable match found
}
var randomIndex = Math.floor(Math.random() * availableStudents.length);
return availableStudents.splice(randomIndex, 1)[0];
}
function displayMatchup() {
var studentName = "Matas";
var studentYear = 2;
var student = students.find(function (student) {
return student.name === studentName && student.year === studentYear;
});
if (student) {
var otherStudent = getRandomStudent(studentName, studentYear);
if (otherStudent) {
var matchResults = document.getElementById('matchResults');
matchResults.innerHTML = '<p>Logged in as ' + studentName + ' - ' + getYearDescription(studentYear) + ' GiftED student.</p>' +
'<p>Your weekly Caffe Match-up is:</p>' +
'<p>' + otherStudent.name + ', ' + getYearDescription(otherStudent.year) + '</p>' +
'<p id="status"> Status: Already Met!</p>'
matchedStudents.push(otherStudent.name);
} else {
alert('No suitable match found.');
}
} else {
alert('Student not found or does not match the provided year.');
}
}
function getYearDescription(year) {
if (year === 1) {
return 'First-Year';
} else if (year === 2) {
return 'Second-Year';
} else if (year === 3) {
return 'Third-Year';
} else if (year === 4) {
return 'Fourth-Year';
} else {
return 'Unknown Year';
}
}
</script>
</body>