All posts by afia

HTML CSS JS Responsive Dreamweaver Website



<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="keywords" content="Painting, Paint, Windsor, Lasalle, Tecumseh, Lakeshore, Rainbow">
<meta name="description" content="Rainbow Painting has been servicing Windsor, Lasalle, Tecumseh,and Lakeshore for almost 20 years. Our reputation for quality, and affordability is synonymous with our name. Choose Rainbow Inc.">
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/customFluid.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="js/mobileMenu.js"></script>
</head>
<body>
<script>
  $.backstretch([
    "img/bg1.jpg",
    "img/bg2.jpg",
	"img/bg03.jpg",
	"img/bg3.jpg",
	"img/bg4.jpg",
	"img/bg5.jpg",
	"img/bg6.jpg",
    "img/bg7.jpg"    
  ], {duration: 8000, fade: 600});    

</script>
<div class="gridContainer clearfix">
  <div id="header" class="fluid Header shadow"><a id="toggleNav" class="navicon mtoggle"></a><a href="index.html" title="Rainbow Painting Inc"><img src="img/Logo-Rainbow.png" alt="Rinbow Painting Windsor Essex County" /></a></div>
  <div class="fluid HeaderSlogan"><div class="shadow"><h3>Residential Commercial Industrial Painting</h3></div></div>
  <div id="menu" class="fluid Menu">
    <div id="menuItems" class="fluid"> 
    <a href="index.html">
      <h3>Home</h3>
      </a> 
      <a href="painting.html">
      <h3>Painting & Renovation</h3>
      </a> 
      <a href="woodFinishing.html">
      <h3>Wood Finishing</h3>
      </a> 
      <a href="windowsDoors.html">
      <h3>Windows and Doors</h3>
      </a> 
      <a href="team.html">
      <h3>The Team</h3>
      </a> 
      <a href="contact.php">
      <h3>Contact</h3>
      </a> 
      <a href="about.html">
      <h3>About</h3>
      </a> </div>
  </div>
  <div id="body" class="fluid Body">
    <div class="heading">
      <h3>Painting and finishing creates the look and feel that represents your lifestyle. Be comfortable in your space.</h3>      
    </div>
    <div class="column"><img src="img/brush.png" alt="Paint"/><br />
      Choose the right painting and renovation team. Rainbow Painting has been providing quality affordable work for over 20 years in Windsor, Lasalle, Tecumseh, and Lakeshore.<br />
    </div>
    <div class="column"><img src="img/eco.png" alt="Eco Painting"/><br />
      Choose the right paint. Newborns, allergies, sensitivities, and budget can be one of many criteria. Our qualified paint experts will give you the details.<br />
    </div>
    <div class="column"><img src="img/map.png" alt="Windsor Lasalle Tecumseh Lakeshore"/><br />
      Rainbow Painting services most of Essex County. Contact us for a free estimate.<br />
    </div>
  </div>
  <div id="footer" class="fluid shadow"><span>© 2003-2013 Rainbow Painting. All rights reserved.</span></div>
</div>
</body>
</html>

@charset "utf-8";
/* Simple fluid media   
*/
body, html {
	height: 100%;
}
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width: 100%;
}
a:link {
	color: #000;
	text-decoration: none;
}      /* unvisited link */
a:visited {
	color: #000;
	text-decoration: none;
}  /* visited link */
a:hover {
	color: #390;
	text-decoration: underline;
}  /* mouse over link */
a:active {
	color: #000;
	text-decoration: none;
}  /* selected link */
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	16;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 

http://www.alistapart.com/articles/responsive-web-design

	and Golden Grid System by Joni Korpi

http://goldengridsystem.com/

