Drucken, nachdem die gezogenen Objekte platziert wurden

Question

Ich brauche die letzte Seite (nachdem ich alles durchgegangen und eingereicht habe), um mit den in die Team-Boxen gezogenen Schülernamen zu drucken, aber was auch immer ich mit den Anzeige-/Float-/Positionseigenschaften versuche, die Studentenkarten wird beim Drucken der Seite nicht angezeigt.

Mein Code verwendet auch interact_min.js von Interact.io, die im Codepen-Projekt ist.

Codepen Project Link

Hier ist ein Screenshot von der letzten Seite, wenn die Schüler in Teams verteilt werden. Ich brauche die Seite so für Lehrer auszudrucken. (Klassengrößen variieren, so dass es für> = 8 Studenten funktionieren muss, die #ofTeams> = 2 sind)

Ich habe einige "Fixes" von verschiedenen Seiten ausprobiert, aber keine davon funktioniert für mich. Jede Hilfe wird geschätzt. Ich bin relativ neu in der Codierung, also bitte erklären Sie gründlich.

Dies ist, wie es aussieht, wenn ich versuche zu drucken. Hier habe ich die Skala auf 30% geändert und Sie können 7/8 der Studentenkarten sehen.

function isInputNumber(){ 
 
    const inputNumber = parseInt($("#numberOfStudents").val()); 
 
    if(isNaN(inputNumber)) { 
 
    alert('Must input a number'); 
 
    return ; 
 
    } else { 
 
    return ; 
 
    } 
 
} 
 

 
function isNumberBigEnough() { 
 
    const numberS = parseInt($("#numberOfStudents").val()); 
 
    if (numberS > 7 && isInputNumber) { 
 
    $('#submitTeams').removeAttr('disabled'); 
 
    } else { 
 

 
    return ; 
 
    } 
 
} 
 

 
$('#numberOfStudents').keyup(isInputNumber).keyup(isNumberBigEnough); 
 

 

 
//First submit function on the team form gives the user a response 
 
$("#submitTeams").click(function(event) { 
 
    event.preventDefault(); 
 
    const numberOfStudents = parseInt($("#numberOfStudents").val()); 
 
    const divideByFour = numberOfStudents % 4; 
 
    let responseHTML = '<p id="numberOverall">'+numberOfStudents+'</p><p class="responseText">'; 
 
    if (divideByFour === 0){ 
 
    responseHTML += 'You will have ' + numberOfStudents/4 + ' teams of 4 in your class.'; 
 
    } 
 
    else if (divideByFour === 1) { 
 
    responseHTML += 'You will have ' + (numberOfStudents - 1) /4 + ' teams of 4 in your class and one team of 5.'; 
 
    } 
 
    else if (divideByFour === 2) { 
 
    responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.'; 
 
    } 
 
    else { 
 
    responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.'; 
 
    } 
 
    responseHTML += '</p>'; 
 

 
    $('#studentNumberResponse').css('display', 'block').html(responseHTML); 
 
//second submit function on the team form that makes the second form (studentsForm) 
 
    let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm" onsubmit="return false;">'; 
 
    let i = 0; 
 
    do { 
 
    i++; 
 
    responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>'; 
 
    responseHTMLSecond += '<div class="form-group"> <h4> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>'; 
 
    } while (i < numberOfStudents); 
 
    responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents" onclick="addStudentsClicked()">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students or after making any changes to student names.</small> </div>'; 
 
    $('#secondsStep').show().html(responseHTMLSecond); 
 
    $('#numberOfStudents').val(''); 
 
}); 
 
//submit function on the studentsForm to show a response 
 
function addStudentsClicked() 
 
{ 
 
    let responseHTMLThird = '<h4 class="card-title">Step 3: Review Class Roster</h4> <p class="card-text">Review your class roster before moving on to the next step. If you need to make any changes, scroll back up to Step 2 and hit submit again after changes have been made.</p>'; 
 
    const numberOfStudentsTwo = parseInt($("#numberOverall").text()); 
 

 
    let Students = []; 
 
    for (i =1; i < numberOfStudentsTwo+1; i++) { 
 
     let $firstName = $('#studentFirstName'+i+'').val(); 
 
     let $lastName = $('#studentLastName'+i+'').val(); 
 
     let $studentLevel = $('#exampleSelect'+i+' :selected').text(); 
 
     Students[i] = new Object({$firstName, $lastName, $studentLevel}); 
 
    responseHTMLThird += '<p class="studentRosterList">'+Students[i].$firstName+' '+Students[i].$lastName+' : '+Students[i].$studentLevel+'</p>'; 
 
    } 
 
    responseHTMLThird += '<button type="submit" class="btn btn-primary" id="submitOverall" onclick="finalSubmit()">Submit</button>'; 
 
    alert('Scroll down to review your student roster.'); 
 
    $('#studentListResponse').show().html(responseHTMLThird); 
 
} 
 

 
function finalSubmit() { 
 
    if(confirm("Are you sure everything is correct?") === true){ 
 
    $('.hideMe').hide(); 
 
    document.location.href = "#top"; 
 
    makingCards(); 
 
    } else { 
 
    alert('Please make your changes before submitting again.'); 
 
    } 
 
} 
 

 
function makingCards() { 
 
    let makeTeams = '<div class="card-block clearfix" id="makeTeams"><h4 class="card-title">Step 4: Make Teams</h4><p class="card-text">Use your mouse to click and drag students into team groupings. Remember, you don\'t want to have 2 Highs or 2 Lows on a team together.</p></div>'; 
 

 
    const numberOfStudentsTwo = parseInt($("#numberOverall").text()); 
 
    const numero = numberOfStudentsTwo % 4; 
 
    let fourthResponse = ''; 
 
    let StudentsTwo = []; 
 
    for (i =1; i < numberOfStudentsTwo+1; i++) { 
 
     let $firstName = $('#studentFirstName'+i+'').val(); 
 
     let $lastName = $('#studentLastName'+i+'').val(); 
 
     let $studentLevel = $('#exampleSelect'+i+' :selected').text(); 
 
     StudentsTwo[i] = new Object({$firstName, $lastName, $studentLevel}); 
 
     fourthResponse += '<div class="card teamCard draggable" style="width: 10rem;"><div class="card-block teamCard-block">'; 
 
     fourthResponse += '<h4 class="card-title teamCard-title">'+ StudentsTwo[i].$firstName; 
 
     fourthResponse += ' '+ StudentsTwo[i].$lastName; 
 
     fourthResponse += '</h4>'; 
 
     fourthResponse += '<h6 class="card-subtitle mb-2 text-muted teamCard-subtitle">Student Level: '+ StudentsTwo[i].$studentLevel; 
 
     fourthResponse += '</h6>'; 
 
     fourthResponse += '</div></div>'; 
 
    } 
 

 
    $('#top').append(makeTeams); 
 
    teamNumber(); 
 
    $('#teamDropBox').after(fourthResponse); 
 
    $('.teamCard').mousedown(handle_mousedown); 
 
} 
 

 
function teamNumber (numero) { 
 
    const numberOfStudentsTwo = parseInt($("#numberOverall").text()); 
 
    let $teamDrops = '<table id="teamDropBox"><tbody>'; 
 
    if (numero === 0){ 
 
    let $teams = numberOfStudentsTwo/4; 
 
    for (j=1; j < $teams; j++){ 
 
     $teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>'; 
 
    } 
 
    } else if (numero === 1) { 
 
    let $teams = (numberOfStudentsTwo - 1)/4 + 1; 
 
    for (j=1; j < $teams; j++){ 
 
     $teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>'; 
 
    } 
 
    } else if (numero === 2) { 
 
    let $teams = (numberOfStudentsTwo - 6)/4 + 2; 
 
    for (j=1; j < $teams; j++){ 
 
     $teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>'; 
 
    } 
 
    } else { 
 
    let $teams = (numberOfStudentsTwo - 3)/4 + 1; 
 
    for (j=1; j < $teams; j++){ 
 
     $teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>'; 
 
    } 
 
    $teamDrops += '</tbody></table>'; 
 
    } 
 

 
    $('#makeTeams').append($teamDrops); 
 
} 
 

 
//dragging code from online site - changed to interact.js code below 
 
/* 
 
function handle_mousedown(e){ 
 
    window.my_dragging = {}; 
 
    my_dragging.pageX0 = e.pageX; 
 
    my_dragging.pageY0 = e.pageY; 
 
    my_dragging.elem = this; 
 
    my_dragging.offset0 = $(this).offset(); 
 
    function handle_dragging(e){ 
 
     var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0); 
 
     var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0); 
 
     $(my_dragging.elem) 
 
     .offset({top: top, left: left}); 
 
    } 
 
    function handle_mouseup(e){ 
 
     $('body') 
 
     .off('mousemove', handle_dragging) 
 
     .off('mouseup', handle_mouseup); 
 
    } 
 
    $('body') 
 
    .on('mouseup', handle_mouseup) 
 
    .on('mousemove', handle_dragging); 
 
} 
 
*/ 
 

 
//interact.js code here: 
 
// target elements with the "draggable" class 
 
interact('.draggable') 
 
    .draggable({ 
 
    // enable inertial throwing 
 
    inertia: true, 
 
    // keep the element within the area of it's parent 
 
    restrict: { 
 
     restriction: "parent", 
 
     restriction: ".dropzone", 
 
     endOnly: true, 
 
     elementRect: { top: 0, left: 0, bottom: 1, right: 1 } 
 
    }, 
 
    // enable autoScroll 
 
    autoScroll: true, 
 

 
    // call this function on every dragmove event 
 
    onmove: dragMoveListener, 
 
    }); 
 

 
    function dragMoveListener (event) { 
 
    var target = event.target, 
 
     // keep the dragged position in the data-x/data-y attributes 
 
     x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, 
 
     y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; 
 

 
    // translate the element 
 
    target.style.webkitTransform = 
 
    target.style.transform = 
 
     'translate(' + x + 'px, ' + y + 'px)'; 
 

 
    // update the posiion attributes 
 
    target.setAttribute('data-x', x); 
 
    target.setAttribute('data-y', y); 
 
    } 
 

 
    // enable draggables to be dropped into this 
 
    interact('.dropzone').dropzone({ 
 
    // only accept elements matching this CSS selector 
 
    accept: '.draggable', 
 
    // Require a 75% element overlap for a drop to be possible 
 
    overlap: 0.75, 
 

 
    // listen for drop related events: 
 

 
    ondropactivate: function (event) { 
 
     // add active dropzone feedback 
 
     event.target.classList.add('drop-active'); 
 
    }, 
 

 
    ondropdeactivate: function (event) { 
 
     // remove active dropzone feedback 
 
     event.target.classList.remove('drop-active'); 
 
    } 
 
    });

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#studentNumberResponse, #secondsStep, #studentListResponse { 
 
    display: none; 
 
} 
 

 
#numberOverall { 
 
    color: #fff; 
 
} 
 

 
.responseText { 
 
    font-size: 2rem; 
 
} 
 

 
.teamCard { 
 
    float: right; 
 
    margin: 2rem; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
    border: 1px solid grey; 
 
    margin: 3rem 0 5rem 1rem; 
 
    float: left; 
 
} 
 

 
table th { 
 
    border: 1px solid grey; 
 
    vertical-align: center; 
 
    text-align: center; 
 
    width: 18rem; 
 
    padding: 0 5rem; 
 
    text-transform: uppercase; 
 
    font-size: 2rem; 
 
} 
 

 
table td { 
 
    height: 15rem; 
 
    border: 1px solid grey; 
 
    width: 50rem; 
 
} 
 

 
@media print { 
 
    body * { 
 
    visibility: hidden; 
 
    } 
 
    #top, #top * { 
 
    visibility: visible; 
 
    } 
 
    #top { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    } 
 
}

