Hi
I have an e-learning course which has an index page and the individual pages are embeded in to this. I’m trying to send the value of 3 selected items on one page to a drop down list on another using javascript. There is a js file where variables can be stored as this is attached to the index page and in here I have written this code…
var firstChoice;
var secondChoice;
var thirdChoice;
I have the theory behind how it works but can’t work out the code I need.
This is my first page…
<style>
.content {
width: 880px;
height:180px;
}
.test {
width:800
height:100
}
.answers{
position:absolute;
width:25px;
height:20px;
left: 200px;
top: 4px;
}
.correct{
background-repeat:no-repeat;
background-image:url(assets/correct-small.png);
z-index:1;
}
.incorrect{
background-repeat:no-repeat;
background-image:url(assets/incorrect-small.png);
z-index:1;
}
.flip {
position:relative;
float:left;
margin-left:3px;
margin-right:3px;
width: 220px;
height: 22px;
padding: 3px;
margin-bottom: 2px;
border: 1px #CCC solid;
background-color: #EFEFEF;
text-align: center;
}
.flip:hover{
cursor: pointer;
background-color: #FFF;
}
</style>
<script language="javascript">
$true = 0;
$false = 0;
for(i=1;i<=15;i++) {
$("#flipbox" + i).one("click",function(){
$(this).flip({
direction:'tb',
color: '#FFF'
});
});
}
function addAnswer(div, answer){
if(answer === 't') {
$true++;
$("#"+div).addClass("correct");
if($true == 3) {
$(".test").fadeOut(1000, function(){
$(this).html("<h3>Identifying your barriers to employment is the first step to overcoming them.</h3>"
).fadeIn(1000);
})
}
}
else
$("#"+div).addClass("incorrect");
}
updateBookmark();
</script>
<h1>Overcoming Hurdles</h1>
<img class="image_yourcareer" src="./images/yourcareer.gif" />
<h2>What's Stopping me?</h2>
<p>Click on up to <u>three</u> barriers below you feel are holding you back the most.</p><br />
<div class="content">
<div class="flip" onclick="addAnswer('answer1','t')" id="flipbox1">Age<div class="answers" id="answer1"></div></div>
<div class="flip" onclick="addAnswer('answer2','t')" id="flipbox2">Disability<div class="answers" id="answer2"></div></div>
<div class="flip" onclick="addAnswer('answer3','t')" id="flipbox3">Transport<div class="answers" id="answer3"></div></div>
<div class="flip" onclick="addAnswer('answer4','t')" id="flipbox4">Lack of experience<div class="answers" id="answer4"></div></div>
<div class="flip" onclick="addAnswer('answer5','t')" id="flipbox5">Over-qualified<div class="answers" id="answer5"></div></div>
<div class="flip" onclick="addAnswer('answer6','t')" id="flipbox6">Looks/presentation<div class="answers" id="answer6"></div></div>
<div class="flip" onclick="addAnswer('answer7','t')" id="flipbox7">Lack of qualifications<div class="answers" id="answer7"></div></div>
<div class="flip" onclick="addAnswer('answer8','t')" id="flipbox8">Lack of money<div class="answers" id="answer8"></div></div>
<div class="flip" onclick="addAnswer('answer9','t')" id="flipbox9">Poor job hunting skills<div class="answers" id="answer9"></div></div>
<div class="flip" onclick="addAnswer('answer10','t')" id="flipbox10">Unrealistic expectations<div class="answers" id="answer10"></div></div>
<div class="flip" onclick="addAnswer('answer11','t')" id="flipbox11">Childcare needs<div class="answers" id="answer11"></div></div>
<div class="flip" onclick="addAnswer('answer12','t')" id="flipbox12">Attitude<div class="answers" id="answer12"></div></div>
<div class="flip" onclick="addAnswer('answer13','t')" id="flipbox13">Personal Hygiene<div class="answers" id="answer13"></div></div>
<div class="flip" onclick="addAnswer('answer14','t')" id="flipbox14">Criminal record<div class="answers" id="answer14"></div></div>
<div class="flip" onclick="addAnswer('answer15','t')" id="flipbox15">Low self esteem<div class="answers" id="answer15"></div></div>
</div>
<div class="test"></div>
The user should select 3 answers from here. Then I want these selections to populate the drop down menu on this page(obviously without the answers that are already in there)…
<script type="text/javascript">
/*Begin*/
function displayHTML(form) {
var inf2 = form.Box.value;
var inf3 = form.htmlBox1.value;
var inf4 = form.htmlBox2.value;
var inf5 = form.htmlBox3.value;
win = window.open("", 'popup', 'toolbar = yes, status = no');
win.document.write("" + "<H2>" + "<b>" + "My Action Plan" + "</H2>" + "<br>" + "My barrier:" + "</b>" + inf2 + "<br>" + "<br>" + "<b>" + "How will I remove/reduce this barrier?: " + "</b>" + inf3 + "<br>" + "<br>" + "<b>" + "When this is to be achieved by:" + "</b>" + inf4 + "<br>" + "<br>" + "<B>" + "Steps I am to take to achieve this: " + "</b>" + inf5 + "<br>" + "<br>" + "<html><head><title>popup</title></head><body><br><br>" + "<a href='print.html' onclick='window.print();return false;'>" + "<img src='images/printer.png' height='35px' width='132px' border='0'></a></body></html>" + "");
}
//-->
</script>
<h1>Overcoming Hurdles</h1>
<h2>Action plan</h2>
<p>You are now going to create an action plan. Choose one barrier you would like to overcome and plan the steps you will take to achieve it. An important thing to bear in mind is setting a time to achieve your goal. Make sure you do this and make sure it is realistic.</p>
<form name="barriers">
<p>
My barrier:
<label for="Box"></label>
<select name="Box" id="Box">
<option selected="selected">Please Select</option>
<option value="Age">Age</option>
<option value="Attitude">Attitude</option>
<option value="Child care needs">Child care needs</option>
<option value="Criminal record">Criminal record</option>
<option value="Disability">Disability</option>
<option value="Lack of experience">Lack of experience</option>
<option value="Lack of qualifications">Lack of qualifications</option>
<option value="Lack of money">Lack of money</option>
<option value="Looks/presentation">Looks/presentation</option>
<option value="Low self esteem">Low self esteem</option>
<option value="Over-qualified">Over-qualified</option>
<option value="Personal hygiene">Personal hygiene</option>
<option value="Poor job hunting skills">Poor job hunting skills</option>
<option value="Transport">Transport</option>
<option value="Unrealistic expectations">Unrealistic expectations</option>
</select>
<br />
<br />
How will I remove/reduce this barrier?
<br />
<label for="htmlBox1"></label>
<textarea onclick="Javascript:unbindKeypress()" onblur="Javascript:activateKeypress();" name="htmlBox1" id="htmlBox1" cols="45" rows="2"></textarea>
When this is to be achieved by:
<label for="htmlBox2"></label>
<input onclick="Javascript:unbindKeypress()" onblur="Javascript:activateKeypress();" type="text" name="htmlBox2" id="htmlBox2" />
</p>
<p>Steps I am to take to achieve this: <br />
<label for="htmlBox3"></label>
<textarea onclick="Javascript:unbindKeypress()" onblur="Javascript:activateKeypress();" name="htmlBox3" id="htmlBox3" cols="45" rows="2"></textarea>
<input type="button" value="View Action Plan" onClick="displayHTML(this.form)"/>
</p>
</form>
<script language="javascript">
updateBookmark();
</script>
Can anyone help or point me in the right direction with this as I need to get it done by tomorrow?
Also does anyone know any good Javascript courses? I’m struggling to learn from reading online and need an actual class or video tutorial as I learn more by being shown.
Thanks