*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}
.fluidList {
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
div.shadow {
	-moz-box-shadow: 3px 3px 4px #444;
	-webkit-box-shadow: 3px 3px 4px #444;
	box-shadow: 3px 3px 4px #444;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
}
/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	padding-left: 2.5%;
	padding-right: 2.5%;
	clear: none;
	float: none;
}
#header {
	background: rgb(255,255,255);
	background-image:url(/img/handmadepaper.png);
}
#header img {
	padding: 2%;
	max-width: 90%;
	max-height: 88%;
}
#menu {
	
}
#menuItems {
	margin: 0px 3%;
	width: 94%;
	background: rgb(255,255,255);
	background: rgba(255,255,255, 0.7);
	text-align: center;
	min-height:100%;
	
	
}
#body {
	background: rgb(255,255,255);
	background: rgba(255,255,255, 0.7);	
}
.Header {
	text-align: center;
	width: 100%;
	margin-left: 0;
}
.HeaderSlogan {
	display:none;
}
.Menu {
	width: 100%;
	margin-left: 0;
}
.Body {
	width: 100%;
	clear: both;
	margin-left: 0;
}
#footer {
	background-color: white;
	background-image:url(/img/handmadepaper.png);
	vertical-align: middle;
	text-align: center;
	color: darkgrey;
}

.navicon {
right: 10px;
position: absolute;
height: 4px;
width: 34px;
margin: 5px;
border-top: 14px double darkgrey;
border-bottom: 6px solid darkgrey;
font-size: 0;
}

.heading{
text-align:center;
}

.imageCenter{
max-width: 400px;
margin: 10px auto;
}
.column {
	display:block;
	clear:both;
}
.column img{
	float:left;
	display: block;
	padding: 0px 15px;
}
.indentP
{
padding: 0px 15px;
text-indent:15px;
font-weight:bold;
font-size:80%;

}
.zeroMargin_mobile
{
margin-left: 0;
}
.hide_mobile
{
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 92.625%;
	height: 93%;
	padding-top: 2%;
	padding-left: 1.1875%;
	padding-right: 1.1875%;
	clear: none;
	float: none;
	margin-left: auto;
}
#header {
}
#menu {
	overflow: auto;
}
#body {	
overflow: auto;
}
#footer {
	height: 5%;
	width: 100%;
}
.Header {
	height: 20%;
	width: 39.8974%;
	margin-left: 0;
}
.HeaderSlogan {
	text-align:center;
	display:block;
	height: 20%;
	margin-left: 5.5641%;
	clear: none;
	width: 54.5384%;
}
.HeaderSlogan h3{
	background-color:#FFF;
	background-image:url(/img/handmadepaper.png);
}
.Menu {
	width: 39.8974%;
	margin-left: 0;
	height: 70%;
	
}
.Body {
	margin-left: 5.5641%;
	clear: none;
	width: 54.5384%;
	height: 70%;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 96%;
	max-width: 1232px;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#header {
	
}
#menu {
	
}
#menuItems {
	margin: 0px 3%;
	width: 94%;
}
#body {
	
}
.Header {
	padding-left: 2%;
	padding-right: 2%;
	width: 30.3797%;
	margin-left: 6.3291%;
}
.HeaderSlogan {	
	clear: none;
	margin-left: 4.2658%;
	width: 54.6962%;
}
.Menu {
	width: 34.3797%;
	margin-left: 6.3291%;
}
.Body {
	clear: none;
	margin-left: 4.2658%;
	width: 54.6962%;
}
#footer {
	height: 5%;
	min-height:20px;
}

.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}

PHP WordPress Template During Testing


<?php
/*
Template Name: Web App
*/
get_header();?>

<link href="/wp-content/themes/twentyfourteen-child/webapp-style.css" type="text/css" rel="stylesheet" />
<link href="/wp-content/themes/twentyfourteen-child/fluid.css" rel="stylesheet" type="text/css" />
<script src="/wp-content/themes/twentyfourteen-child/respond.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css" />
<style type="text/css">/*<![CDATA[*/  a.c1 {display: inline;}  /*]]>*/ </style>


