Assignment 5 a “piggy-­‐house” application Solution

Design  a    “piggy-­‐house”    application    in    bootstrap/html5/etc.        It    should    look    like:    

    

1.    This  is    a    dynamic    webpage.       Initially,    the    page    looks    like    Picture    A.    When    a    user    clicks    a    button    for    the    first    time,    the    house    (see    Picture    B)    will    appear.    When    the    user    clicks    the    button,    the    colors    of    the    house    reverse    (although    the    door    stays    black).       If    you    cannot    see    a    color    copy,    the    

two  colors    are    alterating    red    and    blue,    where    the    house    starts    with    the    leftmost    rectangle    being    

blue.           

2.     Every  third    click,    there    should    be    an    alert    saying    the    house    is    still    standing    (“the    house    survived    

3    blows”    in    Picture    D)    and    the    canvas    border    should    change    permanently    to    red    with    a    width    of    

20    from    black    with    a    width    of    2.       (Those    who    do    not    understand    the    allusion    are    directed    at    the    

nursery  tale,    the    three    little    pigs.)            

3.       You    should    use    the    html5    canvas    with    its    drawing    API    calls    for    the    graphics,    and    bootstrap    for    the    button.       I    would    advise    using    the    “width”    and    “height”    attributes    in    the    canvas    tag    to    set    the    dimensions    (300x300).    You    need    not    be    absolutely    precise    in    the    drawing's    dimensions    although    the    general    shape    should    be    the    same    and    any    polygons    should    fit    together    (ie    there    should    be    no    gaps).          The    title    should    be    an    h3.            

4.     The  initial    colors    and    border    properties    must    be    done    in    a    separate    css    file.    

5.     Include  your    javascript    code    in    the    .html    file.      

6.     You    must    hand-­‐code    this    assignment    using    only    Bootstrap    3.3,    html5,    javascript,    and    (optionally)    

jQuery.        You    must    use    the    default    theme    in    Bootstrap.    

7.     You    are    responsible    for    monitoring    the    Canvas    forum    site    for    any    modifications    or    corrections    of    

this  assignment    (or    any    assignment).    

8.     You    must    submit    everything    (the    piggy-­‐house.html    and    piggy-­‐house.css    files    in    this    case)    in    a    .zip    file.       The    name    of    your    zip    file    (and    your    directory    should    be    “piggy-­‐house-­‐YourName”,    where    YourName    is,    as    you    might    guess,    your    name.       Failure    to    upload    the    appropriate    files    will    be    a    severe    penalty;    failure    to    put    it    in    a    .zip    file    or    name    the    directory    will    be    a    more    minor,    but    substantial,    penalty.       We    will    grade    you    in    full-­‐screen    for    the    size    of    the    browser.    

9.     There  will    be    a    maximum    of    1.5    late    days    (ie,    final    deadline    of    Tuesday    noon),    because    we    want    

to  be    able    to    discuss    the    homework    in    class    and    in    sections.        In    any    case,    don’t    be    late    on    this    –    it’s    

too  simple.    

    

This  is    due    Sunday    10/18    at    11:55pm.       You    must    upload    your    code    to    Canvas    to    submit.    

    

We  will    grade    this    assignment    stand-­‐alone.       That    is,    we    will    open    your    html    in    Chrome    or    Firefox    as    a    

local    file.        To    avoid    using    Bootstrap    in    a    relative    location,    use:    

    

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css    

    

and      

    

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-­‐theme.min.css    

    

In  case    you    use    jQuery,    use    :        

    

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js