Djangert Djangert - 5 months ago 20
HTML Question

Rails view javascript not loading

I'm currently trying to code a quiz for my rails app on c9 using js but the js doesn't seem to being loaded into the view file. Can anybody tell me what is wrong or suggest a fix?

The home page with the quiz start on it:

<div class = "signinstyle">
<div class = "row">


<div id="wrapAll">
<div id="wrapper">

<img id="logo" src="img/geek.png" alt=""><br>
<h1>Help us recommend a <span>Course</span></h1>

</div>
</div>
</div>
<div class ="row">
<div id="wrapper">
<input class="start-btn" type="submit" value="Start!" onclick="redirect('ques.html')">

</div>
</div>



</div>


<script src='main.js' type='text/javascript'></script>


The view which is supposed to pull the questions from the js:

<!--Functionality of recommender?? -->
<% provide(:title, '') %>


<!--containers for design/layout -->
<div class = "signinstyle">
<div class = "row">
<!--Page information -->


<div id="wrapAll">
<div id="wrapper">

<div class="ques-wrap">
<h2 id="ques">This is question</h2>
<input class="btn1" type="submit" id="opt1" value="Option 1" onclick="optionClick('1')">
<input class="btn2" type="submit" id="opt2" value="Option 2" onclick="optionClick('0')">
<div class="clear"></div>

</div>
</div>
</div>

</div>
</div>
<script src='main.js' type='text/javascript'></script>
<script type='text/javascript'>
window.onload = function(){
generate();
};
</script>


The application layout view:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title><%= yield(:title) %> | Uni2choose</title>

<%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

</head>
<body>

<%= render 'layouts/navbar' %>
<%= render 'layouts/header' %>

<br><br><br><br>

<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>


<%= yield %>




<%= render 'layouts/footer' %>
</body>





</html>


The main.js file:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require chartkick
//= require turbolinks
//= require_tree .



var data = {
questions: [{
question: "Which interests you most?",
options: [ "Medicine" , "Drama" ]
}, {
question: "Which interests you most?",
options: [ "Biology" , "Music" ]
}, {
question: "Which interests you most?",
options: [ "Chemistry" , "Sculpting" ]
}, {
question: "Which interests you most?",
options: [ "Psychology" , "Design" ]
}, {
question: "Which interests you most",
options: [ "Animals" , "Art" ]
}, {
question: "Which interests you most",
options: [ "Maths" , "Outdoors" ]
}, {
question: "Which interests you most?",
options: [ "Engineering" , "English" ]
}, {
question: "Which interests you most?",
options: [ "Computing" , "Ancient history" ]
}, {
question: "Which interests you most?",
options: [ "Physics ", "Dance" ]
}, {
question: "Which interests you most?",
options: [ "Geography" , "Fashion" ]
}, {
question: "Which interests you most?",
options: [ "History" , "Dentistry" ]
}, {
question: "Which interests you most?",
options: [ "Debating" , "Photography" ]
}, {
question: "Which interests you most?",
options: [ "Creative Writing" , "Accounting" ]
}, {
question: "Which interests you most?",
options: [ "Archaeology " , "Hospitality" ]
}, {
question: "Which interests you most?",
options: [ "Construction " , "Teaching" ]
}, {
question: "Which interests you most?",
options: [ "Graphics" , "Philosophy" ]
}, {
question: "Which interests you most?",
options: [ "Business" , "Drawing" ]
}, {
question: "Which interests you most?",
options: [ "Nutrition" , "Politics" ]
}, {
question: "Which interests you most?",
options: [ "Sports" , "IT" ]
}, {
question: "Which interests you most?",
options: [ "Economics" , "Languages" ]
},],
geeks: [
{
name: "Linus Torvalds",
info: "Linus Benedict Torvalds is a Finnish American software engineer, who was the principal force behind the development of the Linux kernel that became the most popular kernel for operating systems."
}, {
name: "Dennis Ritchie",
info: "Dennis MacAlistair Ritchie was an American computer scientist. He created the C programming language and, with long-time colleague Ken Thompson, the Unix operating system."
}, {
name: "Bill Gates",
info: "William Henry 'Bill' Gates III is an American business magnate, philanthropist, investor, computer programmer, and inventor."
}, {
name: "Steve Jobs",
info: "Steven Paul 'Steve' Jobs was an American entrepreneur, marketer, and inventor, who was the cofounder, chairman, and CEO of Apple Inc."
}, {
name: "Steve Wozniak",
info: "Stephen Gary 'Steve' Wozniak, known as 'Woz', is an American inventor, electronics engineer, and computer programmer who co-founded Apple Computer with Steve Jobs and Ronald Wayne."
}, {
name: "Mark Zuckerberg",
info: "Mark Elliot Zuckerberg is an American computer programmer and Internet entrepreneur. He is best known as one of five co-founders of the social networking website Facebook. Zuckerberg is the chairman and chief executive of Facebook, Inc."
}, {
name: "Tim Berners-Lee",
info: "Sir Timothy John 'Tim' Berners-Lee, also known as TimBL, is an English computer scientist, best known as the inventor of the World Wide Web."
}]
};

var qIndex = 0,
index = 0,
aString = "",
maxQ = 20,
q = document.getElementById('ques'),
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2');

function generate(){
q.innerHTML= data.questions[qIndex].question;
opt1.value= data.questions[qIndex].options[0];
opt2.value= data.questions[qIndex].options[1];
}

function optionClick(ans) {
if(qIndex%2==0){
aString+=ans;
index++;
}
qIndex++;
if(qIndex == maxQ){
redirect( "result.html?" + generateResult(aString) );
} else{
generate();
}
}

function generateResult(answers) {
if( answers=="11110" || answers=="11000" || answers=="01000" ) return 0;
else if( answers=="11111" || answers=="01010" ) return 1;
else if( answers=="10011" || answers=="00111" || answers=="00101" ) return 2;
else if( answers=="10100" || answers=="00110" || answers=="00000" ) return 3;
else if( answers=="10101" ) return 4;
else if( answers=="11101" || answers=="10010" || answers=="01111" ) return 5;
else return 6;
}

function showResult() {
var id = window.location.search.substring(1);
var Geeks = data.geeks;
var totalGeeks = Object.keys(Geeks).length - 1;
if( id > totalGeeks || id < 0 || !id ) redirect("index.html");
var name = document.getElementById("geekName");
var info = document.getElementById("geekInfo");
var img = document.getElementById("geekImage");
name.innerHTML = Geeks[id].name;
img.src = "img/"+id+".png";
img.alt =Geeks[id].name;
info.innerHTML = Geeks[id].info;
}

function redirect(url) {
window.location = url;
}

Answer

Your problem is in the following line

 <script src='main.js' type='text/javascript'></script>

It will search from the public path instead of asset path. So change it to

<%= javascript_include_tag 'main'  %>
Comments