<!DOCTYPE HTML> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>OnPoint Team Generator</title> 
 
    <meta name="description" content="OnPoint Team Generator"> 
 
    <meta name="author" content="MeganRoberts"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <div class="card" id="top"> 
 
    <h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3> 
 
    <div class="card-block hideMe"> 
 
     <h4 class="card-title">Step 1: Number of Teams</h4> 
 
     <p class="card-text">How many students do you have in your class?</p> 
 
     <form id="teamForm"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students" data-toggle="tooltip" data-placement="top" title="Please enter a number larger than 7."> 
 
     </div> 
 
     <button type="submit" class="btn btn-primary" id="submitTeams" disabled>Submit</button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
    <div class="card hideMe"> 
 
    <div class="card-block" id="studentNumberResponse"> 
 
    </div> 
 
    </div> 
 
    <div id="secondsStep" class="card hideMe"> 
 
    </div> 
 
    <div id="listResponse" class="card hideMe"> 
 
    <div class="card-block" id="studentListResponse"> 
 
    </div> 
 
    </div> 
 
    <script src="interact_min.js"></script> 
 
    <script src="app.js"></script> 
 
</body> 
 
</html>

Answer 1

Ich hatte meinen Code ein bisschen zu überarbeiten, es zu drucken zu bekommen. Ich habe stattdessen die Drag & Drop-Funktion in die jQuery-Benutzeroberfläche geändert.

