1 2// 3// productInfo is a sample object 4// Useful for testing the Html generatiom while skipping networking calls 5// 6 7const sampleQuestions = 8 [ 9 { 10 "question": "What is your budget range for a 4-person tent?", 11 "explanation": "Determining your budget helps narrow down the options that fit within your financial constraints.", 12 "choices": [ 13 "Under $100", 14 "$100 - $200", 15 "$200 - $300", 16 "Over $300" 17 ] 18 }, 19 { 20 "question": "What type of camping do you plan to do?", 21 "explanation": "Different tents are designed for different types of camping, such as car camping, backpacking, or winter camping.", 22 "choices": [ 23 "Car camping", 24 "Backpacking", 25 "Winter camping", 26 "Family camping" 27 ] 28 }, 29 { 30 "question": "What is the typical weather condition you expect?", 31 "explanation": "Weather conditions can greatly influence the type of tent you need, including waterproofing and ventilation features.", 32 "choices": [ 33 "Sunny and warm", 34 "Rainy and humid", 35 "Cold and snowy", 36 "Variable conditions" 37 ] 38 }, 39 { 40 "question": "How important is the weight of the tent?", 41 "explanation": "If you're backpacking, weight becomes a crucial factor, whereas for car camping, it may be less important.", 42 "choices": [ 43 "Very important", 44 "Somewhat important", 45 "Not important" 46 ] 47 }, 48 { 49 "question": "Do you need additional features?", 50 "explanation": "Additional features like extra storage pockets, vestibules, or built-in lighting can enhance your camping experience.", 51 "choices": [ 52 "Yes, I want extra features", 53 "No, I prefer a basic tent" 54 ] 55 }, 56 { 57 "question": "How often do you plan to use the tent?", 58 "explanation": "The frequency of use can affect the durability and quality of the tent you should consider.", 59 "choices": [ 60 "Occasionally (1-2 times a year)", 61 "Regularly (3-5 times a year)", 62 "Frequently (more than 5 times a year)" 63 ] 64 }, 65 { 66 "question": "Do you have a preference for the tent's setup time?", 67 "explanation": "Some tents are designed for quick setup while others may take longer, affecting your camping experience.", 68 "choices": [ 69 "Quick setup (under 10 minutes)", 70 "Moderate setup (10-20 minutes)", 71 "No preference" 72 ] 73 } 74 ]; 75 76const sampleArticle = 77{ 78 "criteria": [ 79 { 80 "criterion": "Weather Resistance", 81 "description": "The ability of a tent to withstand various weather conditions, including rain, wind, and UV exposure. Look for waterproof ratings, durable fabric, and strong seams to ensure protection from the elements.", 82 "justifications": [ 83 "https://www.rei.com/learn/expert-advice/tent-buying-guide.html", 84 "https://www.outdoorgearlab.com/topics/camping-and-hiking/best-tents", 85 "https://www.campingworld.com/tent-buying-guide" 86 ], 87 "best": { 88 "name": "REI Co-op Half Dome SL 4+ Tent", 89 "webpage": "https://www.rei.com/product/163560/rei-co-op-half-dome-sl-4-tent" 90 }, 91 "bestValue": { 92 "name": "Coleman Sundome 4-Person Tent", 93 "webpage": "https://www.coleman.com/tents/sundome-4-person-tent/2000016443.html" 94 } 95 }, 96 { 97 "criterion": "Ease of Setup", 98 "description": "Refers to how quickly and easily a tent can be pitched. Features like color-coded poles, intuitive design, and fewer parts can greatly enhance setup efficie
98ncy, making it ideal for novice campers.", 99 "justifications": [ 100 "https://www.outdoorgearlab.com/topics/camping-and-hiking/best-tents", 101 "https://www.campingworld.com/tent-buying-guide", 102 "https://www.rei.com/learn/expert-advice/tent-buying-guide.html" 103 ], 104 "best": { 105 "name": "Big Agnes Copper Spur HV UL4", 106 "webpage": "https://www.bigagnes.com/Copper-Spur-HV-UL4" 107 }, 108 "bestValue": { 109 "name": "Marmot Tungsten Ultralight 2P", 110 "webpage": "https://www.marmot.com/tents/tungsten-ultralight-2p/AFS_24380.html" 111 } 112 }, 113 { 114 "criterion": "Ventilation", 115 "description": "Adequate ventilation is crucial for preventing condensation and ensuring comfort, especially in warmer climates. Look for features like mesh panels and adjustable vents to maintain airflow.", 116 "justifications": [ 117 "https://www.rei.com/learn/expert-advice/tent-buying-guide.html", 118 "https://www.outdoorgearlab.com/topics/camping-and-hiking/best-tents", 119 "https://www.campingworld.com/tent-buying-guide" 120 ], 121 "best": { 122 "name": "Nemo Hornet 2P", 123 "webpage": "https://www.nemoequipment.com/product/hornet/" 124 }, 125 "bestValue": { 126 "name": "REI Co-op Trail Hut 4 Tent", 127 "webpage": "https://www.rei.com/product/163628/rei-co-op-trail-hut-4-tent" 128 } 129 }, 130 { 131 "criterion": "Durability", 132 "description": "Durability is essential for ensuring a tent can withstand wear and tear over multiple camping trips. Look for high-denier fabrics, reinforced stitching, and robust poles to enhance longevity.", 133 "justifications": [ 134 "https://www.outdoorgearlab.com/topics/camping-and-hiking/best-tents", 135 "https://www.campingworld.com/tent-buying-guide", 136 "https://www.rei.com/learn/expert-advice/tent-buying-guide.html" 137 ], 138 "best": { 139 "name": "MSR Hubba Hubba NX 2 Tent", 140 "webpage": "https://www.msrgear.com/tents/hubba-hubba-nx-2-person-backpacking-tent/10310.html" 141 }, 142 "bestValue": { 143 "name": "Coleman Instant Tent 4-Person", 144 "webpage": "https://www.coleman.com/tents/instant-tent-4-person/2000016444.html" 145 } 146 }, 147 { 148 "criterion": "Weight", 149 "description": "The weight of the tent is a crucial factor for backpackers who need to minimize their load. Lightweight materials and designs can greatly enhance portability, making them ideal for hiking trips.", 150 "justifications": [ 151 "https://www.outdoorgearlab.com/topics/camping-and-hiking/best-tents", 152 "https://www.rei.com/learn/expert-advice/tent-buying-guide.html", 153 "https://www.campingworld.com/tent-buying-guide" 154 ], 155 "best": { 156 "name": "Big Agnes Tiger Wall UL 4", 157 "webpage": "https://www.bigagnes.com/Tiger-Wall-UL-4" 158 }, 159 "bestValue": { 160 "name": "Kelty Late Start 4 Tent", 161 "webpage": "https://www.kelty.com/late-start-4-tent/kelty-late-start-4-tent.html" 162 } 163 }, 164 { 165 "criterion": "Eco-Friendly Materials", 166 "description": "The use of sustainable and eco-friendly materials in the construction of tents can significantly lessen environmental impact. Look for tents made from recycled materials or those with certifications that indicate sustainable practices.", 167 "justifications": [ 168 "https://www.outdoorgearlab.com/topics/camping-and-hiking/best-tents", 169 "https://www.rei.com/learn/expert-advice/tent-buying-guide.html", 170 "https://www.greenmatters.com/p/sustainable-tents" 171 ], 172 "best": { 173 "name": "Nemo Dagger OSMO 4P", 174 "webpage": "https://www.nemoequipment.com/product/dagger-osmo/" 175 }, 176 "bestValue": { 177 "name": "REI Co-op Flash Air 2 Tent", 178 "webpage": "https://www.rei.com/product/164152/rei-co-op-flash-air-2-tent" 179 } 180 }, 181 { 182 "criterion": "End of Life Options", 183 "description": "Sustainable tents may offer end-of-life options such as recycling programs or take-back schemes. This ensures that the tent can be disposed of responsibly instead of ending up in a landfill.", 184 "justifications": [ 185 "https://www.outdoorgearlab.com/topics/camping-and-hiking/best-tents", 186 "https://www.rei.com/learn/expert-advice/tent-buying-guide.html", 187 "https://www.greenmatters.com/p/sustainable-tents" 188 ], 189 "best": { 190 "name": "The North Face Stormbreak 4", 191 "webpage": "https://www.thenorthface.com/shop/stormbreak-4-tent-nf0a3bqy" 192 }, 193 "bestValue": { 194 "name": "Nemo Galaxi 2P", 195 "webpage": "https://www.nemoequipment.com/product/galaxi/" 196 } 197 }, 198 { 199 "criterion": "Non-Toxic Materials", 200 "description": "The presence of non-toxic materials in the tentâs construction is important for health and safety. Tents should be free from harmful chemicals that can cause allergies or health issues.", 201 "justifications": [ 202 "https://www.rei.com/learn/expert-advice/tent-buying-guide.html", 203 "https://www.campingworld.com/tent-buying-guide", 204 "https://www.outdoorgearlab.com/topics/camping-and-hiking/best-tents" 205 ], 206 "best": { 207 "name": "Sierra Designs High Route 4 Tent", 208 "webpage": "https://sierradesigns.com/high-route-4-tent/" 209 }, 210 "bestValue": { 211 "name": "REI Co-op Trail Hut 4 Tent", 212 "webpage": "https://www.rei.com/product/163628/rei-co-op-trail-hut-4-tent" 213 } 214 }, 215 {
216 "criterion": "Cost Effectiveness", 217 "description": "Cost effectiveness evaluates the overall value a tent provides relative to its price. Consider factors like durability, features, and warranty to determine if the investment is worthwhile.", 218 "justifications": [ 219 "https://www.outdoorgearlab.com/topics/camping-and-hiking/best-tents", 220 "https://www.campingworld.com/tent-buying-guide", 221 "https://www.rei.com/learn/expert-advice/tent-buying-guide.html" 222 ], 223 "best": { 224 "name": "Coleman Sundome 4-Person Tent", 225 "webpage": "https://www.coleman.com/tents/sundome-4-person-tent/2000016443.html" 226 }, 227 "bestValue": { 228 "name": "REI Co-op Trail Hut 4 Tent", 229 "webpage": "https://www.rei.com/product/163628/rei-co-op-trail-hut-4-tent" 230 } 231 } 232 ], 233 "brands": [ 234 { 235 "brand": "T-fal", 236 "knownFor": "T-fal is known for its innovative non-stick technology and affordable cookware options." 237 }, 238 { 239 "brand": "Calphalon", 240 "knownFor": "Calphalon is recognized for its high-quality, durable cookware that offers excellent heat distribution." 241 }, 242 { 243 "brand": "GreenPan", 244 "knownFor": "GreenPan specializes in eco-friendly ceramic non-stick cookware that is free from harmful chemicals." 245 }, 246 { 247 "brand": "All-Clad", 248 "knownFor": "All-Clad is a premium brand known for its exceptional craftsmanship and professional-grade cookware." 249 }, 250 { 251 "brand": "Cuisinart", 252 "knownFor": "Cuisinart offers a wide range of kitchen products, combining quality and affordability." 253 } 254 ], 255 "recommendations": { 256 "topPick": { 257 "name": "REI Co-op Half Dome SL 4+ Tent", 258 "webpage": "https://www.rei.com/product/163560/rei-co-op-half-dome-sl-4-tent", 259 "rationale": "The REI Co-op Half Dome SL 4+ tent offers an excellent balance of weather resistance, ease of setup, and ventilation, making it suitable for various camping conditions. Its durable materials and sustainable practices further enhance its appeal, while also being lightweight for portability." 260 }, 261 "bestBuy": { 262 "name": "Coleman Sundome 4-Person Tent", 263 "webpage": "https://www.coleman.com/tents/sundome-4-person-tent/2000016443.html", 264 "rationale": "The Coleman Sundome is a great value tent that emphasizes cost-effectiveness without sacrificing essential features like weather resistance and ease of setup. Its durability and reliability make it a practical choice for budget-conscious campers." 265 }, 266 "upgradePick": { 267 "name": "Big Agnes Copper Spur HV UL4", 268 "webpage": "https://www.bigagnes.com/Copper-Spur-HV-UL4", 269 "rationale": "The Big Agnes Copper Spur HV UL4 is a premium tent that excels in all criteria, from weight and durability to eco-friendly materials and non-toxic certifications. Its innovative design and features cater to serious campers looking for the best experience, regardless of price." 270 } 271 } 272}; 273 274 275// 276// Html creation functions 277// 278 279function templateHead(category, article) { 280 281 let s; 282 283 s = ` 284 285 <h1>${category}</h1> 286 287 <h3> Recommendations </h3> 288 <ul> 289 <li> Top pick: <a href='${article.recommendations.topPick.webpage}'> ${article.recommendations.topPick.name}</a> <br/> 290 ${article.recommendations.topPick.rationale} <br/><br/> 291 </li> 292 <li> Best Buy: <a href='${article.recommendations.bestBuy.webpage}'> ${article.recommendations.bestBuy.name}</a> <br/> 293 ${article.recommendations.bestBuy.rationale} <br/><br/> 294 </li> 295 <li> Upgrade pick: <a href='${article.recommendations.upgradePick.webpage}'> ${article.recommendations.upgradePick.name}</a> <br/> 296 ${article.recommendations.upgradePick.rationale} <br/><br/> 297 </li> 298 </ul> 299 300 <table> 301 302`; 303 304 s += '<h3> Brands </h3>'; 305 s += "<div class='options'>" 306 const b = article.brands; 307 for (let i = 0; i < b.length; i++) { 308 s += `<div class='brandoption'> 309 <strong> ${b[i].brand} </strong> <br> 310 ${b[i].knownFor} 311 </div>`; 312 } 313 s += '</div>'; 314 315 return s; 316} 317 318function templateEnd() { 319 320 return ` 321 322 </table> 323 324 `; 325 326} 327 328function templateSectionHead(h) { 329 let s; 330 331 s = ` 332 <h3> ${h}</h3> 333 `; 334 335 return s; 336} 337 338function trimUrl(url, length) { 339 // 340 // first, trim the preciding http:// and https:// for readability 341 // 342 343 url = url.replace(/^https?:\/\//, ''); 344 345 var urlLen = url.length; 346 347 // 348 // Url is shorter than requested trim length 349 // 350 351 if (urlLen <= length) return url; 352 353 // 354 // Url is longer than trim length, so trim and append ... 355 // 356 357 var trimUrl = url.substring(0, length) + "..."; 358 return trimUrl; 359 360} 361 362const UrlDisplayLength = 80; 363 364function templateSection(criteria) { 365 let s = ""; 366 367 for (let i = 0; i < criteria.length; i++) { 368 let criterion = criteria[i]; 369 370 let t = "Sources: <ul>"; 371 for (let j = 0; j < criterion.justifications.length; j++) { 372 let link = criterion.justifications[j]; 373 t += `<li><a href='${link}'> ${trimUrl(link, UrlDisplayLength)} </a></li>`; 374 } 375 t += "</ul>"; 376 377 s += ` 378 <tr> 379 <td class="expand-btn-cell"><span class="expand-btn"></span></td> 380 <td class="category-cell">${criterion.criterion}</td> 381 </tr> 382 383 <tr class="details"> 384 <td colspan="2"> 385 <div class="details-content"> 386 ${criterion.description} <br/><br/> 387 388 Best product: <a href='${criterion.best.webpage}'>
388${criterion.best.name}</a> <br/> 389 Value pick: <a href='${criterion.bestValue.webpage}'>${criterion.bestValue.name}</a> <br/><br/> 390 391 ${t} 392 </div> 393 </td> 394 </tr>`; 395 396 } 397 398 return s; 399 400} 401 402function makeHtml(category, articleObj) { 403 404 let html = ""; 405 html += templateHead(category, articleObj); 406 407 html += templateSectionHead('Product factors'); 408 html += templateSection(articleObj.criteria); 409 410 html += templateEnd(); 411 412 return html; 413 414} 415 416function makeQuestionsHtml(questionsObj) { 417 418 let html = ""; 419 420 for (let i = 0; i < questionsObj.length; i++) { 421 422 let q = questionsObj[i]; 423 html += `<div><h3> ${q.question} </h3> 424 ${q.explanation} <br/> 425 `; 426 427 for (let j = 0; j < q.choices.length; j++) { 428 let choice = q.choices[j]; 429 430 html += `<span class='qoption' data-question=${i} data-option=${j}> ${choice} </span>`; 431 } 432 } 433 434 return html; 435} 436 437function googlelink (q) { 438 return `https://www.google.com/search?q=${encodeURIComponent(q)}`; 439} 440 441function makeRecommendationsHtml (article) { 442 443 let html = ""; 444 445 html += ` 446 <h3> Recommendations </h3> 447 <ul> 448 <li> Top pick: <a target="_blank" href='${googlelink(article.recommendations.topPick.name)}'> ${article.recommendations.topPick.name}</a> <br/> 449 ${article.recommendations.topPick.rationale} <br/><br/> 450 </li> 451 <li> Best Buy: <a target="_blank" href='${googlelink(article.recommendations.bestBuy.name)}'> ${article.recommendations.bestBuy.name}</a> <br/> 452 ${article.recommendations.bestBuy.rationale} <br/><br/> 453 </li> 454 <li> Upgrade pick: <a target="_blank" href='${googlelink(article.recommendations.upgradePick.name)}'> ${article.recommendations.upgradePick.name}</a> <br/> 455 ${article.recommendations.upgradePick.rationale} <br/><br/> 456 </li> 457 </ul> 458 `; 459 460 /* 461 html += ` 462 <h3> Recommendations </h3> 463 <ul> 464 <li> Top pick: <a target="_blank" href='${article.recommendations.topPick.webpage}'> ${article.recommendations.topPick.name}</a> <br/> 465 ${article.recommendations.topPick.rationale} <br/><br/> 466 </li> 467 <li> Best Buy: <a target="_blank" href='${article.recommendations.bestBuy.webpage}'> ${article.recommendations.bestBuy.name}</a> <br/> 468 ${article.recommendations.bestBuy.rationale} <br/><br/> 469 </li> 470 <li> Upgrade pick: <a target="_blank" href='${article.recommendations.upgradePick.webpage}'> ${article.recommendations.upgradePick.name}</a> <br/> 471 ${article.recommendations.upgradePick.rationale} <br/><br/> 472 </li> 473 </ul> 474 `; 475 */ 476 477 return html; 478} 479 480/* 481var container = document.getElementById('questionnaire'); 482for (var i = 0; i < questions.length; i++) { 483 var questionDiv = document.createElement('div'); 484 questionDiv.innerHTML = '<h3>' + questions[i].question + '</h3>'; 485 for (var j = 0; j < questions[i].options.length; j++) { 486 var option = document.createElement('span'); 487 option.className = 'option'; 488 option.textContent = questions[i].options[j]; 489 option.setAttribute('data-question', i); 490 option.setAttribute('data-option', j); 491 questionDiv.appendChild(option); 492 } 493 container.appendChild(questionDiv); 494} 495*/
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.