still working on an adventure game. I've put the gameover if statement in all html files/chapters
<<if $breath <1>><<goto "gameover">>
<<elseif $happiness <1>><<goto "recovery>>
<</if>>
breath <progress #value="$breath" max="100"></progress>
happiness <progress #value="$happiness" max="100"></progress>
credits <progress #value="$credits" max="100"></progress>
before it was on the bottom of the page, but then it wasn't working properly, not executing when breath was empty.
now I´m not able to play anymore because I'm directly directed to the gameover page, even when the breath count is 100...
I reset the breath variable every restart/start of the game in an rest html:
<<set $credits to 100>>
<<set $happiness to 100>>
<<set $breath to 100>>
<<goto "start">>
then in the next chapter you are still able to play (even with the gameover if statement in there) but afterwards you land always at gameover... why?
I'm using twine sugarcube.
I believe based on documentation you need lt (less than). The next section has js though so maybe its spacing < 1>> not <1>>
<<if $breath lt 1>><<goto "gameover">>
<<elseif $happiness lt 1>><<goto "recovery>>
Related
When I open an HTML file in Chrome, the page loads with some random h3 tag from the middle of the document (see last h3 tag in code below) at the top of the window, instead of the actual top of the page. All of the content above that point is loads, but I have to scroll up to get to the top.
Same thing happens when I use Firefox, although it loads with the first h3 tag in my example at the top of the window. Safari loads with the "Here is an example of bold text" paragraph at the top. Any idea why this might be happening?
<h3>Audio</h3>
<audio src="07 Wake Up.mp3" controls>Here is some audio</audio>
<p>
Back to top
</p>
<hr />
<h3 id="B">Bold text</h3>
<p>Here is an example of <b>bold text</b></p>
<h3>Bi-directional override</h3>
<p><bdo dir="rtl">This text will go from right to left.</bdo></p>
<p><bdo dir="rtl">.tfel ot thgir morf og lliw txet sihT</bdo></p>
<h3>Blockquotes</h3>
<p>Blockquotes specify a section that is quoted from another source, like in the passage below:</p>
<blockquote cite="http://www.archives.gov/exhibits/charters/declaration_transcript.html">We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.</blockquote>
<h3 id="button">Buttons</h3>
I think I know what's going on now. The issue isn't with the tags that are loading at the top of the page, but with an autofocus button that appears a few lines down:
<h4>Autofocus button</h4>
<button type="button" autofocus>Autofocus button</button>
For anyone playing around with autofocus buttons, it seems like they cause the browser to "autofocus" (duh) on that point upon loading. In my original case, my page loaded with the autofocus button on the bottom of the window, some headings from a few lines up at the top, and the actual top of the page nowhere in sight.
Without being able to see you code, I would guess that you have an anchor tag somewhere that it is trying to navigate to. If you have a hash (#) in your URL, is in 99% likely. Otherwise, check your JS for a random scroll function that is attached to the wrong thing or perhaps running too early.
Without being able to see the code, this would be my best guess.
I have looked at the other questions here but I'm not finding the answer I need.
My boss walked out, leaving me as pretty much the only person here, and I am stuck jumping into a responsive site design with only the most basic of html experience. So I really need it spelled out for me step by step.
I would like to be able to add an arrow that is pointed right when an item is closed and down when it is opened.
I have my arrows created. They are called right.png and down.png
Please note: If you get through this and think there is an easier way for me to do this then I will simply get rid of his code and replace it with something you have that works. I am so lost right now and my VP wants me to get this done. Please help!
How he set it up:
This is the accordion code that the previous guy started to use. It works but he didn't include the arrows in it.
script
$(function() {
$( "#gallery" ).accordion({
heightStyle: 'content',
collapsible: true,
autoHeight: false});
});
/script
This is the first element that expands. Please note he has the first one defaulted to be open when a user comes to the page....
div id="gallery" (I had to remove the < > to make this show up it is at the top of the list of expanding parts)
<h3 class="gallery">Associate of Arts in Liberal Arts</h3>
<div class="photobox"><img class="image-left" src="images/aala.jpg" width="302" height="200" alt="" />
<p>Centenary's accelerated 64-credit hour AALA business program lets you complete your Associate of Arts degree in either in-class or online. This program focuses on business, leadership, teamwork, and communication. We provide students with the skills needed to start careers in a competitive and fast-moving economy. Our program focuses on leadership, teamwork, and communication. These skills build your personal growth, service to the community, and career advancement. Enhance your employment opportunities or transfer your credits to earn your Bachelor's degree. </p>
</div>
This is the second element that expands this one is defaulted to be closed when a user comes to the page.
<h3 class="gallery">Bachelor of Science in Business Administration</h3>
<div class="photobox"><img class="image-left" src="images/bsba.jpg" width="302" height="200" alt="" />
<p>This accelerated 128-credit hour business program gives you the essentials in the business field. Your degree is organized into three parts: Core Requirements, the Business Major, and free electives. Core Requirements include courses from the liberal arts disciplines. This guarantees uniformity of study without sacrificing your educational interests.</p>
</div>
I hope this is clear enough for everyone.
Thanks!
Edit:
Thanks for trying everyone. I tried everything you guys suggested and I can't get it working. It's just too much for me to do. Every time I add something or change something it breaks something else on the page.
I'll just tell them they will have to go without until they hire someone new.
Many, many thanks.
If you are using JQuery UI accordion you just have to add the CSS that triggers the styling:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
EDIT: Used your code with the example jQuery UI accordion code, to get what you want:
Look at this example: http://codepen.io/anon/pen/LVpPmN
In the CSS section you see that I overwrite the standard CSS classes.
For jquery UI accordions, "icons" property can be given for active as well as inactive states. These can be customized to add your own custom classes with your images as background.
var icons = {
header: "", //provideCustom Classes here for active and inactive states
activeHeader: "" //
};
$( "#gallery" ).accordion({
icons: icons
});
https://jsfiddle.net/Lcsbcn22/
Edit
Added a demo. Please look how the custom classes(red and blue) get placed at the accordion headers . Similarly you have to create two classes with your arrow images as background-image and put them in icons object.
I'm doing a simple project for a digital arts class. I want to do a simple little choose your own adventure game, where you watch a clip, then choose from up to several different options on what to do next. Your decision will trigger a video, and the adventure will go on for a little awhile and the player will either escape the haunted house or be killed. This is my first time working with HTML5.
I need to do the following things:
1) When a button is pressed, a certain video is played.
2) After that video ends, the block of text at the top of the screen changes accordingly, presenting players with additional information and explaining their options in greater detail than the clips themselves can provide.
Right now, I just need help with step 1. I can't seem to figure out how to get the button onclick command to work correctly. The program displays the first Intro video just fine, but does not react at all when you click on any of the buttons. I was initially hoping to use something along the lines of an if else button.pressed command, but I can't find anything like that in HTML5. I know its not possible to troubleshoot my code since no one has access to my local files, but I'd appreciate any advice. Thanks!
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spooks: Choose Your Own Adventure</title>
<script>
function $(id)
{
return document.getElementById(id);
}
//Video Source Changers
function Door()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4" type="video/mp4">
}
function Wander()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}
function Match()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}
</script>
</head>
<body style= "background-color: black">
<p style= "color:white">What an awful time to get stranded out in the countryside! It's raining cats and dogs out here. Hungry, freezing, exhausted and desperate, you head to the nearest visible shelter - a decrepit old mansion. Surely southern hospitality will see you safely through the night.</p>
<p>
<video width="400" controls>
<source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">
</video>
</p>
<p>
<button onclick="Door()">This is creepy. I'll just go back through the front door.</button>
<button onclick="Wander()">Really weird, but I guess it beats the storm. The owner probably just ran off to get the lights working. I'll wander around a bit, see if I can find him.</button>
<button onclick="Match()">It'd be nice to be able to see before I make a decision one way or the other. Let's light a match...</button>
</p>
</body>
</html>
Looks like there are a couple of issues.
1) your $('movie').src is invalid javascript, you have some junk code (type="video/mp4">) at the end of the line and the line should end with a semicolon. e.g.
function Door()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4";
}
2) Your video tag doesn't have an id attribute so you are not actually referencing anything in your javascript call to update the src:
<video width="400" controls id="movie">
<source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">
</video>
I put an updated JSfiddle here: http://jsfiddle.net/tv7pahcf/
What do I have to do to get my images to show up on my webpage. I am trying to put the images in my html document. The box shows up but not the image. This the code <img scr="smile.jpg" width="120" height="90"/> I have not put the web page on the internet yet.
<HTML>
<HEAD>
<TITLE> Tay first Web page </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center"> Why do I want to learn to code? </H1>
<P> I want to learn to code because it will help me develop the skills I need in web development and game development. My goal is to learn how to code in many different languages. It is amazing to me to be able to create something from scratch and making it into your vision.</P>
<H2 ALIGN="center"> Why is coding fun? </H2>
<P> Computer coding is <STRONG> wonderful.</STRONG> You get to make a web page with whatever info you want and add so many things to it to make it mind blowing.There are colours, images, flash, and you can even make a video game if you wanted too. The possibilities are endless and mind blowing.</P>
<H3 ALIGN="center"> How can coding be important in the real world? </H3>
<P> <EM>Technology</EM> is everywhere and is constantly changing. <MARK>Computers</MARK> are so intertwined in our lives. People view web pages all the time and are looking at code everyday. Being able to code can get you a job if you are efficient with different languages.
<P><STRONG>These are the best consoles ever!!!!</STRONG></P>
<UL>
<LI>N64</LI>
<LI>SEGA GENESIS</LI>
<LI>XBOX</LI>
<LI>XBOX 360</LI>
</UL>
<TABLE BORDER="1">
<TR><TD>First</TD></TR>
<TR><TD>Second</TD></TR>
<TR><TD>Third</TD></TR>
</TABLE>
<IMG SRC="smile.jpg" WIDTH="120" HEIGHT="90"/>
</BODY>
</HTML>
You have to spell src correctly (SouRCe). You have two of its letters reversed.
This would have been picked up if you had performed some basic automated QA by using a validator.
your img tag was wrong,it should be
<img src="smile.jpg" width="120" height="90"/>
Check the following:
Could your image possibly be in another folder than your your file?
Could there be other divs or elements on the page that might be "on top" of your image?
Could your layout place things "off-screen"?
Could there be code that sets something to visibility: none?
Could you have spelled the filename of the image wrong?
Are you absolutely certain you force refresh your browser window when trying to load again?
Please give us the entire code; preferably as a JS-fiddle.
If you're looking to find it on a Linux server, the file name is case-sensitive. If you set it up and tested it and found that it tests fine on a Windows system, you will perhaps not have noticed that smile.JPG and SMILE.jpg and Smile.jpg will all be treated as though they're the same thing as smile.jpg. On a Linux host, if you call for smile.jpg and it's been stored as smile.JPG (for example), you'll get the result you're observing.
Width and Height attributes should have units. You want them in pixels?
Try this:
<img src="smile.jpg" width="120px" height="90px"/>
I was wondering if it is possible to create a flash movie that rotates values that are stored in HTML. For example if i have these 3 containers:
<div style="display:none">
<img src="someimage1" />
<span class="text1">text1</span>
<span class="text2">text2</span>
</div>
<div style="display:none">
<img src="someimage2" />
<span class="text1">text1</span>
<span class="text2">text2</span>
</div>
<div style="display:none">
<img src="someimage3" />
<span class="text1">text1</span>
<span class="text2">text2</span>
</div>
I want to have some flash movie rotate these values every 10 seconds. I don't want to program it hard into flash, it has to be variable. It has to display the first set, then after 10 sec the second, and so on.
Maybe if it is possible something that stops the toggle, and skip to just the second, or just the third.
I also don't want to use javascript to do this (jQuery etc.), because this conflicts with another timer on the website.
Is there a way of doing this?
If someone could help me get a good resource for this i would be glad, as i have no knowledge of flash, and i have searched the net but just can't find what i am looking for.
Thank you guy!
Look up how to use ExternalInterface. You can call any Javascript you like from Flash/Flex, and you can call any exposed method in your movie from the browser.
Flash finds HTML tough, and your use of element class attributes make me suspect that you might find that Flash would find this kind of rendering tricky. In my most generous moments, I would say that CSS support in Flash is basic and buggy.