Codepen Project

Benötigt jquery UI vollständig die codepen Link Check-out-Funktion, so zu -> unten ist die "endgültige" Code

$('#printbtn').hide(); 
 
$('#studentNumberResponse').hide(); 
 
$('#secondsStep').hide(); 
 
$('#listResponse').hide(); 
 

 
//Checking to make sure the input is a number for the rest of the program to work 
 
function isInputNumber(){ 
 
    //get user input 
 
    const inputNumber = parseInt($("#numberOfStudents").val()); 
 
    //check if input is a number or not 
 
    if(isNaN(inputNumber)) { 
 
    alert('Must input a number'); 
 
    return ; 
 
    } else { 
 
    return ; 
 
    } 
 
} 
 
//Checking to make sure that the input is larger than 7 in order to create teams and remove the disabled from the submit button 
 
function isNumberBigEnough() { 
 
    //get user input 
 
    const numberS = parseInt($("#numberOfStudents").val()); 
 
    //check to make sure that the number is large enough and then remove the disabled attribute 
 
    if (numberS > 7 && isInputNumber) { 
 
    $('#submitTeams').removeAttr('disabled'); 
 
    } else { 
 

 
    return ; 
 
    } 
 
} 
 
//watching user input to determine if they can submit using the above functions 
 
$('#numberOfStudents').keyup(isInputNumber).keyup(isNumberBigEnough); 
 

 
//First submit function on the team form gives the user a response of how many teams and what kind of teams depending on their input 
 
