拖放项目被放置后打印

Question

我需要最后一页（经过并提交所有内容）打印与学生名字拖入队框，但无论我尝试与显示/浮动/位置属性，学生卡在打印页面时不会显示。

我的代码使用Interact.io中的interact_min.js以及codepen项目中的代码。

Codepen Project Link

下面是最终页面的截图时，学生分配到团队。我需要为教师打印这样的页面。 （班级大小不同，所以它必须适用于> = 8名学生，这将是#ofTeams> = 2）

我已经尝试了来自各个站点的不少“修复”，但没有一个正在为我工​​作。任何帮助表示赞赏。我对编码比较陌生，所以请详细解释。

这是什么样子的，当我尝试打印。 在这里，我已将比例更改为30％，并且您可以看到7/8张学生卡片。

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

我不得不大修我的代码一点得到它打印。我改变了拖放到jQuery UI排序。

Codepen Project

需要jQuery UI的全面功能，所以检查出codepen链接 - >下面是 “最后的” 代码

$('#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>