<br />
  <div class="gridContainer clearfix statusText" style="margin-top:60px; margin-bottom:280px;">
    <div class="fluid left">
      <div class="fluid one centerIcon greenBackground">1</div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/app.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/video.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/cards.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/quiz.png" alt="" /></div>
      
      <br />
<?php
$args = array( 'post_type' => 'Classes', 'orderby' => 'title', 'order' => 'asc' );
$loop = new WP_Query( $args );
$current_user = wp_get_current_user();
$completeApp = get_user_meta( $current_user->ID, 'app', true );
$completeVideo = get_user_meta( $current_user->ID, 'video', true );
$completeCards = get_user_meta( $current_user->ID, 'cards', true );
$completeQuiz = get_user_meta( $current_user->ID, 'quiz', true );
while ( $loop->have_posts() ) : $loop->the_post();
	echo '<div class="fluid one centerIcon greyBackground">', the_title(),  '</div>';
	if ( in_array( get_the_ID(), $completeApp ) ) {
	    echo '<div class="fluid five centerIcon"><a href="' , get_permalink(), '?classtype=app"><img src="/wp-content/themes/twentyfourteen-child/check.png" alt="" /></a></div>';
	} else {
	    echo '<div class="fluid five centerIcon"><a href="' , get_permalink(), '?classtype=app"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></a></div>';
	};
	if ( in_array( get_the_ID(), $completeVideo ) ) {
	    echo '<div class="fluid five centerIcon"><a href="' , get_permalink(), '?classtype=video"><img src="/wp-content/themes/twentyfourteen-child/check.png" alt="" /></a></div>';
	} else {
	    echo '<div class="fluid five centerIcon"><a href="' , get_permalink(), '?classtype=video"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></a></div>';
	};
	if ( in_array( get_the_ID(), $completeCards ) ) {
	    echo '<div class="fluid five centerIcon"><a href="' , get_permalink(), '?classtype=cards"><img src="/wp-content/themes/twentyfourteen-child/check.png" alt="" /></a></div>';
	} else {
	    echo '<div class="fluid five centerIcon"><a href="' , get_permalink(), '?classtype=cards"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></a></div>';
	};
	if ( in_array( get_the_ID(), $completeQuiz ) ) {
	    echo '<div class="fluid five centerIcon"><a href="' , get_permalink(), '?classtype=quiz"><img src="/wp-content/themes/twentyfourteen-child/check.png" alt="" /></a></div><br />';
	} else {
	    echo '<div class="fluid five centerIcon"><a href="' , get_permalink(), '?classtype=quiz"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></a></div><br />';
	};
endwhile;
?>

</div>

<div class="fluid right">
      <div class="fluid one centerIcon">.</div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/app.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/video.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/cards.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/quiz.png" alt="" /></div><br />
      <br />

      <div class="fluid one centerIcon blueBackground">
        1
      </div>

      <div class="fluid five centerIcon"><div class="percent">0%</div></div>

      <div class="fluid five centerIcon"><div class="percent">50%</div></div>

      <div class="fluid five centerIcon"><div class="percent">75%</div></div>

      <div class="fluid five centerIcon"><div class="percent">95%</div></div>
      
      <br />
      <br />

      <div class="fluid one centerIcon greenBackground">2</div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></div>
      
      <br />
      <br />

      <div class="fluid one centerIcon orangeBackground">3</div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></div>

      <div class="fluid five centerIcon"><img src="/wp-content/themes/twentyfourteen-child/play.png" alt="" /></div>
    </div>
</div>
  
 

<?php 

