archive
/
CiDa-Spellbound


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!doctype html>
<html>
<head>
<script language="javascript" type="text/javascript">
document.onmousedown=disableclick;
function disableclick(event)
{
  if(event.button==2)
   {
     return false;    
   }
}
</script>
<style>
.fade img:hover{filter: alpha(opacity=80);}
h1{font-weight:lighter;padding-top:10px;}
</style>
<link rel="stylesheet" type="text/css" href="./Products/css/style.css">
<script type="text/javascript">
function quiz() {
var answer = confirm ("Please save the file then run it.")
if (answer)
window.location="Products/quiz.ppsx";
}
</script>
<script language="javascript" type="text/javascript">
document.onmousedown=disableclick;
function disableclick(event)
{
  if(event.button==2)
   {
     return false;    
   }
}
</script>
<script>
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<meta charset="utf-8">
<title>Spellbound| Eportfolio - Products</title>
</head>
<body onLoad="MM_preloadImages('img/products/ss2.png','img/products/ns2.png','img/products/cu2.png')">
<div align="center">
<table width="973" border="0">
  <tr>
    <td colspan="6"><img width="1010px" src="./img/eportheader.png"></td>
  </tr>
  <tr>
    <td width="154" rowspan="3" align="center" valign="top">
      <img src="Products/img/logots.png" style="width: 150px;">
      <a href="./index.html"><div class="btn-purple">Home</div></a>
      <a href="./evidence.html"><div class="btn-green">Evidence</div></a>
      <a href="./products.html"><div class="btn-blue">Products</div></a></td>
    <td style="display: inline-block;background-color: #B7FFFF; border: 3px solid #B7FFFF; font-size: 13px;" colspan="5">Candidate name: Owen Maple | Candidate number: 2077    |      Center name: Testwood Sports College | Center number: 58837</td>
    </tr>
  <tr>
    <td height="51" colspan="5" align="center" valign="top"><h1 style="padding:6px;">Products</h1><hr style="width:80%;"></td>
    </tr>
  <tr>
    <td width="176" height="209" align="center" valign="top">&nbsp;</td>
    <td width="165" align="center" valign="top">
    <p><a href="Products/navigation.html" target="_blank"><div class="btn-nav">Navigation Screen</div></a></p>
    <p>The navigation screen followed the simplistic themes found in css/js scripts such as bootstrap. The original plan was to have the spellbound logo in the center however the logo isn't amazing and it would ruin the simplistic design I was going for.</p></td>
    <td width="165" align="center" valign="top">
    <p><a href="Products/contact.html" target="_blank"><div class="btn-cu">Contact Us</div></a></p>
    <p>The contact screen was fairly simple to throw together as the splashscreen was already in a position to be adapated for this use. It worked out by simply adding some extra text in a contrasting colour to make the information stand out.</p></td>
    <td width="165" align="center" valign="top">
    <p><a href="Products/index.html" target="_blank"><div class="btn-ss">Splashscreen</div></a></p>
    <p>The splashscreen has be through 2 phases. The first had a bland background and text that could have easily been missed but now a gradient is used to allow text and images to stand out more.</p></td>
    <td width="165" align="center" valign="top"><p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="154">&nbsp;</td>
    <td width="176" align="center" valign="top">&nbsp;</td>
    <td width="165" align="center" valign="top">
    <p><a href="Products/meetthewizard.html" target="_blank"><div class="btn-mtw">Meet the Wizard</div></a></p>
    <p>The meet the wizard was targeted originally to demonstrate the quiz without the use of sound, once completed it did feel as if it was missing something and so a voice over was added to make the character come to life allowing for a more immersive experience for the user.</p></td>
    <td width="165" align="center" valign="top">
    <p><a href="javascript:quiz();"><div class="btn-qu">Quiz</div></a></p>
    <p>The quiz was where my functional side could really do its justice. I designed it to be easy to use for the younger children that the software is aimed at. I really enjoyed developing the quiz as it was simplistic yet methodical. The original idea for the quiz was to use a website instead of PowerPoint however due to the lack of software on the school machines I was unable to do it in this way.</p></td>
    <td width="165" align="center" valign="top">
    <p><a href="Products/trailer.html" target="_blank"><div class="btn-dv">Demo Video</div></a></p>
    <p>The demo video was an exciting project to work on. I know how to video edit so that watching a video is not a bore. I think that the video is informative and enjoyable to watch even if the quality has to be lesser than appropriate due to the file size limits. </p></td>
    <td width="165">
    <p></p>
    </td>
  </tr>
</table>
</div>
</body></html>