$("#submitTeams").click(function(event) { 
 
    //prevent the window from refeshing after submit event 
 
    event.preventDefault(); 
 
    //get user input 
 
    const numberOfStudents = parseInt($("#numberOfStudents").val()); 
 
    //DRY for repeated calc 
 
    const divideByFour = numberOfStudents % 4; 
 
    //response to user to tell them the number of teams there will be in their class 
 
    let responseHTML = '<p id="numberOverall">'+numberOfStudents+'</p><p class="responseText">'; 
 
    if (divideByFour === 0){ 
 
    responseHTML += 'You will have ' + numberOfStudents/4 + ' teams of 4 in your class.'; 
 
    } 
 
    else if (divideByFour === 1) { 
 
    responseHTML += 'You will have ' + (numberOfStudents - 5) /4 + ' teams of 4 in your class and one team of 5.'; 
 
    } 
 
    else if (divideByFour === 2) { 
 
    responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.'; 
 
    } 
 
    else { 
 
    responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.'; 
 
    } 
 
    responseHTML += '</p>'; 
 
    //show and add the above html to the studentNumberResponse so the user can view the response 
 
    $('#studentNumberResponse').css('display', 'block').html(responseHTML); 
 
//second submit function on the team form that makes the second form (studentsForm) to allow the user to enter student names for sorting later 
 
    //create form to match the student numbered entered 
 
    let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title"><span>Step 2:</span> Enter Your Students</h4> <p class="card-text lightText">Add your students to create each individual team.</p> <form id="studentsForm" onsubmit="return false;">'; 
 
    //needed for the do while loop 
 
    let i = 0; 
 
    do { 
 
    i++; 
 
    //firstname and lastname and level input for each student 
 
    responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>'; 
 
    responseHTMLSecond += '<div class="form-group"> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>'; 
 
    } while (i < numberOfStudents); 
 
    //add submit button to end of the student info form 
 
    responseHTMLSecond += '<button type="submit" class="btn btn-primary opbtn" id="submitStudents" onclick="addStudentsClicked()">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students or after making any changes to student names.</small> </div>'; 
 
    //show and add the above html for the student info form 
 
    $('#secondsStep').show().html(responseHTMLSecond); 
 
    //clear the number of students input field 
 
    $('#numberOfStudents').val(''); 
 
}); 
 

 
//submit function on the studentsForm to show the class roster for a final check before moving on 
 