echo '--------------------------------------------<br />';
$args2 = array('child_of' => 10);
$categories = get_categories( $args2 );
foreach($categories as $category) { 
    $amtPosts = 0;
    $idPosts = Array();
    
    $args3 = array( 'post_type' => 'Classes', 'orderby' => 'title', 'order' => 'asc', 'cat' => $category->term_id );
    $loop2 = new WP_Query( $args3 );
    
    while ( $loop2->have_posts() ) : $loop2->the_post();
	    //echo '<div>', the_title(),  '</div>';
	    array_push($idPosts, get_the_ID());
	    $amtPosts++;
    endwhile;
    
    echo '<p> in Level'. $category->description . '<br />';
    echo 'ther are Total Posts: '. $amtPosts;
    echo '<br />';
    echo 'the post are '.var_dump($idPosts).'<br /><br />';
    
    foreach ($idPosts as $IDP){
        echo 'the post '.$IDP.'<br />';
        echo 'app is set to '. get_post_meta($IDP,'app', true) .'<br />';
    }
    echo var_dump($completeApp).'<br />';
    echo var_dump($completeVideo).'<br />';
    echo var_dump($completeCards).'<br />';
    echo var_dump($completeQuiz).'<br />';
}

get_footer(); ?>

PHP WordPress Plugin


<?php
/*
Plugin Name: Web App
Plugin URI: http://www.learnenglishcloud.com
Description: Create lessons 
Version: 1.0
Author: Ernest Smuga
*/

add_action( 'init', 'create_webapp' );


function create_webapp() {
    register_post_type( 'Classes',
        array(
            'labels' => array(
                'name' => 'Web App Creator',
                'singular_name' => 'Web App Creator',
                'add_new' => 'Add New',
                'add_new_item' => 'Add New Class',
                'edit' => 'Edit',
                'edit_item' => 'Edit Class *2 update',
                'new_item' => 'New Web App Creator',
                'view' => 'View',
                'view_item' => 'View Class',
                'search_items' => 'Search Classes',
                'not_found' => 'No Classes found',
                'not_found_in_trash' => 'No Classes found in Trash',
                'parent' => 'Parent Label web-app.php'
            ),
 
            'public' => true,
            'menu_position' => 15,
            'supports' => array( 'title'),
            'taxonomies' => array( 'category' ),
            /*'menu_icon' => plugins_url( 'images/image.png', __FILE__ ),*/
            /*'has_archive' => true*/
        )
    );
}


add_action( 'admin_init', 'my_admin' );

function my_admin() {
    add_meta_box( 'level_word_list_meta_box',
        'Level',
        'level_dynamic_inner_custom_box',
        'Classes', 'normal', 'high'
    );
    
    add_meta_box( 'level_app_types_meta_box',
        'App Types',
        'level_app_types_dynamic_inner_custom_box',
        'Classes', 'normal', 'high'
    );
    add_meta_box( 'word_list_meta_box',
        'Word List',
        'dynamic_inner_custom_box',
        'Classes', 'normal', 'high'
    );
    add_meta_box( 'video_list_meta_box',
        'Video List',
        'video_dynamic_inner_custom_box',
        'Classes', 'normal', 'high'
    );
}


/* Do something with the data entered */
add_action( 'save_post', 'dynamic_save_postdata' );


/* Prints the box content */
function level_dynamic_inner_custom_box() {
    global $post;
    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'dynamicMeta_noncename' );
    ?>
    <div id="meta_inner">
    <?php

    //get the saved meta as an arry
    $level = get_post_meta($post->ID,'level',true);

    if ( isset( $level )) {
            	printf( '<input type="text" name="level" value="%1$s" />', $level );    
            } else {
            	printf('<input type="text" name="level" value="" />');
            }        
    ?>
    </div>
    <?php          
}

