Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

assignment pull request 3rd time trying #22

Open
wants to merge 3 commits into
base: gh-pages
Choose a base branch
from
Open

assignment pull request 3rd time trying #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
423d91a
assignment pull request 3rd time trying
Oct 31, 2014
a149e4e
Instructional #2
Oct 31, 2014
924c18a
instructional #2 update
Oct 31, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,18 @@

> Make a small tutorial or instructional "thing" that could be understood by someone who doesn't speak English. Use any medium/materials/style you want, *other* than a web page: crayon drawing, [aircraft safety card](https://www.google.com/search?q=aircraft+safety+card&tbm=isch), origami, Lego diorama, [IKEA-style manual](http://www.ikea.com/ms/en_US/customer_service/assembly_instructions.html), etc.

*Describe your project here*
Please see my gif UX animation for "mama knows the best"mobile application.
here <https://reginahjm.files.wordpress.com/2014/10/mama_interaction.gif>
This is a concept design app for guiding people to a healthier food choice.
We built a character, "mama" which allows users to ask and get feedback on their choices.



## Part II

> Take the [first week's](https://github.com/bfl-itp/syllabus/blob/master/schedule.md#sep-4) offline Instructional Thing assignment online. Reimagine it for (and take advantage of) the new medium. For example: if Part I was a stop-frame animation, Part II might be a slideshow where the user can click between the steps.

*Describe your project here – explain the evolution, and what was gained and lost from using this new medium*
I created the tabs and each tab describes the steps, how to use the application.
This process also helped me to understand the application better and how I wanted to design it.
I was more able to explain the process better by diving the steps.

99 changes: 90 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<title>So-and-so's Instructional Assignment</title>
</head>
<body>
YOUR CODE HERE
</body>
</html>
<head>

<title> Mama Knows best!</title>

<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:11px;}


.menu {background-color:#b1a16e;border-bottom:1px solid #d7d7d7; height:23px;width:600px;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#ffffff; text-decoration:none; padding:5px 5px 6px 5px; }
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; color:#000000; background-color:#ffffff; font-weight:bold; position:relative;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4,#anothercontent1,#anothercontent2, #anothercontent3, #anothercontent4,#anothercontent5, #anothercontent6, #contentthree1, #contentthree2, #contentthree3 {border:1px solid #ececec; width:500px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}
</style>


<script type="text/javascript">


//MENU SETTINGS
//Set the id names of your tablinks (without a number at the end)
var tablink_idname = new Array("tablink","anotherlink", "linkthree")
//Set the id names of your tabcontentareas (without a number at the end)
var tabcontent_idname = new Array("tabcontent","anothercontent", "contentthree")
//Set the number of your tabs in each menu
var tabcount = new Array("4","6","3")
//Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load , Menu 3 -> Tab 1 visible on load)
var loadtabs = new Array("2","5","1")
//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
var autochangemenu = 2;
//the speed in seconds when the tabs should change
var changespeed = 2;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 1;
//END MENU SETTINGS



function easytabs(menunr, active)
{if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;} menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];

function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}
function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}

window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}


</script>
</head>


<body>
<h1>How to use 'Mama knows best' mobile app</h1>



<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('2', '1');" onfocus="easytabs('2', '1');" onclick="return false;" title="" id="anotherlink1">1.Start page</a></li>
<li><a href="#" onmouseover="easytabs('2', '2');" onfocus="easytabs('2', '2');" onclick="return false;" title="" id="anotherlink2">2.Click "ask"</a></li>
<li><a href="#" onmouseover="easytabs('2', '3');" onfocus="easytabs('2', '3');" onclick="return false;" title="" id="anotherlink3">3.Click 'ear'</a></li>
<li><a href="#" onmouseover="easytabs('2', '4');" onfocus="easytabs('2', '4');" onclick="return false;" title="" id="anotherlink4">4.Speak</a></li>
<li><a href="#" onmouseover="easytabs('2', '5');" onfocus="easytabs('2', '5');" onclick="return false;" title="" id="anotherlink5">5.Getting result </a></li>
<li><a href="#" onmouseover="easytabs('2', '6');" onfocus="easytabs('2', '6');" onclick="return false;" title="" id="anotherlink6">6.Your choice</a></li>
</ul>
</div>



<div id="anothercontent1"> <img src="https://reginahjm.files.wordpress.com/2014/10/mama_1login.jpg"> </div>

<div id="anothercontent2"><img src="https://reginahjm.files.wordpress.com/2014/10/mama_2click.gif"></div>

<div id="anothercontent3"><img src="https://reginahjm.files.wordpress.com/2014/10/mama_3clickear.gif"></div>

<div id="anothercontent4"><img src="https://reginahjm.files.wordpress.com/2014/10/mama_4speak.gif"></div>

<div id="anothercontent5"><img src="https://reginahjm.files.wordpress.com/2014/10/mama_5loading.gif"></div>

<div id="anothercontent6"><img src="https://reginahjm.files.wordpress.com/2014/10/mama_6result.gif"></div>


<br/><br/>

</body>
</html>