Object Literal on jQuery

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="Demo-Card">
    <header>
        <h3><span class="problem-number">11</span> <span class="problem-equation">Problem</span></h3> 
    </header>
    <!--<button id="Run">Run Demo</button>-->
    <div class="iframe-container">
<!--
        <iframe id="Demo-iFrame" src="mathsynthesis/LearningByExample/GUI/web/mathsynth.html">
            <p>Your browswer does not support iFrames</p>
        </iframe>
-->
    </div>
</div>
<div id="Menu">
    <header id="Menu-Header">
        <button id="Menu-Button" type="button" class="btn btn-default btn-lg button-menu" aria-label="Menu"> 
            <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
            <h1>Problems</h1> 
        </button>
    </header>
    <div id="Problem-Panels" class="panel-group" >
        <div class="panel panel-default top-panel">
            <div class="panel-heading" data-toggle="collapse" href="#collapse1">
                <h4 class="panel-title">
                            Cox Subtraction Level 1c
                        </h4> </div>
            <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body nav-center">
                    <ul class="nav nav-pills">
                        <li class="active incorrect"><a href="#Demo-Card">11</a></li>
                        <li class="incorrect"><a href="#Demo-Card">12</a></li>
                        <li class="incorrect"><a href="#Demo-Card">13</a></li>
                        <li class="correct"><a href="#Demo-Card">14</a></li>
                        <li class="correct"><a href="#Demo-Card">15</a></li>
                        <li class="correct"><a href="#Demo-Card">16</a></li>
                   ...

CSS

@import 'http://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';

body{
    padding: 0;
    margin: 0;
    font-family: 'Work Sans', sans-serif;
}

/*DEMO-CARD FORMATTING*/
#Demo-Card {
    width: calc(100vw - 40px);
    height: calc(100vh - 40px - 50px); /*40px for borders, 50px for menu*/
    background-color: white;
    border: 20px solid #86E1D8;
}

#Demo-Card header{
    margin-left: 20px;
    height: 30px;
}

#Demo-Card .problem-number {
    font-weight: 700;
}

#Demo-Card .problem-equation {
    font-weight: 600;
}

#Demo-Card .iframe-container {
  width: 100%;
  height: calc(100% - 50px); /*50px = 20px (headear margin?) + 30px (header height)*/
  display: flex;
  align-items: center;
  justify-content: center;
}

#Demo-iFrame {
    width: 100%;
    height: 100%;
    overflow: scroll;
    
    -ms-transform: scale(0.90);
    -moz-transform: scale(0.90);
    -o-transform: scale(0.90);
    -webkit-transform: scale(0.90);
    transform: scale(0.90);
}

/*MENU FORMATTING*/
#Menu{
    background-color: #F5F5F5;
    width: 100%;
    /*Is this even necessary?*/
    top: calc(100vh - 40px - 50px); /*Height of #Demo-Card*/
    z-index: 1;
    position: absolute;
}

#Menu-Header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#Menu-Header h1 {
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    display: none;
    margin-top: 5px; /*Get h1 Problems to align w/ Menu-Button's icon*/
}

#Menu-Button{
    background-color: transparent;  
    height: 70px; /*Create smooth transition between Menu icon & h1 Problems*/
}
.glyphicon-menu-hamburger{
    font-size: 40px;
}

/*PANELS FORMATTING*/
#Problem-Panels {
    margin-top: 15px;
    margin-bottom: 0px; /*Get rid of boostrap margin-bottom: 20px for panel-group*/
}

.panel-group .panel-heading{ /*Allow draw decorative line under panel title*/
    position: relative;
    z-index : 1;
}

.panel-group...

JavaScript

$(document).ready(function () {
    
    menu.init();
    
    var $lastActivePill = $(".nav-pills").find(".active");
    $(".nav-pills").children("li").click(function () {
        
        //Change color of clicked pill. Revert old clicked pill to unactive state color
        $(this).toggleClass("active");
        $lastActivePill.toggleClass("active");
        $lastActivePill = $(this);
        
        //Animate problem number on #Demo-Card
        var newProblemNumber = $(this).children("a").text();
        $("#Demo-Card").find(".problem-number").animate({
            'opacity': 0
        }, 150, function () {
            $(this).text(newProblemNumber).animate({
                'opacity': 1
            });
        });
        
        lowerMenu();
    });
    
    // Add smooth scrolling when click problem number
    $("a[href='#Demo-Card']").on('click', function (event) {
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();
            // Store hash
            var hash = this.hash;
            // Using jQuery's animate() method to add smooth page scroll
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 400, function () {
                // Add hash (#) to URL when done scrolling (default click behavior)
                window.location.hash = hash;
            });
        } // End if
    });
    
    //Toggle raise/lowering of #Menu
    var menuLowered = true;
    $('#Menu-Button').on('click', function () {
        if (menuLowered) {
            raiseMenu();
            menuLowered = false;
        }
        else {
            lowerMenu();
            menuLowered = true;
        }    
    });
    
    $("#Run").click(function () {
        var oShell...