/* Prints the box content */
function level_app_types_dynamic_inner_custom_box() {
    global $post;
    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'dynamicMeta_noncename' );
    ?>
    <div id="meta_inner">
    <?php

    //get the saved meta as an arry
    $app = get_post_meta($post->ID,'app',true);
    $video = get_post_meta($post->ID,'video',true);
    $cards = get_post_meta($post->ID,'cards',true);
    $quiz = get_post_meta($post->ID,'quiz',true);

    
            	printf( 'app: <input id="app" type="checkbox" name="app"  value="%1$s"/>', $app);
            	printf( 'video: <input id="video" type="checkbox" name="video" value="%1$s"/>', $video );
            	printf( 'cards: <input id="cards" type="checkbox" name="cards" value="%1$s"/>', $cards );
            	printf( 'quiz: <input id="quiz" type="checkbox" name="quiz" value="%1$s"/>', $quiz );
            	
    ?>
    </div>
    <?php          
}

/* Prints the box content */
function dynamic_inner_custom_box() {
    global $post;
    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'dynamicMeta_noncename' );
    ?>
    <div id="meta_inner">
    <?php

    //get the saved meta as an arry
    $class = get_post_meta($post->ID,'class',true);

    $c = 0;
    if(is_array($class)) {
        foreach( $class as $word ) {
            if ( isset( $word['text'] ) || isset( $word['image'] ) || isset( $word['sound'] ) ) {
                printf( '<p>text: <input type="text" name="class[%1$s][text]" value="%2$s" /> image: <input type="text" name="class[%1$s][image]" value="%3$s" /><br /> sound: <input type="text" name="class[%1$s][sound]" value="%4$s" /><span class="remove">%5$s</span></p><br />', $c, $word['text'], $word['image'], $word['sound'],__( 'Remove word' ) );
                $c = $c +1;
                
            }
        }
    }

    ?>
    
<span id="here"></span>
<span class="add"><?php _e('Add words'); ?></span>
<script>
    var $ =jQuery.noConflict();
    $(document).ready(function() {
    
         $( "input[type=checkbox]" ).on( "click", function() {
            if($(this).is(":checked")){
                $( this ).val( "true" );
            }else{
                $( this ).val( "false" );
            }
         } );
         
        if ($('#app').val() == 'true'){$('#app').prop('checked', true);}
        if ($('#video').val() == 'true'){$('#video').prop('checked', true);}
        if ($('#cards').val() == 'true'){$('#cards').prop('checked', true);}
        if ($('#quiz').val() == 'true'){$('#quiz').prop('checked', true);}
        
        var count = <?php echo $c; ?>;
        
        $(".add").click(function() {            
            $('#here').append('<p>text: <input 	type="text" name="class['+count+'][text]" value="" /> image: <input type="text" name="class['+count+'][image]" value="" /> <br />sound: <input type="text" name="class['+count+'][sound]" value="" /><span class="remove">Remove word</span></p><br />' );
            count = count + 1;             
            return false;
        });
        $(".remove").live('click', function() {
            $(this).parent().remove();  
                    
        });
        
    });
    </script>
</div><?php

}

function video_dynamic_inner_custom_box() {
    global $post;
    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'dynamicMeta_noncename' );
    ?>
    <div id="meta_inner">
    <?php

    //get the saved meta as an arry
    $video = get_post_meta($post->ID,'video',true);

    $c = 0;
    if(is_array($video)) {
        foreach( $video as $word ) {
            if ( isset( $word['text'] ) ) {
                printf( '<p>video: <input type="text" name="video[%1$s][text]" value="%2$s" /><span class="remove_video">%3$s</span></p><br />', $c, $word['text'], __( 'Remove word' ) );
                $c = $c +1;
            }
        }
    }

    ?>
<span id="video"></span>
<span class="add_video"><?php _e('Add words'); ?></span>
<script>
    var $ =jQuery.noConflict();
    $(document).ready(function() {
    
        var count = <?php echo $c; ?>;
        $(".add_video").click(function() {
            count = count + 1;

            $('#video').append('<p>video: <input type="text" name="video['+count+'][text]" value="" /><span class="remove_video">Remove word</span></p><br />' );
            return false;
        });
        $(".remove_video").live('click', function() {
            $(this).parent().remove();
        });
    });
    </script>
</div><?php

}

