Flashcard
This program takes 10 questions from Stackoverflow, and it displays only the ones with answers. Once you think about a question, you simply click on the, "Show me the Answer!" buttons to see how your answer compares to those of others.
You can click on the blue subjective tags to show only questions in that subject.
This was created using the Stackoverflow api. Feel free to clone and mutate it!
Scroll down to the bottom of the page to take a look at the code used the render the page.
Loading...
The Code (fresh off the presses, displaying what was used above):
so.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
$questionsFile = "so-qa.php";
$answersFile = "so-answer.php";
?>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Stackoverflow Flashcards</title>
<link rel="stylesheet" href="styles/so.css">
<script type="text/javascript" src="http://peter-ajtai.com/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
/*global $ */
$.get( 'http://peter-ajtai.com/examples/php/<?php echo $questionsFile; ?>' + window.location.search ,
function(data) {
$(document).ready(function() {
$('#q-list').html(data);
// Open and close the bodies of individual answers.
$("input.answer").click( function () {
var theID = $(this).attr('id');
//Close all _other_ inputs
$('#' + theID).closest("ul").find(".aInputShow").not($(this)).removeClass("aInputShow").addClass("aInput").val("Show me the answer.");
//Show correct answer
if ( $('#' + theID).val() !== 'Show me the answer!') {
if ( $('#' + theID).val() === 'Show me the answer.') {
// Change the input button
$('#' + theID).removeClass("aInput").addClass("aInputShow");
$('#' + theID).val("Hide the answer.");
} else {
$('#' + theID).removeClass("aInputShow").addClass("aInput");
$('#' + theID).val("Show me the answer.");};
// Show / hide current answer and close all answer divs
$('#' + theID + "-ans").toggle().siblings('.answer-response').hide();
} else {
// Change the input button
$('#' + theID).removeClass("aInput").addClass("aInputShow");
$('#' + theID).val("Hide the answer.");
$.get('http://peter-ajtai.com/examples/php/<?php echo $answersFile; ?>',
{ answerNum: theID },
function(data) {
var answerDiv = $(document.createElement('div'));
$(answerDiv).attr('id', theID + "-ans");
$(answerDiv).attr('class', "answer-response");
$(answerDiv).html(data);
$('#' + theID).closest('.question-box').append(answerDiv);
$('#' + theID + "-ans").siblings('.answer-response').hide();
});
};
});
// Open and close the body of questions.
$("input.question").toggle(
function() {
var theID = $(this).attr('id');
$('#' + theID + "-que").css('display','inline');
$('#' + theID).val("Hide the body of the question.");
$('#' + theID).removeClass("aInput").addClass("aInputShow");
},
function() {
var theID = $(this).attr('id');
$('#' + theID + "-que").css('display','none');
$('#' + theID).val("Show me the body of the question.");
$('#' + theID).removeClass("aInputShow").addClass("aInput");
}
);
});
}
);
</script>
</head>
<body>
<div id="page">
<div id="intro">
<h1><a href="http://peter-ajtai.com/examples/php/so.php">Flashcard</a></h1>
<noscript>
<p style="color:red; font-size:200%; border:solid 5px red; width:66%; margin:1em auto; padding:1em;">Sorry, you need Javascript
to use this page, since it relies on data loaded with Javascript.</p>
</noscript>
<p>This program takes 10 questions from <a href="http://stackoverflow.com/">Stackoverflow</a>, and it
displays only the ones with answers. Once you think about a question, you simply click on
the, "Show me the Answer!" buttons to see how your answer compares to those of others.</p>
<p>You can click on the blue subjective tags to show only questions in that subject.</p>
<p>This was created using the <a href="http://api.stackoverflow.com/1.0/help">Stackoverflow api</a>. Feel free to clone and mutate it!</p>
<p>Scroll down to the bottom of the page to take a look at the code used the render the page.</p>
</div>
<br/>
<div class="tags-info">
<?php
if (isset($_GET["tag"]))
{
?>
<h2>You are currently browsing:</h2>
<div class="tags">
<?php
echo '<a class="post-tag" href="http://peter-ajtai.com/examples/php/so.php?tag=' . $_GET["tag"] . '">' . $_GET["tag"] . '</a>';
?>
</div><br/>
<?php
} else
{
echo '<h2>You are looking at the most recent active questions</h2>';
echo '<p>Click on a <span class="post-tag">blue subject tag</span> to browse that subject.</p>';
}
?>
</div>
<div id="q-list">
<!-- Content will be loaded here -->
<br/><br/><br/><br/><br/><br/>
<h2>Loading...<br/>
<img src="images/ajax-loader.gif" alt="Data is loading" /></h2>
<br/><br/><br/><br/><br/><br/>
</div>
<h2>The Code (fresh off the presses, displaying what was used above):</h2>
<h3>so.php</h3>
<p>
<?php
// Show code ##################################################################
highlight_file(__FILE__);
?>
</p>
<h3><?php echo $answersFile ?></h3>
<p>
<?php
// Show code ##################################################################
highlight_file($answersFile);
?>
</p>
<h3><?php echo $questionsFile; ?></h3>
<p>
<?php
// Show code ##################################################################
highlight_file($questionsFile);
?>
</p>
</div><!--#page-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4145174-13']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
so-answer.php
<?php
include_once "css.php";
// create a new cURL resource
$answerID = $_GET["answerNum"];
$ch = curl_init("http://api.stackoverflow.com/1.0/answers/$answerID?body=true&key=$key");
// set URL and other appropriate options
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch,CURLOPT_ENCODING,1);
// grab URL
$json = curl_exec($ch);
// close cURL resource, and free up system resources
curl_close($ch);
// Decode JSON into associative array
$obj = json_decode($json, true);
echo"<br/>";
if ($obj["answers"][0]["down_vote_count"])
echo '<span class="down-vote">-' . $obj["answers"][0]["down_vote_count"] . '</span> ';
if ($obj["answers"][0]["up_vote_count"])
echo '<span class="up-vote">+' . $obj["answers"][0]["up_vote_count"] . '</span>';
if (!$obj["answers"][0]["down_vote_count"] && !$obj["answers"][0]["up_vote_count"])
echo '<span class="vote">0</span>';
echo $obj["answers"][0]["body"];
?>
so-qa.php
<?php
$thisTag="";
if (isset($_GET["tag"]))
{
$thisTag = $_GET["tag"];
$thisTag = urlencode($thisTag);
}
if ($thisTag)
$thisTag = "&tagged=" . $thisTag . ';';
include_once "css.php";
// create a new cURL resource
$numQuestions = 10;
$ch = curl_init("http://api.stackoverflow.com/1.0/questions?pagesize=$numQuestions&answers=true&body=true{$thisTag}&key=$key");
// set URL and other appropriate options
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch,CURLOPT_ENCODING,'gzip');
// grab URL
$json = curl_exec($ch);
// close cURL resource, and free up system resources
curl_close($ch);
// Decode JSON into associative array
$obj = json_decode($json, true);
echo '<ol>';
foreach ($obj["questions"] as $key)
{
if ($key["answer_count"])
{
?>
<li class="answer-li question-box" id="<?php echo $key["question_id"]; ?>-box">
<h3>
<?php
if ($key["down_vote_count"])
echo '<span class="down-vote">-' . $key["down_vote_count"] . '</span> ';
if ($key["up_vote_count"])
echo '<span class="up-vote">+' . $key["up_vote_count"] . '</span>';
if (!$key["down_vote_count"] && !$key["up_vote_count"])
echo '<span class="vote">0</span>';
?>
<a href="http://stackoverflow.com/questions/<?php echo $key["question_id"]; ?>/"><?php echo $key["title"]; ?></a>
</h3>
<div class="tags">
<?php
foreach ($key["tags"] as $theTag)
{
echo '<a class="post-tag" href="http://peter-ajtai.com/examples/php/so.php?tag=' . urlencode($theTag) . '">' . $theTag . '</a>';
}
?>
</div>
<br/>
<input type="button" value="Show me the body of the question." id="<?php echo $key["question_id"]; ?>" class="question" />
<div id="<?php echo $key["question_id"]; ?>-que" class="question">
<?php echo $key["body"]; ?>
</div>
<h5><?php echo $key["answer_count"]; ?> Answers:</h5>
<ul>
<?php
foreach ($key["answers"] as $response)
{
echo '<li class="answer-li">';
echo '<input type="button" value="Show me the answer!" id="' . $response["answer_id"] . '" class="answer aInput" />';
echo ' <a href="http://stackoverflow.com/questions/' . "{$response["question_id"]}/{$response["answer_id"]}#{$response["answer_id"]}";
echo '" class="answer-link">Answer link</a>';
echo '</li>';
}
?>
</ul>
<br/>
</li>
<?php
}
}
echo '</ol>';
?>