1
我目前正在嘗試編碼我的rails應用程序在c9上使用js的測驗,但js似乎並未被加載到視圖文件中。有人可以告訴我什麼是錯誤的或建議修復?Rails視圖javascript的未加載
與測驗的主頁上開始:
<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>
這是應該從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>
應用佈局來看:
<!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>
main.js文件:
//= 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;
}
在這兩個視圖中,所以在新的html和ques之一,還是在應用程序佈局中呢?它似乎沒有工作,我可以嘗試添加一個預編譯到資產rb? – Djangert
在預編譯中加入您的更改,排序問題,歡呼聲。 – Djangert