/* When the post is saved, saves our custom data */
function dynamic_save_postdata( $post_id ) {
    // verify if this is an auto save routine. 
    // If it is our form has not been submitted, so we dont want to do anything
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
        return;

    // verify this came from the our screen and with proper authorization,
    // because save_post can be triggered at other times
    if ( !isset( $_POST['dynamicMeta_noncename'] ) )
        return;

    if ( !wp_verify_nonce( $_POST['dynamicMeta_noncename'], plugin_basename( __FILE__ ) ) )
        return;

    // OK, we're authenticated: we need to find and save the data
    
    $app= $_POST['app'];
    update_post_meta($post_id,'app',$app);
    $video= $_POST['video'];
    update_post_meta($post_id,'video',$video);
    $cards= $_POST['cards'];
    update_post_meta($post_id,'cards',$cards);
    $quiz= $_POST['quiz'];
    update_post_meta($post_id,'quiz',$quiz);
    
    $class = $_POST['class'];

    update_post_meta($post_id,'class',$class);
    
    $video = $_POST['video'];

    update_post_meta($post_id,'video',$video);
    
    $level = $_POST['level'];

    update_post_meta($post_id,'level',$level);
}
?>

jQuery Code Sample


(function($) {

	///////////////////////////////////////
	// INIT
	///////////////////////////////////////
	
	//*-----Get Data from single-classes.php in theme folder twentyfourteen-child folder-----*//
	
	var classData = pw_script_vars.data; //array of img snd text combinations from Web App plugin stored in SQL
	classData = JSON.parse(classData); //parse array to be readable by js
	var appType = pw_script_vars.activity; //text to identify activity type(app,video,flash cards, or quiz)
	var ajaxurl = pw_script_vars.ajaxurl; //url to admin-ajax
	var userID = pw_script_vars.userid; //text to identify user
	var classID = pw_script_vars.classid; //text to identify user
	var startS = 0;
	var complete = 0;
	//*-----start to build the page-----*//
	
	var htmlStructure = '\
    <div class="gridContainerApp clearfix statusText">\
        <div class="fluid leftApp">\
            <div id="object1">\
                <div class="objectImage" >\
                    <img >\
                    <div class="objectImageList">\
                        <ul id="object1List">\
                            <li></li><li></li><li></li><li></li>\
                        </ul>\
                    </div>\
                </div>\
                <input class="input" type="text">\
            </div>\
        </div>\
        <div class="fluid rightApp">\
            <div id="object2">\
                <div class="objectImage" >\
                    <img>\
                    <div class="objectImageList">\
                        <ul id="object2List">\
                            <li></li><li></li><li></li><li></li>\
                        </ul>\
                    </div>\
                </div>\
                <input class="input" type="text">\
            </div>\
        </div>\
    </div><br clear="all" />\
    <div class="gridContainerApp clearfix statusText">\
        <div class="fluid leftApp">\
            <div id="object3">\
                <div class="objectImage" >\
                    <img>\
                    <div class="objectImageList">\
                        <ul id="object3List">\
                            <li></li><li></li><li></li><li></li>\
                        </ul>\
                    </div>\
                </div>\
                <input class="input" type="text">\
            </div>\
        </div>\
        <div class="fluid rightApp">\
            <div id="object4">\
                <div class="objectImage" >\
                    <img>\
                    <div class="objectImageList">\
                        <ul id="object4List">\
                            <li></li><li></li><li></li><li></li>\
                        </ul>\
                    </div>\
                </div>\
                <input class="input" type="text">\
            </div>\
        </div>\
    </div><br clear="all" /><a href="#" id="next">next</a>';
	
	startApp(); 
	
	
	///////////////////////////////////////
	// FUNCTIONS
	///////////////////////////////////////
	
	//*-----UTILITY FUNCTIONS-----*//
	
	///SHUFFLE ARRAY	
	function shuffleArray(array) {
            for (var i = array.length-1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
            return array;
	}
	///Add Source to Audio Element
	function addSource(elem, path, type) {
        path = 'https://learnenglishcloud.com/wp-content/plugins/Web-App/assets/snd/'+ path;
        $('<source>').attr({src:path, type:type}).appendTo(elem);
    }
    ///Add Source to Audio Element
	function addImageSource(path) {
        path = 'https://learnenglishcloud.com/wp-content/plugins/Web-App/assets/img/'+ path;
        return path;
    }
    ///Audio ShortCode
	function appAudio(object,elem){
        //Set-up Audio
        var audio = $('<audio>', {id : object.text.replace(/\.| /g,'')},'</audio>');
        var source = addSource(audio, object.sound, 'audio/mpeg');		
        audio.text(source);
		//addSource(audio, 'audioFile.ogg','audio/ogg');
        //addSource(audio, 'audioFile.mp3', 'audio/mpeg');
        audio.appendTo($('#object'+elem));
	}
	
	//*----- APP-----*//
	
	///Initialize the App building process
	function startApp(){		
		classData = shuffleArray(classData); //class data is shuffled and ready for use	
		runApp(classData,startS); //create html structure and attach ALL events/data to elements	
	}
	///Run App Data
	function runApp(data,start){
        //complete = 1;	//testing only, skips class and runs user meta update 
        if (complete == 1){
            var callVars = {
                'action' : 'class_complete',
                'class' : classID,
                'type' : appType,
                'id' : userID
            };	
            // AJAX call to function.php file via admin-ajax.php
            jQuery.post(ajaxurl, callVars, function(response) {
                alert('Got this from the server: ' + response);
            });
            alert('GREAT JOB :)');
            window.location.href = "https://learnenglishcloud.com/learn-english/";		
        }else{
            //Create Basic HTML structure
            $('#activity').html(htmlStructure);
            var objNum = 1;
            var object1;		
            var object2;
            var object3;
            var object4;
            var objectCurrent = [];
            for (i = 0; i < 4; i++) {
                if (data[start] === undefined){
                    console.log('NO WHERE TO GO');
                    start = Math.floor(Math.random() * 10) + 1;			
                    objectCurrent.push(data[start]);
                    console.log(i+' / '+start);	
                    console.log(data[start]);
                    complete = 1;	
                }else{
                    objectCurrent.push(data[start]);
                }
                start++;
            }
            startS = start;	
            console.log(startS);
            $.each( data, function( key, value ) {
                switch(objNum) {
                    case 1: object1 = value; break;
                    case 2: object2 = value; break;
                    case 3: object3 = value; break;
                    case 4: object4 = value; break;
                }
                objNum++;				
            });
            //Adding All List Items
            var nthArrShuffle = shuffleArray([1,2,3,4]);		
            $('#object1List>li:nth-child('+nthArrShuffle[0]+')').append('<a href="#">'+objectCurrent[0].text+'</a>');
            $('#object1List>li:nth-child('+nthArrShuffle[1]+')').append('<a href="#">'+objectCurrent[1].text+'</a>');
            $('#object1List>li:nth-child('+nthArrShuffle[2]+')').append('<a href="#">'+objectCurrent[2].text+'</a>');
            $('#object1List>li:nth-child('+nthArrShuffle[3]+')').append('<a href="#">'+objectCurrent[3].text+'</a>');
            $('#object2List>li:nth-child('+nthArrShuffle[0]+')').append('<a href="#">'+objectCurrent[0].text+'</a>');
            $('#object2List>li:nth-child('+nthArrShuffle[1]+')').append('<a href="#">'+objectCurrent[1].text+'</a>');
            $('#object2List>li:nth-child('+nthArrShuffle[2]+')').append('<a href="#">'+objectCurrent[2].text+'</a>');
            $('#object2List>li:nth-child('+nthArrShuffle[3]+')').append('<a href="#">'+objectCurrent[3].text+'</a>');
            $('#object3List>li:nth-child('+nthArrShuffle[0]+')').append('<a href="#">'+objectCurrent[0].text+'</a>');
            $('#object3List>li:nth-child('+nthArrShuffle[1]+')').append('<a href="#">'+objectCurrent[1].text+'</a>');
            $('#object3List>li:nth-child('+nthArrShuffle[2]+')').append('<a href="#">'+objectCurrent[2].text+'</a>');
            $('#object3List>li:nth-child('+nthArrShuffle[3]+')').append('<a href="#">'+objectCurrent[3].text+'</a>');
            $('#object4List>li:nth-child('+nthArrShuffle[0]+')').append('<a href="#">'+objectCurrent[0].text+'</a>');
            $('#object4List>li:nth-child('+nthArrShuffle[1]+')').append('<a href="#">'+objectCurrent[1].text+'</a>');
            $('#object4List>li:nth-child('+nthArrShuffle[2]+')').append('<a href="#">'+objectCurrent[2].text+'</a>');
            $('#object4List>li:nth-child('+nthArrShuffle[3]+')').append('<a href="#">'+objectCurrent[3].text+'</a>');
            //Adding Images to Object Containers
            $('#object1>.objectImage>img').attr('src', addImageSource(objectCurrent[0].image));
            $('#object2>.objectImage>img').attr('src', addImageSource(objectCurrent[1].image));
            $('#object3>.objectImage>img').attr('src', addImageSource(objectCurrent[2].image));
            $('#object4>.objectImage>img').attr('src', addImageSource(objectCurrent[3].image));
            //Adding Names to Object Containers
            $('#object1>input').attr('name', objectCurrent[0].text);
            $('#object2>input').attr('name', objectCurrent[1].text);
            $('#object3>input').attr('name', objectCurrent[2].text);
            $('#object4>input').attr('name', objectCurrent[3].text);
            //Adding Sound to Object Containers
            appAudio(objectCurrent[0],1);
            appAudio(objectCurrent[1],2);
            appAudio(objectCurrent[2],3);
            appAudio(objectCurrent[3],4);
        }
	}
	///Hide all word lists in App
	$('.objectImageList').hide();
	///Event: click input will toggle word list
	$('body').on( 'click', 'input', function () {
		$('input').prev().children('.objectImageList').hide('fast');
		$(this).prev().children('.objectImageList').animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
	});
	///Event: Input keyup check in object name matches user input	
	$('body').on( 'keyup', '.input', function() {
        if ( $(this).attr('name') == $(this).val() ){
            $(this).css('background-color','rgb(144, 238, 144)');
            $('#'+$(this).attr('name').replace(/\.| /g,'')).get(0).play();
        }else{
            $(this).css('background-color','rgb(255, 255, 255)');
        }
	});
	///Event: click a word in the word list and play corresponding sound	
	$('body').on('click', '.objectImageList>ul>li', function () {
		$('#'+$(this).text().replace(/\.| /g,'')).get(0).play();//test
		return false;
	});
	///Event: click next and check if all answers are right, if so move to next sequence
	$('body').on('click', '#next', function () {	
        var empty = 0;
        $(".gridContainerApp").find(".input").filter(function() {
            if ($(this).css('background-color') == 'rgb(255, 255, 255)' || $(this).css('background-color') == 'rgb(255, 95, 95)'){
                empty ++;
            } else {
                empty --;
            }
        });
        console.log(empty);
        if(empty == -4) {
            console.log('launching new startS'+startS);
            $('#activity').empty();
            runApp(classData,startS);
            $('.objectImageList').hide();
        } else {
            $(".gridContainerApp").find(".input").filter(function() {
                if ($(this).css('background-color')=='rgb(255, 255, 255)'){
                    $(this).css('background-color', 'rgb(255, 95, 95)');
                }
            });        
        }       
        return false;
    });


})(jQuery);