function addStudentsClicked() { 
 
    //html for the third response 
 
    let responseHTMLThird = '<h4 class="card-title"><span>Step 3:</span> Review Class Roster</h4> <p class="card-text lightText">Review your class roster before moving on to the next step. If you need to make any changes, scroll back up to Step 2 and hit submit again after changes have been made.</p>'; 
 
    //hidden numberOfStudents to use in future functions like this one = user input from first step 
 
    const numberOfStudentsTwo = parseInt($("#numberOverall").text()); 
 
    //create empty array to add students from student info form 
 
    let Students = []; 
 
    //for each student, create an object with the input information from the previous form 
 
    for (i =1; i < numberOfStudentsTwo+1; i++) { 
 
     let $firstName = $('#studentFirstName'+i+'').val(); 
 
     let $lastName = $('#studentLastName'+i+'').val(); 
 
     let $studentLevel = $('#exampleSelect'+i+' :selected').text(); 
 
     Students[i] = new Object({$firstName, $lastName, $studentLevel}); 
 
     //use the data in the array to print out a student roster for the user to review 
 
     responseHTMLThird += '<p class="studentRosterList">'+Students[i].$firstName+' '+Students[i].$lastName+' : '+Students[i].$studentLevel+'</p>'; 
 
    } 
 
    //final submit button for the user to click on after reviewing the student roster 
 
    responseHTMLThird += '<button type="submit" class="btn btn-primary opbtn" id="submitOverall" onclick="finalSubmit()">Submit</button>'; 
 
    //response appears below the viewport, so an alert to let them know to scroll down 
 
    alert('Scroll down to review your student roster.'); 
 
    //show and add response to the page 
 
    $('#listResponse').show(); 
 
    $('#studentListResponse').show().html(responseHTMLThird); 
 
} 
 

 
//asking the user if everything is correct before moving on (cant go back and change) 
 
function finalSubmit() { 
 
    if(confirm("Are you sure everything is correct?") === true){ 
 
    //hide forms that are no longer needed 
 
    $('.hideMe').hide(); 
 
    //move the user back to the top of the screen 
 
    document.location.href = "#top"; 
 
    //cal the function to make the team boxes 
 
    makingTeams(); 
 
    } else { 
 
    alert('Please make your changes before submitting again.'); 
 
    } 
 
} 
 

 
//making the teams dropzone containers 
 
