function getTimeline(title,id,array,timelineButtons){
var timelines;
timelines="<div style='font:5vw Anton;margin-bottom:20px;'>"+title+"<div style='display:flex'>";
for(var i=0;i<timelineButtons.length;i++){
if(i==0){
timelines=timelines+"<div style='position:relative;left:0%;top:0%;transform:translate(0%,0%);width:8vw;height:8vw;-moz-border-radius:4vw;-webkit-border-radius:4vwv;border-radius:4vw;margin-right:1vw;overflow:hidden;border:3px solid #00C0FF;cursor:pointer;'><img id='timelineButton"+id+i+"' onclick='scrollTimeline(\""+id+"\","+i+","+array.length+");' style='width:8vw;height:8vw;object-fit:cover;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);' src='"+timelineButtons[i]+"'></iframe></div>";}else{
timelines=timelines+"<div style='position:relative;left:0%;top:0%;transform:translate(0%,0%);width:8vw;height:8vw;-moz-border-radius:4vw;-webkit-border-radius:4vwv;border-radius:4vw;margin-right:1vw;overflow:hidden;border:3px solid #00C0FF;cursor:pointer;'><img id='timelineButton"+id+i+"' onclick='scrollTimeline(\""+id+"\","+i+","+array.length+");' style='width:8vw;height:8vw;object-fit:cover;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);' src='"+timelineButtons[i]+"'></div>";
}
}
timelines=timelines+"</div></div><div style='position:relative;border:2px dashed #00C0FF;height:0px; left:0px;right:0px;margin-bottom:20px;'></div>";
for(var pageNumber=0;pageNumber<array.length;pageNumber++){
if(pageNumber==0){
timelines=timelines+"</div><div id='timelinePanel"+id+pageNumber+"' style='position: relative;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding-bottom:12vw;'><div style='position:absolute;border:0;margin:-3px;background-color:#00C0FF;width:4px; top:0px;bottom:0px;left:50%;margin-top:4vw;margin-bottom:4vw;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;'></div>";
}else{
timelines=timelines+"<div id='timelinePanel"+id+pageNumber+"' style='position: relative;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding-bottom:12vw;'><div style='position:absolute;border:0;margin:-3px;background-color:#00C0FF;width:4px; top:0px;bottom:0px;left:50%;margin-top:4vw;margin-bottom:4vw;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;'></div>";
}
for(var j=0;j<array[pageNumber].length;j++){
if(j==0){
//right
timelines=timelines+"<div style='display:flex'><div style='width:50%;'><div style='animation-name:fadeIn;animation-duration:0.7s;'><div style='position:relative;left:100%;top:0%;transform:translate(-50%,100%);width:8vw;height:8vw;-moz-border-radius:4vw;-webkit-border-radius:4vw;border-radius:4vw;overflow:hidden;border:3px solid #00C0FF;'><img style='width:8vw;height:8vw;object-fit:cover;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);' src='"+array[pageNumber][j][0]+"'></div><div style='border:2px dotted #00C0F0;position:relative;left:0%;top:-2vh;transform:translate(6vw,0%);padding:25px 25px;margin-right:12vw;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;background-color:whitesmoke;'><div style='font:2vw helvetica;color:white;background-color:#00C0F0;padding:2vw;margin-bottom:1vw;;'>"+array[pageNumber][j][1]+"<div style='position:relative;left:100%;top:50%;transform:translate(100%,-50%);width:0px;border:solid;border-width:1.5vw 0px 1.5vw 1.5vw;border-color:transparent transparent transparent #0CC0F0;'></div></div><img src='"+array[pageNumber][j][2]+"'/ style='width:100%;'><p style='padding:2vw;color:white;font:1.5vw helvetica;background-color:#0070c0;'>"+array[pageNumber][j][3]+"</p></div></div></div><div style='width:50%;'><div style='animation-name:fadeIn;animation-duration:0.7s;'><div style='position:relative;left:100%;top:0%;transform:translate(-50%,100%);width:8vw;height:8vw;-moz-border-radius:4vw;-webkit-border-radius:4vw;border-radius:4vw;overflow:hidden;'></div><div style='position:relative;left:0%;top:-2vh;transform:translate(6vw,0%);padding:0 25px;margin-right:12vw;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;'><div style='font:2vw Anton;padding:2vw;margin-bottom:1vw;;'>"+array[pageNumber][j][5].replace("Course: ","")+"</div><p>The student developed core skills in digital modeling, including dimensioning, grouping, aligning, positioning, and rotating shapes using the Tinkercad 3D workspace. The course included practical exercises such as creating compound forms and customizing a keychain. It culminated in modeling a simple house by following provided drawings and measurements, then preparing the parts for laser cutting and assembling the structure from cardboard. Through this program, the student has demonstrated a foundational understanding of 3D design and fabrication workflows essential for future work in digital prototyping and design.</p><br><p style='padding:2vw;font:1.5vw Anton;'>"+array[pageNumber][j][4]+"</p></div></div></div></div>";
}
if(j%2==0&&j!=0){
//left container
timelines=timelines+"<div style='width:50%;'><div style='animation-name:fadeIn;animation-duration:0.7s;'><div style='position:relative;left:100%;top:0%;transform:translate(-50%,100%);width:8vw;height:8vw;-moz-border-radius:4vw;-webkit-border-radius:4vw;border-radius:4vw;overflow:hidden;border:3px solid #00C0FF;'><img style='width:8vw;height:8vw;object-fit:cover;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);' src='"+array[pageNumber][j][0]+"'></div><div style='border:2px dotted #00C0F0;position:relative;left:0%;top:-2vh;transform:translate(6vw,0%);padding:25px 25px;margin-right:12vw;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;background-color:whitesmoke;'><div style='font:2vw helvetica;color:white;background-color:#00C0F0;padding:2vw;margin-bottom:1vw;;'>"+array[pageNumber][j][1]+"<div style='position:relative;left:100%;top:50%;transform:translate(100%,-50%);width:0px;border:solid;border-width:1.5vw 0px 1.5vw 1.5vw;border-color:transparent transparent transparent #0CC0F0;'></div></div><img src='"+array[pageNumber][j][2]+"'/ style='width:100%;'><p style='padding:2vw;color:white;font:1.5vw helvetica;background-color:#0070c0;'>"+array[pageNumber][j][3]+"</p></div></div></div>";
}else{
//right
timelines=timelines+"<div style='position:relative;left:50%;width:50%;'><div style='animation-name:fadeIn;animation-duration:0.7s;'><div style='position:relative;left:0%;top:0%;transform:translate(-50%,100%);width:8vw;height:8vw;-moz-border-radius:4vw;-webkit-border-radius:4vwv;border-radius:4vw;overflow:hidden;border:3px solid #00C0FF;'><img style='width:8vw;height:8vw;object-fit:cover;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);' src='"+array[pageNumber][j][0]+"'></div><div style='border:2px dotted #00C0F0;position:relative;left:0%;top:-2vh;transform:translate(6vw,0%);padding:25px 25px;margin-right:12vw;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;background-color:whitesmoke;'><div style='font:2vw helvetica;color:white;background-color:#00C0F0;padding:2vw;margin-bottom:1vw;;'>"+array[pageNumber][j][1]+"<div style='position:relative;left:0%;top:50%;transform:translate(-150%,-50%);width:0px;border:solid;border-width:1.5vw 1.5vw 1.5vw 1.5vw;border-color:transparent #0CC0F0 transparent transparent;'></div></div><img src='"+array[pageNumber][j][2]+"'/ style='width:100%;'><p style='padding:2vw;color:white;font:1.5vw helvetica;background-color:#0070c0;'>"+array[pageNumber][j][3]+"</p></div></div></div>";
}
}
timelines=timelines+"</div>";
}
return timelines;
}
function scrollTimeline(id,pageNumber,maxNumberOfPages){
for(var i=0;i<maxNumberOfPages;i++){
if(i==pageNumber){
document.getElementById("timelineButton"+id+i).style.opacity="1";
document.getElementById("timelinePanel"+id+i).style.display="block";
}else{
document.getElementById("timelineButton"+id+i).style.opacity="0.3";
document.getElementById("timelinePanel"+id+i).style.display="none";
}
}
}
function getCards(title,id,array){
var cards;
cards="<div style='font:5vw Anton;margin:20px;'>"+title+"<div style='display:flex'>";
for(var i=0;i<array.length;i++){
//cards=cards+"<div style='width:100%;'><div style='float:left;width:30vw;margin:3vw;margin-bottom:5vw;'><div style='position:relative;left:50%;top:0%;transform:translate(-50%,0%);width:20vw;height:20vw;-moz-border-radius:10vw;-webkit-border-radius:10vw;border-radius:10vw;overflow:hidden;border:3px solid #00C0FF;cursor:pointer;'><img style='max-width:15vw;max-height:15vw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);' src='"+array[i][0]+"'></div><div style='font:1.5vw calibri;text-align:center;padding:1vw;'>"+array[i][1]+"</div><div style='font:1.5vw calibri;padding-top:2vw;background-color:#00C0FF;color:white;margin-bottom:1vw;padding:1vw;border-radius:1vw;'>Group Projects Completed: "+array[i][2]+"</div><div style='font:1.5vw calibri;background-color:#00C0FF;color:white;margin-bottom:1vw;padding:1vw;border-radius:1vw;'>Lessons Completed: "+array[i][3]+"</div></div>";
cards=cards+"<div style='width:100%;'><div style='float:left;width:30vw;margin:3vw;margin-bottom:5vw;'><div style='position:relative;left:50%;top:0%;transform:translate(-50%,0%);width:20vw;height:20vw;-moz-border-radius:10vw;-webkit-border-radius:10vw;border-radius:10vw;overflow:hidden;border:3px solid #00C0FF;cursor:pointer;'><img style='max-width:15vw;max-height:15vw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);' src='"+array[i][0]+"'></div><div style='font:1.5vw calibri;text-align:center;padding:1vw;'>"+array[i][1]+"</div><div style='font:1.5vw calibri;padding-top:2vw;background-color:#00C0FF;color:white;margin-bottom:1vw;padding:1vw;border-radius:1vw;'>Certificate Recipients: "+array[i][2]+"</div></div>";
if(i%2==1){
cards=cards+"<div style='clear:left'></div>";}
}
cards=cards+"</div></div></div></div>";
return cards;
}
function getLargeDisplay(title,id,array){
var largeDisplay;
largeDisplay="<div style='font:5vw Anton;margin:20px;'>"+title+"<div style='margin:0vw;'>";
largeDisplay=largeDisplay+"<div style='position:absolute;z-index:1;left:50%;bottom:5vh;transform:translate(-50%,50%);width:auto;height:auto;'>";
for(var i=0;i<array.length;i++){
largeDisplay=largeDisplay+"<div id='largeDisplayButton"+id+i+"' style='margin:1vw;position:relative;float:left;width:4vw;height:4vw;-moz-border-radius:2vw;-webkit-border-radius:2vw;border-radius:2vw;background-color:#00C0FF;cursor:pointer;' onclick='scrollLargeDisplay(\""+id+"\","+i+","+array.length+")'></div>";
}
largeDisplay=largeDisplay+"</div>";
for(var i=0;i<array.length;i++){
largeDisplay=largeDisplay+"<div style='width:100%;position:relative;'><div id='largeDisplayPanel"+id+i+"'style='position:relative;left:0%;top:0%;transform:translate(0%,0%);max-width:100%;height:70vh;-moz-border-radius:2vw;-webkit-border-radius:2vw;border-radius:2vw;overflow:hidden;border:3px solid #00C0FF;'><div style='animation-name:fadeIn;animation-duration:0.7s;height:70vh;';><img style='width:100%;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);' src='"+array[i][0]+"'></div></div>";
}
largeDisplay=largeDisplay+"</div></div></div></div>";
return largeDisplay;
}
function scrollLargeDisplay(id,pageNumber,maxNumberOfPages){
for(var i=0;i<maxNumberOfPages;i++){
if(i==pageNumber){
document.getElementById("largeDisplayButton"+id+i).style.opacity="1";
document.getElementById("largeDisplayPanel"+id+i).style.display="block";
}else{
document.getElementById("largeDisplayButton"+id+i).style.opacity="0.3";
document.getElementById("largeDisplayPanel"+id+i).style.display="none";
}
}
}