jQuery Effects - Trivia Card - Access to Index and CSS files?

Hi,

I completed the jQuery Effects Trivia Card project, but at the end it has the following:

Try some of the following stretch goals:

  1. Add a button to reset the quiz and make the wrong answers reappear?
  2. Make a new question to appear after getting a question correct?
    3 .Use arrays to set up a quiz with multiple questions?

These are all some great extensions to this project that we’d love to see you try!

Long story short, I’d like to, but is there any way to access to the existing index.html and css files so that I don’t have to recreate them?

When I took the JavaScript class, these files would be tabbed in the work area and you could just copy them.

Thanks in advance,

MB

the files exist, there is a directory icon (to the left of the open file) which allows you to the browse and open the files:

image

1 Like

Stetim94,

Seems pretty obvious now that you’ve pointed it out. LOL.

Thanks,

MB

1 Like

Hi - I’m looking in the screen right now and I don’t see the folder icon - it’s just a black square to the left of main.js. Am I doing something wrong?

maybe a glitch? Try refreshing the page

I am having the same issue. No directory folder icon. It began for me in my previous lesson, Lesson 2 JQuery Effects Step 3. (in Introduction to JQuery,) The folder icon disappeared and the problem has continued into this current project JQuery Effects Trivia card. No access to Index or CSS files.
Refreshing the page makes no difference.
Any more ideas out there on how to fix this and access these other files?

jQuery Effects - Trivia Card

We do have round-about access.

style.css
body {
	display:flex;
  justify-content:center;
  background-color: #86bdfd;
}

.card{
  width: 620px;
}

.question-text {
  font-family: Source Sans Pro;
  font-size: 42px;
  line-height: 1.29;
  letter-spacing: 0.4px;
  color: #0b2748;
}

.question{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  background-color: #86bdfd;
}

.hint-box{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: #0b2748;
  cursor: pointer;
}

.hint{
  box-sizing: border-box;
  width:100%;
  padding: 30px 0;
  background-color: #0b2748;
  text-align: center;
  display: none;  
}

.answer{
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  border-radius: 2.2px;
  cursor: pointer;
  
}

.wrong-answer-one{
  background-color: #ffffff;
}

.wrong-answer-two {
  background-color: #edf5ff;
}

.wrong-answer-three{

  background-color: #ffffff;
}

.correct-answer{
  background-color: #edf5ff;
}

.result{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 160px;
  border-radius: 2.2px;
  background-color: #0b2748;
}
.smiley{
	display: none;
}

.frown{
  display: none;
}

.hide-hint-text{
  font-family: Source Sans Pro;
  font-size: 20px;
  font-weight: 600;
  line-height: 0.48;
  letter-spacing: 0.4px;
  color: #4a90e2;
}

.answer-text {
 
  font-family: Source Sans Pro;
  font-size: 42px;
  line-height: 1.29;
  letter-spacing: 0.4px;
  text-align: left;
  color: #0b2748;
  padding-left: 55px;
}
index.html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"/>
  </head>
  <body>
    <div class="card">
    <div class="question">
      <div class="question-text">What is the capital of New York?</div>
    </div>
    <div class="hint-box">
      <div class="hide-hint-text">SHOW/HIDE HINT</div>
    </div>
    <div class="hint"> 
      <div class="hide-hint-text">The capital is not the largest city!</div>
    </div>
    <div class="wrong-answer-one answer">
      <div class="wrong-text-one answer-text">New York City</div>
    </div>
    <div class="wrong-answer-two answer">
      <div class="wrong-text-two answer-text">Buffalo</div>
      </div>
    <div class="wrong-answer-three answer">
      <div class="wrong-text-three answer-text">Syracuse</div>
      </div>
      <div class="correct-answer answer">
      	<div class="correct-answer-text answer-text">Albany</div>
    	</div>
      
    <div class="result">
      <div class="smiley"> <img src="https://s3.amazonaws.com/codecademy-content/courses/jquery/effects/smile_icon.svg"/> </div>
      <div class="frown"> <img src="https://s3.amazonaws.com/codecademy-content/courses/jquery/effects/frown_icon.svg"/>  </div>
    </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>   
</body>
</html>

Thanks mtf, by round-about did you mean using the browser inspector tools and copy/paste?
I’m happy to do that but I guess my question is around whether the directory folder is missing by design or not? It seems to me most likely not, when Step 10 of the exercise suggests some extra goals such as adding buttons, something that would require editing in the html page which is not available to the exercise that I can see.
Would like to try these extra learning goals within the codecademy environment but cannot proceed .

1 Like

One expects so, since it is not really needed to complete any tasks in the exercise.

Right click the localhost browser window, Open Frame in New Window, right-click, > View Page Source, and in that page the style.css file link is exposed. Copy to your own environment and remove the last script tag (the one for relay.js) from the HTML. It should function exactly the same on your machine.

You can continue in the composer but will need to insert HTML elements via the DOM. Study the markup and CSS to identify hooks and possible elements to interact with. Be sure you know exactly what it is you expect and have a good plan of action going forward.

I have successfully followed your instructions and now I can see the way forward.
Many thanks!

1 Like