function makingTeams() { 
 
    //header for step 4 
 
    let makeTeams = '<div class="card-block clearfix printMe" id="makeTeams"><h4 class="card-title"><span>Step 4:</span> Make Teams</h4><p class="card-text lightText">Use your mouse to click and drag students into team groupings. Remember, you don\'t want to have 2 Highs or 2 Lows on a team together.</p><p id="reminderTeams" class="lightText"></p></div>'; 
 
    //get the number of students for creating the correct amount of teams 
 
    const numberOfStudentsTwo = parseInt($("#numberOverall").text()); 
 
    //get the remainder to split the loops depending on the number of students 
 
    const numero = numberOfStudentsTwo % 4; 
 
    //start the response string 
 
    let $teamDrops = ''; 
 
    //creating the team ul for sorting ui 
 
    if (numero === 0){ 
 
    //if equally divisible, then the number divided by four = the number of teams 
 
    let $teams = numberOfStudentsTwo/4; 
 
    for (let j=1; j < $teams +1; j++){ 
 
     $teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>'; 
 
    } 
 
    } else if (numero === 1) { 
 
    //if remainder 1, then subtract the one team of five from the total, divide by four to get the number of teams and add back the 1 team of 5 
 
    let $teams = (numberOfStudentsTwo - 5)/4 + 1; 
 
    for (let j=1; j < $teams +1; j++){ 
 
     $teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>'; 
 
    } 
 
    } else if (numero === 2) { 
 
    //if remainder 2, then subtract 6 for the two teams of 3 then divide by four to get the number of teams and add back the 2 teams of 3 
 
    let $teams = (numberOfStudentsTwo - 6)/4 + 2; 
 
    for (let j=1; j < $teams+1; j++){ 
 
     $teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>'; 
 
    } 
 
    } else { 
 
    //if remainder 3, then subtract the one team of 3 then divide by four and add back the 1 team of 3 
 
    let $teams = (numberOfStudentsTwo - 3)/4 + 1; 
 
    for (let j=1; j < $teams+1; j++){ 
 
     $teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>'; 
 
    } 
 
    } 
 
    //append the instructions to the top 
 
    $('#top').append(makeTeams); 
 
    //append the team ul drops to the top 
 
    $('#top').append($teamDrops); 
 
    //create empty list for student roster to fill into 
 
    let studentRoster = '<ul id="rosterDrag" class="connected printMe"><h4>Student Roster</h4></ul>'; 
 
    //append the student roster to the top 
 
    $('#top').append(studentRoster); 
 
    //call the function to make the student roster list for dragging 
 
    makingCards(); 
 
} 
 

 
//making the individual student cards based off of the input from step 2 
 
function makingCards() { 
 
    //get student number info 
 
    const numberOfStudentsTwo = parseInt($("#numberOverall").text()); 
 
    //start response html 
 
    let fourthResponse = ''; 
 
    //start array to hold student data 
 
    let StudentsTwo = []; 
 
    //start loop to create object for each student 
 
    for (i =1; i < numberOfStudentsTwo+1; i++) { 
 
     let $firstName = $('#studentFirstName'+i+'').val(); 
 
     let $lastName = $('#studentLastName'+i+'').val(); 
 
     let $studentLevel = $('#exampleSelect'+i+' :selected').text(); 
 
     StudentsTwo[i] = new Object({$firstName, $lastName, $studentLevel}); 
 
     //add html to the response 
 
     fourthResponse += '<li class="card teamCard'+i+' draggable printMe" style="width: 10rem;">'; 
 
     fourthResponse += '<h4 class="card-title teamCard-title">'+ StudentsTwo[i].$firstName; 
 
     fourthResponse += ' '+ StudentsTwo[i].$lastName; 
 
     fourthResponse += '</h4>'; 
 
     fourthResponse += '<h6 class="card-subtitle mb-2 text-muted teamCard-subtitle">Student Level: '+ StudentsTwo[i].$studentLevel; 
 
     fourthResponse += '</h6>'; 
 
     fourthResponse += '</li>'; 
 
    } 
 
    //append the student roster to the ul 
 
    $('#rosterDrag').append(fourthResponse); 
 
    //jquery ui to sort students into teams 
 
    $(function() { 
 
    //making the individual team ul's sortable and connected to each other 
 
    $(".teamDrops").sortable({ 
 
     connectWith: ".connected" 
 
    }).disableSelection(); 
 
\t \t //making the student roster ul sortable and connected to the others 
 
    $("#rosterDrag").sortable({ 
 
     connectWith: ".connected" 
 
    }).disableSelection(); 
 
    }); 
 
    //get number of teams info from first response 
 
    let reminder = $('.responseText').text(); 
 
    //set reminder text to last page 
 
    $('#reminderTeams').text(reminder); 
 
    //show the print button 
 
    $('#printbtn').show(); 
 
} 
 
//print the page 
 
function pdfPrint() { 
 
    //hide unwanted elements from the printed page 
 
    $('#printbtn').hide(); 
 
    $('#rosterDrag').hide(); 
 
    $('#makeTeams').hide(); 
 
    //print the window 
 
    window.print(); 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-color: lightgrey; 
 
} 
 

 
#opArrows { 
 
    width: 10rem; 
 
    height: auto; 
 
} 
 

 
.opbtn { 
 
    color: #fff; 
 
    background-color: #434343; 
 
    border-color: #434343; 
 
} 
 

 
.opbtn:hover { 
 
    color: #fff; 
 
    background-color: #f5822d; 
 
    border-color: #f5822d; 
 
} 
 

 
.opbtn:disabled { 
 
    color: #fff; 
 
    background-color: #8c8c8c; 
 
    border-color: #8c8c8c; 
 
} 
 

 
#title { 
 
    background-color: #0a6c8e; 
 
    color: black; 
 
} 
 

 
h4 span { 
 
    color: #c4da59; 
 
} 
 

 
#numberOverall { 
 
    color: #fff; 
 
    display: none; 
 
} 
 

 
#studentNumberResponse { 
 
    padding-top: 2rem; 
 
    font-size: 1.5rem; 
 
    color: #8c8c8c; 
 
} 
 

 
#listResponse p:nth-child(odd) { 
 
    background-color: lightgrey; 
 
} 
 

 
.studentRosterList { 
 
    width: 25%; 
 
    padding-left: 0.5rem; 
 
} 
 

 
.lightText { 
 
    color: #8c8c8c; 
 
} 
 

 
.form-group { 
 
    width: 50%; 
 
} 
 

 
.teamDrops, #rosterDrag { 
 
    border: 1px solid #eee; 
 
    width: 75%; 
 
    min-height: 5rem; 
 
    list-style-type: none; 
 
    margin: 1rem; 
 
    padding: 1rem 0rem; 
 
} 
 

 
.teamDrops h4, #rosterDrag h4 { 
 
    margin-bottom: 1.5rem; 
 
    padding-left: 1rem; 
 
} 
 

 
.draggable { 
 
    margin: 0 5px 5px 5px; 
 
    padding: 5px; 
 
    font-size: 1.2rem; 
 
    width: 20rem; 
 
    display: inline-block; 
 
} 
 

 
#reminderTeams { 
 
    font-weight: bold; 
 
} 
 

 
#printbtn { 
 
    margin: 2rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE HTML> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>OnPoint Team Generator</title> 
 
    <meta name="description" content="OnPoint Team Generator"> 
 
    <meta name="author" content="MeganRoberts"> 
 
    <script src="scripts/jquery-3.2.1.min.js"></script> 
 
    <script src="scripts/jquery-ui.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="styles/main.css" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <div class="card printMe" id="top"> 
 
    <h3 id="title" class="card-header" style="text-align: center;"><a href="https://www.onpointclassroom.com"><img src="https://lh6.googleusercontent.com/N8Syzsw2aCV_qrh4pKOFgdamHSgD6gDQvGeKayDJBVfHBK2TMeQ3PnlpJ5BHD5ZVXk7YE4toSpav1co=w1920-h950-rw" alt="OnPoint Arrows" id="opArrows"></a> Team Generator</h3> 
 
    <div id="stepOne" class="card-block hideMe"> 
 
     <h4 class="card-title"><span>Step 1:</span> Number of Teams</h4> 
 
     <p class="card-text lightText">How many students do you have in your class?</p> 
 
     <form id="teamForm"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students" data-toggle="tooltip" data-placement="top" title="Please enter a number larger than 7."> 
 
     </div> 
 
     <button type="submit" class="btn btn-primary opbtn" id="submitTeams" disabled>Submit</button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
    <div class="card hideMe"> 
 
    <div class="card-block" id="studentNumberResponse"> 
 
    </div> 
 
    </div> 
 
    <div id="secondsStep" class="card hideMe"> 
 
    </div> 
 
    <div id="listResponse" class="card hideMe listResponse"> 
 
    <div class="card-block" id="studentListResponse"> 
 
    </div> 
 
    </div> 
 
    <footer> 
 
    <div> 
 
     <button type="submit" id="printbtn" class="btn btn-primary btn-lg clearfix opbtn" onclick="pdfPrint()">Print</button> 
 
    </div> 
 
    </footer> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> 
 
    <script src="scripts/app.js"></script> 
 
</body> 
 
</html>